motion-transition-review について
motion-transition-reviewは、状態変化に伴うUIモーションを設計・レビューするデザインスキルです。アクセシビリティ、動きを減らす設定、性能、入力応答性も評価します。
主な機能
- 01UIの状態変化を分類
- 02目的に応じてモーション設定を選定
- 03アクセシビリティと動きを減らす設定を確認
- 04性能と入力遅延を評価
- 05ルールID付きの仕様や指摘を作成
活用シーン
- 01ナビゲーションや表示演出の仕様作成
- 02ジェスチャー反応や進捗演出のレビュー
- 03動きを減らす設定でのアニメーション評価
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/motion-transition-reviewを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/motion-transition-rules.md
詳細
モーション遷移レビュー
動きを見せることではなく、状態を明確に伝えるためにモーションを使うスキルです。
ワークフロー
- 状態の変化を特定します。フィードバック、表示、ナビゲーション、進行状況、ジェスチャー、または中断です。
references/motion-transition-rules.mdを読みます。- モーションの目的に合わせて、継続時間、イージング、動きの構成、中断可能性を設定します。
- アクセシビリティ、視差効果の抑制、バッテリー／パフォーマンス、入力遅延を確認します。
- ルール ID を記載したモーション仕様またはレビュー結果を作成します。
使用しない場合
- このスキル固有の成果物の要件がなくてもベースモデルが対応できる一般的なアドバイスには使用しないでください。
ガードレール
- わかりにくいアニメーションより、アニメーションを使わないことを優先してください。
- 装飾的なアニメーションが終わるまで、入力をブロックしないでください。
- 視差効果を抑制する場合の代替手段を必ず含めてください。
出力形式
Motion surface:
State change:
Spec/review:
- <rule id> <motion decision or issue>
Reduced-motion behavior:
- <behavior>
Performance checks:
- <check>
コメント
Markdown 対応