skills.rest
VoTruongDanh
VoTruongDanhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion-ui

Automate consistent Framer Motion UI interactions with design tokens.

2|Updated Mar 5, 2026
Search Tags:#accessibility#micro-interactions#framer-motion#design-tokens#ui-animation#motion-ui
One-click install
npx skills add https://github.com/VoTruongDanh/Skills-Agent --skill motion-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-ui
Source: https://github.com/VoTruongDanh/Skills-Agent/tree/main/.cursor/skills/motion-ui
Command: npx skills add https://github.com/VoTruongDanh/Skills-Agent --skill motion-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion-driven UI often lacks consistency and accessibility; this Skill provides a token-driven, reusable set of guidelines to unify micro-interactions.

Core Features & Use Cases

  • Motion patterns: standardized entry/exit, hover, and layout animations using Framer Motion.
  • Design tokens: CSS variables for colors, spacing, and timing to ensure brand-consistent UI.
  • Accessibility: respects reduced motion and focus states, improving usability across users.
  • Use Case: When building a new interactive form or modal, apply AMUI guidelines to deliver a smooth, polished experience with predictable states.

Quick Start

Create an AMUI component following the motion UI patterns and tokens to implement a responsive button with hover and loading states.

Frequently Asked Questions about motion-ui

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

FAQPage Schema
How do I create consistent UI animations with Framer Motion using design tokens?▼

Create consistent UI animations by applying token-driven motion patterns to standardize entry, exit, hover, and layout interactions across React components. This approach uses CSS variables for timing and spacing to ensure brand-consistent UI.

What's the best way to add accessible micro-interactions to React components?▼

Add accessible micro-interactions by implementing motion-rich UI patterns that respect reduced motion preferences and maintain clear focus states. This ensures usability across all users while delivering smooth, polished component animations.

Does motion-ui work with standard React components like buttons, inputs, and modals?▼

Yes, motion-ui applies standardized animation patterns to standard React components including buttons, inputs, alerts, modals, and pages. It provides implementation guidance for AnimatePresence, hover and tap states, and responsive behavior.

Can I use Framer Motion AnimatePresence for entry and exit animations without losing accessibility?▼

Yes, you can use Framer Motion AnimatePresence for entry and exit animations while maintaining accessibility by respecting reduced motion guidelines. The system ensures predictable states and smooth transitions without compromising usability.

Why do my design tokens and CSS variables not apply consistently to UI animations?▼

Design tokens may not apply consistently to UI animations without a unified motion-first styling system. By mapping CSS variables for colors, spacing, and timing directly to Framer Motion properties, you ensure brand-consistent UI animations.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

framer

Export design tokens as CSS variables for Framer prototypes.

Community
Advanced
rabiasohail098rabiasohail098

motion-interaction-designer

Implement accessible Framer Motion patterns for React UI components.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

ckm:ui-styling

Build accessible React interfaces with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
R1ve3raaTechR1ve3raaTech

gsap-timeline

Manages complex animation sequences and nesting for GSAP projects.

Community
Advanced