design-motion-principles

design-motion-principles

カタログの概要 — スキルの完全版：kylezantos/design-motion-principles

判断フロー

1. 完全版のスキルはすでにインストールされていますか？

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

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

   [ -e ~/.agents/skills/design-motion-principles ] && echo "global" || echo "project"
   

   グローバル：

   npx skills add kylezantos/design-motion-principles --skill design-motion-principles -g -y
   

   プロジェクト：

   npx skills add kylezantos/design-motion-principles --skill design-motion-principles -y
   

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

注意事項

• ライセンス： MIT

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

• スキル名：design-motion-principles
• トリガーフレーズ：「アニメーションを追加」「アニメーションを監査」「ホバー状態」「入場・退場アニメーション」「モーションレビュー」「AI っぽいモーション」

スキルはリクエストからモードを判断します。

指示	モード
「これをアニメーション化して」「モーションを追加して」「生き生きとした感じにして」	作成
「アニメーションを監査して」「モーションをレビューして」「AI っぽいか確認して」	監査
曖昧な場合	スキルがどちらのモードか尋ねます

このスキルの機能

2 つのモードと、プロジェクトのコンテキストに応じて重み付けされる 3 つの視点があります。

モード	出力
作成	コンテキストの把握、視点の重み付けを行い、モーションを組み込んだコンポーネントを作成します（React / Framer Motion / CSS / HTML）
監査	モーションの不足箇所の分析と、AI っぽさを避けるチェックリストを作成します。自動ループする CSS デモ付きのブランド仕様の HTML レポートとして出力されます。インラインの Markdown で出力するには --terminal を指定します

3 つの視点：

• Emil Kowalski — 控えめさとスピード。「そもそもアニメーションさせる必要がありますか？」
• Jakub Krehel — 本番品質の仕上がり。「さりげない表現になっていますか？」
• Jhey Tompkins — 創造的な実験。「これをどのように発展させられますか？」

この 3 つの視点を一律に適用するのではなく、それらの間に生まれる生産的な緊張関係を活かすことが重要です。このスキルは独自の workflows/ フォルダーと references/ フォルダーを読み込むため、SKILL.md だけをコピーするのではなく、skills CLI を使ってインストールする必要があります。

使用しないケース

• 静的なレイアウト、色、タイポグラフィの作業（ui-ux-pro-max などのデザインシステムスキルを使用します）
• Emil Kowalski の単一視点によるガイダンスのみが必要な場合（emilkowalski-skill を使用します）
• JavaScript の状態管理が必要な、インタラクティブなジェスチャー駆動型アニメーション（framer-motion-skills を使用します）