skills.rest
felvieira
felvieiraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/felvieira/claude-skills-fv --skill motion-design-felvieira
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
leadgenjayleadgenjay
11

LGJ-graphics

Create flat SVG illustrations with LGJ design tokens and motion patterns.

Community
Advanced
luanzebaluanzeba

normalize

Enforces design tokens and accessibility across UI elements and layouts.

Community
Advanced
zengxiaoqizengxiaoqi
1

css-animations

Create and manage CSS keyframe animations with controlled timing and iteration settings.

Community
Basic