使い方
- インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
- 必要なツール、認証情報、対応環境を原文で確認します。
- 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/frankxai/awesome-motion-design-agent-skills --skill web-motion-auditor開始前の確認
- 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
- スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
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.
