motion-design

Define token-driven motion systems for UI components using Framer Motion with accessibility support.

22|6|Updated Mar 10, 2026

Search Tags:#a11y #ux #transitions #motion #framer-motion #ui-animations

Ready to run

npx skills add https://github.com/felvieira/claude-skills-fv --skill motion-design-felvieira

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/felvieira/claude-skills-fv/tree/main/skills/12-motion-design
Command: npx skills add https://github.com/felvieira/claude-skills-fv --skill motion-design-felvieira

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion design is often inconsistent and expensive to implement manually. This skill provides a structured approach to adding intentional, performant, and accessible motion to UI components, ensuring a cohesive user experience.

Core Features & Use Cases

Token-driven animations: reusable duration, easing, and stagger tokens to ensure consistency.
Animation patterns: predefined entrance, exit, list, page transitions, and micro-interactions.
Accessibility & performance: respects prefers-reduced-motion and targets 60fps.

Quick Start

Implement a motion system by defining a Framer Motion token set and applying it to the core UI components.

Frequently Asked Questions about motion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create consistent UI animations across multiple components?▼

Token-driven UI animations ensure consistency by defining reusable duration, easing, and stagger tokens. These tokens are applied as a structured system across entrances, exits, lists, and micro-interactions to standardize motion design.

How do I make Framer Motion transitions meet accessibility standards?▼

Framer Motion transitions meet accessibility standards by respecting the prefers-reduced-motion media query. This ensures that UI animations are disabled or simplified for users who request reduced motion, maintaining a11y compliance.

What is the best way to structure page transitions and list animations for 60fps performance?▼

The best way to achieve 60fps performance is applying a structured motion system with predefined animation patterns. This approach uses configurable motion tokens for page transitions and list animations to maintain optimal rendering speed.

Do I need Framer Motion to implement a token-driven UI motion system?▼

Yes, Framer Motion integration is required to implement this specific token-driven motion system. The system relies on Framer Motion to apply configurable motion tokens and predefined patterns to UI components effectively.

How does a token-driven motion system improve UI micro-interactions?▼

A token-driven motion system improves UI micro-interactions by replacing manual implementation with predefined, reusable duration and easing tokens. This ensures intentional, performant, and cohesive user experiences across all component interactions.