About motion-director
Motion Director is a skill that guides an implementation agent through planning and reviewing motion for interfaces, pages, videos, and animation assets. It helps select a suitable animation stack and define choreography, timing, accessibility behavior, and QA.
Key features
- 01Identify the motion output target
- 02Choose an animation stack
- 03Define timing and choreography
- 04Specify reduced-motion behavior
- 05Apply a motion quality rubric
Use cases
- 01Planning motion for a product UI
- 02Designing animation for a landing page
- 03Preparing a social video or GIF
- 04Reviewing an embedded animation asset
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/motion-directorin Claude Code to confirm it loaded.
Details
From the project READMEMotion Director
Workflow
- Identify the output target: product UI, landing page, social video, GIF, design prototype, or embedded animation asset.
- Define the job of motion: guide attention, explain state, create delight, teach a concept, or express brand.
- Choose the stack:
- Motion for React UI state and layout transitions.
- GSAP for timelines, scroll, SVG, text, and high-control choreography.
- Rive for interactive state-machine animation.
- Lottie for portable vector loops.
- Remotion for rendered video/GIF.
- Three.js for spatial/3D scenes.
- Specify timing tokens, easing, stagger rules, and reduced-motion behavior.
- Ask the implementation agent to patch code.
- Capture output and score it with the motion quality rubric.
Output Shape
Return:
- Motion goal
- Recommended stack
- Choreography
- Timing/easing tokens
- Reduced-motion path
- Implementation notes
- QA checklist
Comments
Markdown supported