01
このSkillでできること
- ✓Reactのページや製品UIのモーション設計・実装
- ✓UIイベントに適したアニメーションの推薦
- ✓複数ステップの操作体験をモーション設計図に整理
- ✓既存アニメーションの品質レビューと改善提案
02
使い方
01
STEP 1
画面や操作の前後で変わる状態を説明する
02
STEP 2
主な操作対象、目的、感じさせたい印象を指定する
03
STEP 3
Build Page、Recommend、Compose、Implement、Reviewなどの目的を伝える
04
STEP 4
reduced motion、キーボード操作、フォーカスの要件を共有する
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/Ryan-yang125/motion-lexicon04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
Reactの設定画面で保存完了を伝えるアニメーションを設計してください。主役を1つに絞り、reduced motionとキーボード操作にも対応する実装案を示してください。出力例を見る
モーション候補またはMotion Blueprint、状態遷移、実装コード、アクセシビリティ対応、レビュー結果。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- shell: alog, and the shadcn-compatible registry under `/r/`. ```bash npm ci npm run dev npm run build ``` ## Quality gates ```bash npm run lint npm run type
- shell: pm ci npm run dev npm run build ``` ## Quality gates ```bash npm run lint npm run typecheck npm run test npm run i18n:check npm run vocabulary:check n
- network: iples and MIT-licensed implementations from [Interior](https://github.com/ddoemonn/interior).
06