animate について
animate は UI のアニメーション追加や修正を支援する ui-craft のサブスキルです。判断手順、時間の予算、強度設定に基づいて実装を導き、コードを直接編集します。
主な機能
- 01判断手順によるアニメーションの選別
- 02プロジェクトのスタックに応じた方式選択
- 03要素別の時間予算設定
- 04シーケンスのずらし間隔の調整
- 05動きの強度と動きを減らす設定への対応
活用シーン
- 01UI 要素のアニメーション追加・修正
- 02ダイアログ、パネル、画面遷移の時間統一
- 03動きを減らす設定に配慮したアニメーション実装
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/animateを入力して読み込まれたか確認します。
詳細
**コンテキスト：**このサブスキルは、より広範な ui-craft スキルのひとつの観点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の具体的な観点を適用してください。
$ARGUMENTS のアニメーションを追加または修正します。ui-craft スキルを読み込んでください。
ステップ 1 — 判断基準：まず references/motion.md の判断基準に従ってください。基準を満たさないものは、改善するのではなく削除します。
ステップ 2 — ライブラリを選択する：
- Discovery 中にユーザーがスタックを選択した場合 →
references/stack.mdを読みます。該当するセクション（Motion、GSAP、Three.js）を使用してください。同じプロパティに複数のライブラリを混在させないでください。 - それ以外の場合 → CSS トランジション／
@keyframes／animation-timeline: view()のみを使用します。
ステップ 3 — モーション予算を適用する：
| 要素 | 予算 |
|---|---|
| 色／不透明度 | 100-150ms |
| 小さな UI（ツールチップ、ドロップダウン） | 150-200ms |
| 中程度の UI（モーダル、パネル） | 200-300ms |
| 大きな UI（ページ遷移、ドロワー） | 300-400ms |
退場時間は、入場時間のおよそ 75% にします（短めにし、同じ ease-out を使います。より穏やかに退場させる場合は、cubic-bezier(0.4, 0, 1, 1) のように終盤が平坦なものを使います）。UI に ease-in は決して使わないでください（references/motion.md を参照）。cubic-bezier(0.22, 1, 0.36, 1) は、安全に使えるスプリング風のデフォルトです。
ステップ 4 — 複数段階のシーケンス → ../examples/animation-storyboard.md を読みます。スタッガーは 200ms ではなく、30-80ms にします。
ステップ 5 — 設定値を尊重する：
MOTION_INTENSITY ≤ 3→ ホバー状態のみ。入場アニメーションやスクロールトリガーは使いません。MOTION_INTENSITY 4-7→ 標準的な入場アニメーションとホバーを使い、スクロール時の表示はセクションごとに最大 1 つまでにします。MOTION_INTENSITY 8+→ スクロール連動、ページ遷移、磁石のようにカーソルに追従する動きは使用できます（ただし、引き続き動きを抑える設定を尊重してください）。
出力：コードを直接編集してください。各ファイルの編集後に、Review Format の表を出力してください。削除したアニメーションとその理由を明記してください。
次のステップ： /polish — 追加したモーションの周辺にある複合的な細部を調整します（段階 1）。