Animation
UI animations and transitions
framer-code-components-overrides
by fredm00n
Create Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration errors and font handling.
remotion-best-practices
by dirnbauer
Best practices for Remotion - Video creation in React
camsnap
by EthanAlgoX
Capture frames or clips from RTSP/ONVIF cameras.
frontend-design
by shipshitdev
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
ui-skills
by vaayne
Opinionated constraints for building better interfaces with agents.
frontend-design
by smallnest
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
shadcn-webapp-design
by evolving-machines-lab
Build production-grade Next.js web applications with shadcn/ui, Tailwind CSS, and Framer Motion. Use when building React components, pages, dashboards, landing pages, or any web UI that should use the shadcn/ui component library. Triggers on requests involving shadcn components, Tailwind styling, Framer Motion animations, or when the user wants polished, non-generic UI that avoids "vibecoded" aesthetics.
animation-gen
by sundial-org
Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.
modern-css
by ccheney
Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
lightweight-flutter-animations
by rodydavis
Learn how to create a streamlined animation widget in Flutter that eliminates the need for setState by leveraging an abstract class and SingleTickerProviderStateMixin for efficient UI updates.
Claude-Command-Suite
by qdhenry
```
workflow-feature-shipper
by Heyvhuang
"Use when you need to ship a single PR-sized feature end-to-end (plan -> implement -> verify) with artifacts. Ship core product features quickly in a Next.js codebase: turn a feature idea into an executable plan, implement in PR-sized slices, and keep artifacts under runs/ (or OpenSpec changes/ when available). Supports plan-only mode for early scoping. For prototype UI work, include a demo-ready wow moment (animation/micro-interaction) by default unless user opts out."
Example Curator Protocol
by SimHacker
Recursion is intentional. The curator learns to curate better.
generating-components
by fusengine
Use when generating UI components, buttons, forms, cards, hero sections, or using design tools. Covers Gemini Design MCP, shadcn/ui, 21st.dev, and Tailwind CSS.
validating-accessibility
by fusengine
Use when checking accessibility, color contrast, keyboard navigation, ARIA, or WCAG compliance. Covers WCAG 2.2 Level AA requirements.
layered-backgrounds
by fusengine
Use when creating hero sections, landing pages, or premium visual effects. Covers gradient orbs, blur layers, noise textures.
adding-animations
by fusengine
Use when adding animations, transitions, hover effects, or motion design. MANDATORY for every component. Covers Framer Motion patterns.
interactive-states
by fusengine
Use when implementing button states, form field states, or interactive feedback. Covers hover, active, focus, disabled, loading states.
frontend-design
by LeastBit
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
adhd-daily-planner
by sundial-org
Time-blind friendly planning, executive function support, and daily structure for ADHD brains. Specializes in realistic time estimation, dopamine-aware task design, and building systems that actually work for neurodivergent minds.
interaction-design
by petekp
Design intuitive, meaningful interactions grounded in user goals and cognitive principles. Use when designing component behaviors, user flows, feedback systems, error handling, loading states, transitions, accessibility, keyboard navigation, touch/gesture interactions, or when evaluating interaction quality. Also use for modal vs modeless decisions, direct manipulation patterns, input device considerations, emotional/dramatic aspects of UX, or when asked about making interfaces feel responsive, humane, and goal-directed.
interactive-study-guide
by petekp
"Transform a codebase study guide into a polished interactive web experience. This skill should be used when the user has a completed study guide markdown file (from codebase-study-guide or similar) and wants to turn it into an interactive pedagogical app. Triggers on requests like \"make this study guide interactive\", \"turn this into an interactive experience\", \"visualize this study guide\", \"create an interactive version\", or when a user has a study guide .md file and wants a richer presentation. Produces a Vite-served single-page app with scroll-driven storytelling, interactive architecture diagrams, animated code walkthroughs, and progressive disclosure."
explainer-visuals
by petekp
Create high-quality animated explainer visuals for essays and blog posts. Use when the user wants to visualize concepts, processes, data, or ideas with interactive web animations. Triggers on requests like "create a visual for", "animate this concept", "make an explainer", "visualize this idea", "diagram this process", "show this data", or when essay content would benefit from visual explanation. Handles abstract concepts (mental models, frameworks), technical processes (algorithms, systems), and data visualization (trends, comparisons). Outputs self-contained HTML/CSS/JS that embeds directly in web content.
design-motion-principles
by petekp
Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Use when reviewing UI animations, transitions, hover states, or any motion design work. Provides per-designer perspectives with context-aware weighting.