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 web-motion-auditorVor 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.
Web Motion Auditor
Workflow
- Run or open the app.
- Inspect the animated states: load, hover, focus, click, route transition, scroll, empty/loading/success/error.
- Check accessibility:
prefers-reduced-motion- focus visibility
- no motion that blocks reading or interaction
- Check performance on desktop and mobile widths.
- Capture screenshots/video when possible.
- Score with the motion quality rubric.
- Return concrete fixes with file references.
Common Fixes
- Shorten transitions.
- Use transforms/opacity instead of layout-heavy properties.
- Reduce stagger count.
- Add reduced-motion branch.
- Replace decorative motion with state-explaining motion.
- Move complex narrative motion to Remotion or a controlled hero scene.
