Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill motion-directorVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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
