Motion Design
Use this skill when motion should improve comprehension, feedback, continuity, or perceived quality.
Routing
- Read
references/motion-foundations.md for tokens, springs, reduced motion, SSR safety, and performance rules.
- Read
references/motion-patterns.md for common UI patterns such as buttons, modals, toasts, page transitions, scroll, layout, and staggered reveals.
- Read
references/motion-advanced.md for gestures, drag and drop, text animation, SVG paths, custom hooks, and imperative sequences.
- Read
references/motion-ui.md when the user asks for a broad production UI motion system.
Default Rules
- Respect
prefers-reduced-motion.
- Animate transform and opacity before layout-affecting properties.
- Keep motion purposeful, quick, and tied to state changes.
- Avoid decorative motion that competes with task completion.
- Verify entering, exiting, loading, error, disabled, hover, focus, and mobile states when relevant.
Output
State what motion was added, what states it covers, and how reduced-motion behavior is handled.
1---2name: motion-design3description: Design and implement accessible UI motion systems for React, Next.js, and frontend interfaces. Use for animation, transitions, gestures, drag and drop, page transitions, staggered reveals, SVG motion, loaders, motion tokens, reduced-motion behavior, or the old motion-foundations/motion-patterns/motion-advanced/motion-ui skills.4---56# Motion Design78Use this skill when motion should improve comprehension, feedback, continuity, or perceived quality.910## Routing1112- Read `references/motion-foundations.md` for tokens, springs, reduced motion, SSR safety, and performance rules.13- Read `references/motion-patterns.md` for common UI patterns such as buttons, modals, toasts, page transitions, scroll, layout, and staggered reveals.14- Read `references/motion-advanced.md` for gestures, drag and drop, text animation, SVG paths, custom hooks, and imperative sequences.15- Read `references/motion-ui.md` when the user asks for a broad production UI motion system.1617## Default Rules18191. Respect `prefers-reduced-motion`.202. Animate transform and opacity before layout-affecting properties.213. Keep motion purposeful, quick, and tied to state changes.224. Avoid decorative motion that competes with task completion.235. Verify entering, exiting, loading, error, disabled, hover, focus, and mobile states when relevant.2425## Output2627State what motion was added, what states it covers, and how reduced-motion behavior is handled.28
RajanthaR