mcpField
A
animate-css-skill

animate-css-skill

github.com/podoデザイン・UI29166 回インストール1 日前に更新
リポジトリ

animate-css-skill について

animate-css-skill は、HTML、React/JSX、WordPress テンプレートで Animate.css v4.1.1 を使う方法を開発者向けに案内します。クラス一覧、必要なキーフレームの抽出、アクセシビリティへの配慮を扱います。

主な機能

  1. 01Animate.css クラスの適用
  2. 02必要なキーフレームの抽出
  3. 03スクロール連動の表示効果
  4. 04RTL レイアウトの方向調整
  5. 05動きを減らす設定への対応

活用シーン

  1. 01React コンポーネントに表示アニメーションを追加
  2. 02WordPress テンプレートの要素をアニメーション化
  3. 03スクロールに合わせて要素を表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill animate-css-skill

インストール後、Claude Code で/animate-css-skillを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

animate-css-skill

カタログのスタブ — 完全なスキルはこちら：msrbuilds/animate-css-skill

判断ツリー

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

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

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

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

    グローバル：

    npx skills add msrbuilds/animate-css-skill --skill animate-css -g -y

    プロジェクト：

    npx skills add msrbuilds/animate-css-skill --skill animate-css -y

    Claude Code： 会話から離れずにコマンドを実行するには、チャットメッセージの先頭に ! を付けて送信します。

ご注意

  • ライセンス： リポジトリに LICENSE ファイルがありません

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

  • スキル名：animate-css
  • トリガーフレーズ：「Animate.css」、「CSS animation library」、「bounce animation」、「fadeIn」、「animate-css」

機能

HTML、React/JSX コンポーネント、WordPress PHP テンプレートに Animate.css v4.1.1 のアニメーションを適用します。Animate.css のクラス一覧全体（attention seekers、bouncing、fading、flipping、rotating、sliding、zooming、specials）をカバーし、バンドルされた assets/animate.min.css から必要なキーフレームだけを抽出します。Intersection Observer API を使用したスクロールトリガーの表示、RTL レイアウト向けの方向反転、ユーザーのアクセシビリティ設定を尊重する prefers-reduced-motion への対応も追加します。

使用しない場合

  • ゼロからカスタムのキーフレームアニメーションを作成する場合（css-animation-skill を使用します）
  • JavaScript の状態を必要とする、ジェスチャー操作に連動したインタラクティブなアニメーションの場合（framer-motion-skills を使用します）

コメント

Markdown 対応