mcpField
W
wiggle-claude-skill

wiggle-claude-skill

github.com/podoクリエイティブ・メディア29168 回インストール1 日前に更新
リポジトリ

wiggle-claude-skill について

wiggle-claude-skill は、静止した SVG ロゴを Lottie アニメーションにし、GIF と MP4 に書き出す Claude スキルです。ブランドロゴのモーション素材向けで、SVG 入力が必要です。

主な機能

  1. 01SVG ロゴのパスや図形をアニメーション化
  2. 02Lottie JSON の生成
  3. 03GIF と MP4 のレンダリング
  4. 04Claude スキルの導入手順

活用シーン

  1. 01ブランドロゴのアニメーション制作
  2. 02ロゴの動きを GIF と MP4 で書き出し

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill wiggle-claude-skill

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

同梱ファイルstub.yaml

詳細

wiggle-claude-skill

カタログ用の簡易説明 — スキルの全容はこちら：talknerdytome-labs/wiggle-claude-skill

判断ツリー

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

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

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

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

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

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

    npx skills add talknerdytome-labs/wiggle-claude-skill --skill wiggle-claude-skill -g -y

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

    npx skills add talknerdytome-labs/wiggle-claude-skill --skill wiggle-claude-skill -y

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

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

  • スキル名：wiggle-claude-skill
  • トリガーフレーズ：「logo animation」、「wiggle」、「SVG to Lottie」、「animated GIF」、「wiggle-claude-skill」

機能

ロゴアニメーションに特化したワークフローです。静的な SVG ロゴを入力として受け取り、パスや図形をアニメーション化して Lottie JSON 形式に変換した後、Lottie をアニメーション GIF と MP4 動画ファイルの両方としてレンダリングします。ブラウザー内のアニメーションではなく、書き出し可能なモーションアセットが必要なブランドロゴのアニメーション用途向けに設計されています。

使用しない場合

  • ロゴの範囲を超える複雑なマルチレイヤーアニメーション（gsap-skills または framer-motion-skills を使用）
  • SVG 以外のソースアセット（このワークフローには SVG 入力が必要です）

コメント

Markdown 対応