css-animation-skill

css-animation-skill

カタログのスタブ — 完全版のスキル：neonwatty/css-animation-skill

判断ツリー

1. 完全版のスキルはすでにインストールされていますか？ この場所にあるスキルに、まだ das: ブロックがあるか確認します：

   • グローバル：grep -q "^das:" ~/.agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • プロジェクト：grep -q "^das:" .agents/skills/css-animation-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
   • das: ブロックがない場合 → 完全版のスキルがインストールされています。これを呼び出して続行してください
   • das: ブロックがある場合 → ステップ 2 に進んでください

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

   スコープを検出するには：

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

   グローバル（-g を付けてインストール）：

   npx skills add neonwatty/css-animation-skill --skill css-animation-skill -g -y
   

   プロジェクト（-g を付けずにインストール）：

   npx skills add neonwatty/css-animation-skill --skill css-animation-skill -y
   

   Claude Code： 会話を離れずにコマンドを実行するには、どちらかのコマンドを ! で始まるチャットメッセージとして送信してください。

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

• スキル名：css-animation-skill
• トリガーフレーズ：「CSS animation」、「custom animation」、「animation from live app」、「css-animation-skill」

機能

4 段階のアニメーション作成ワークフローを実行します：（1）Claude-in-Chrome MCP を使って稼働中のアプリをスクレイピングし、色、フォント、間隔、モーションスタイルなど、既存のデザイン言語を抽出します。（2）アニメーションを付ける要素、希望する雰囲気、制約についてユーザーに質問します。（3）アニメーションの概要と、カスタムの @keyframes アニメーションを含む自己完結型の HTML/CSS 出力ファイルを作成します。（4）結果が承認されるまで、フィードバックに基づいて反復します。既製のライブラリクラスではなく、アプリのビジュアルアイデンティティに合わせたオーダーメイドのキーフレームアニメーションを作成します。

使用しない場合

• カスタムのキーフレームが不要なライブラリベースのアニメーション（animate-css-skill または framer-motion-skills を使用してください）
• 動画または Lottie の出力（wiggle-claude-skill を使用してください）