animate-skill

animate-skill

カタログのスタブ — スキルの完全版：delphi-ai/animate-skill

判断ツリー

1. 完全版のスキルはすでにインストールされていますか？ 上流ではこのスキルを animate としているため、このポインターと並べてインストールされます（ポインターは置き換えられません）。

   • グローバル：f=~/.agents/skills/animate/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • プロジェクト：f=.agents/skills/animate/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → スキルは animate としてインストールされています。呼び出して続行します
   • pointer → ステップ 2 に進みます

2. スコープを検出してから、インストールします：

   [ -e ~/.agents/skills/animate-skill ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add delphi-ai/animate-skill --skill animate -g -y
   

   プロジェクト：

   npx skills add delphi-ai/animate-skill --skill animate -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、チャットメッセージを ! で始めて送信します。

注意事項

• ライセンス： LICENSE ファイルはありません
• 名前の競合： animate は emilkowalski-skill も書き込みます（インストール時、またはカタログのポインターとして）。両方をインストールすると、後からインストールしたものが先のものを上書きします。

インストール後の呼び出し

• スキル名：animate
• トリガーフレーズ：「animate」、「hover animation」、「toast animation」、「text reveal」、「animate-skill」

概要

「Animations on the Web」コースを基にした、Emil Kowalski に着想を得た Next.js および React 向けのアニメーションパターンです。イージングと時間のチートシート、リファレンスノート（CSS アニメーション、Framer Motion、イージングとタイミング、パフォーマンスとアクセシビリティ）、および動作する .tsx の例（ホバー時のマイクロインタラクション、トーストのスタック、テキストのリビール、共有レイアウトのタブインジケーター、高さのアニメーション、モーダルのトランジション）が含まれています。装飾的ではなく、必然性と目的を感じさせるモーションを重視した設計思想に基づいています。すべてのアニメーションには、明確な伝達機能が求められます。

使用しないケース

• 複数のステップを順番に実行する複雑なタイムラインのオーケストレーション（gsap-skills を使用）
• 動画または Lottie の出力（wiggle-claude-skill を使用）