Animation
UI animations and transitions
frontend-design
by julianromli
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.
frontend-ui-animator
by julianromli
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
kanpeki
by fellipeutaka
"Use Kanpeki component library in React projects. Activate when user wants to add, use, customize, or compose accessible UI components from Kanpeki (@kanpeki/*). Covers installation, component patterns, forms, theming, and dark mode with React Aria Components + Tailwind CSS 4.1 + CVA."
baseline-ui
by noartem
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
thetoolforthat
by pipeabellos
Guide for discovering 540+ developer tools, design resources, AI platforms, and agencies using the thetoolforthat MCP server. Use when asked to find tools for a project, recommend tech stack components, discover design agencies, or search for specific tool categories.
frontend-design
by xenitV1
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
vr-ar
by xenitV1
VR/AR development principles. Comfort, interaction, performance requirements.
motion
by mikkelkrogsholm
"Motion (formerly Framer Motion) — React and JavaScript animation library. Use when animating with Motion or Framer Motion: page transitions, hover/tap/drag gestures, scroll-triggered animations, exit animations, layout animations, spring physics, variants, AnimatePresence, useAnimate, useMotionValue, or migrating from framer-motion to the motion package. Fetch live documentation for up-to-date details."
damage-numbers
by verekia
Display floating damage numbers that animate upward and fade out, with support for critical hits.
pushback
by verekia
Make enemies flash white and rock back and forth when receiving damage.
low-health
by verekia
Display a pulsing red vignette overlay when the player's health is low.
aio-xstate
by aiocean
Implement, refactor, and review XState v5 state machines in TypeScript with strict setup().createMachine() ruleset, design-first planning, params-first typing, anti-god-machine enforcement, and canonical actor patterns (fromPromise, fromCallback, fromObservable, fromTransition). Covers invoke vs spawnChild boundaries, hierarchical/parallel states, delayed transitions, cleanup patterns, and real-world patterns like SDK bridging with fromCallback actors and Promise-bridge for async external events. Use when building state machines, actors, statecharts, finite state logic, actor systems, or reviewing/refactoring XState code.
manage-lifecycle
by cuioss
Plan lifecycle operations - discovery, phase transitions, archiving, and routing
physics-intuition
by dylantarre
Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.
Animation Principles - Teaching Others
by dylantarre
Use when someone needs to explain animation principles to students, mentees, or team members at various skill levels
animate
by delphi-ai
Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components. Based on Emil Kowalski's "Animations on the Web" course.
css
by joabgonzalez
"Modern CSS with Grid, Flexbox, and custom properties. Trigger: When writing CSS styles, implementing layouts, or using modern features."
tailwind-ui-patterns
by autohandai
Tailwind CSS v4 patterns, component styling, and responsive design
educator-teacher
by dylantarre
Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.
frontend-design
by ocrbase-hq
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.
product-manager
by dylantarre
Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.
data-visualization
by dylantarre
Use when animating charts, graphs, dashboards, data transitions, or any information visualization work.
frontend-developer
by dylantarre
Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.
accessibility-advocate
by dylantarre
Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.