クリエイティブ・エクセレンスプラグイン for Claude Code：インタラクション論によるアニメーション品質向上

開発者がClaude Code向けにCreative Excellenceプラグインを作成し、AIアシスタントが生成するアニメーションとモーションデザインの品質を向上させました。このプラグインは、Claudeが一般的なホバー効果、ランダムなグラデーション、グラスモーフィズム、単純なアニメーションを生成するという一般的な問題に対処し、モーションデザインへの構造化されたアプローチを実装しています。

仕組み

中核となる革新は「インタラクション・セオリー」という概念です。コードを書く前に、Claudeは「スナッピーな150msのイーズアウトとスライド＋フェード」や「クリップパスによる映画的な表示とテキストの段階的表示」など、1文で説明されたモーションコンセプトを提案する必要があります。ユーザーはコーディングが始まる前にこのコンセプトを承認または拒否し、銀行アプリのような真剣なアプリケーションでのバウンス効果など不適切なアニメーションを防ぎます。

承認後、Claudeは適切な技術スタック（GSAP、Framer Motion、CSSネイティブアニメーションなど）を自動的に決定し、関連するサブスキルのみを取り込み、アニメーションを実装し、prefers-reduced-motionサポート、終了アニメーション、レイアウトパフォーマンスなどの基本的なチェックを実行します。

プラグインの機能

• 2つのエントリーポイント: 既存のプロジェクトで作業するための/creative-excellenceと、ブレインストーミングから実装、監査までの完全なパイプラインのための/design-excellence
• 8つのサブスキル: モーション原則、GSAP、Framer Motion、CSSネイティブアニメーション、Three.js/R3F、生成キャンバス、デザイン監査、デザインシステムをカバー
• BAD/GOODコード比較と具体的な「禁止事項」ルールにより、Claudeが不適切に即興でコードを生成するのを防止
• mxyhi/ok-skills、kylezantos/design-motion-principles、freshtechbro/claudedesignskillsなどの研究リポジトリに基づく

インストール

このプラグインは無料でオープンソースであり、github.com/AThevon/creative-excellenceで入手可能です。以下のコマンドでインストールできます:

/plugin marketplace add [email protected]:AThevon/creative-excellence.git
/plugin install creative-excellence

開発者は改善のためのフィードバックとプルリクエストを歓迎しています。