Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill motion-directorPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Documento Skill originale
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
Motion 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
