スキル自身の言葉で
このスキルは、正確なタイポグラフィの選択、空間のリズム、シャドウ表現の手法、カード構造、そして流動的なモーションパターンを定義することで、コーディングエージェントに15万ドル以上のエージェンシー水準のビジュアルデザインを生み出す方法を教えます。一般的なデフォルト（Inter、Roboto、太いストロークのアイコン、強すぎるシャドウ、標準的なイージング）を禁止し、Geist や Clash Display、極細アイコン、カスタムの cubic-bezier トランジションといった上質な選択肢を強制します。
すべての出力は、独自の Vibe Archetype（Ethereal Glass、Editorial Luxury、Soft Structuralism のいずれか）と Layout Archetype（Asymmetrical Bento、Z-Axis Cascade、Editorial Split のいずれか）を組み合わせ、単調な繰り返しを防がなければなりません。コンポーネントには、入れ子になった Double-Bezel の囲み、Button-in-Button の後置アイコン、広大な余白（py-24 から py-40）、そしてスクロールに連動したエントリーアニメーションを使用します。すべてのモーションは transform と opacity のみで現実の物理法則を模倣し、モバイル向けの厳格なパフォーマンス上限を守ります。
生成されるもの
- 選択された Vibe と Layout Archetype を、Double-Bezel コンポーネント構造、カスタム cubic-bezier モーション、モバイル対応のレスポンシブ collapse とともに実装する、完璧でピクセルパーフェクトな React/Tailwind/HTML コード
仕組み
- 01Variance Engine を回す
コードを書く前に、エージェントはプロンプトの文脈に基づき、事前定義されたプレミアムな組み合わせから 1 つの Vibe Archetype と 1 つの Layout Archetype を静かに選択し、ユニークに調整された出力を保証します。
- 02背景とタイポグラフィをスキャフォールドする
選択したテクスチャ（ラジアルグラデーションを伴う OLED ブラック、ノイズオーバーレイを伴う暖かみのあるクリーム、ソフトシャドウを伴うシルバーグレー）を確立し、極端に強調されたマクロ余白とともに巨大なタイポグラフィサイズを設定します。
- 03ネストされたコンポーネント構造を設計する
すべての主要なカード、入力欄、グリッドを Double-Bezel テクニックで構築します：ヘアラインボーダーとパディングを持つ外側のシェルが、独自の背景と数学的に計算されたより小さな半径を持つ内側のコアを包みます。
- 04流れるようなモーションを構成する
すべての状態変化にカスタム cubic-bezier トランジションを注入し、translate-y と opacity のシフトを伴う段階的なナビゲーション出現、および対角方向の移動とスケーリングを伴うマグネティックなボタンホバー物理演算を実装します。
- 05スクロール補間を適用する
要素は、window のスクロールリスナーではなく IntersectionObserver または Framer Motion の whileInView を使用して、800ms 以上かけて解消される穏やかなフェードアップアニメーション（translate-y-16 blur-md opacity-0）でビューポートに入ります。
- 06出力前チェックリストに対して検証する
禁止パターンがないこと、正しいアーキタイプ選択、Double-Bezel アーキテクチャ、カスタムイージング、モバイル collapse、GPU セーフなアニメーションを確認する 11 項目のマトリクスに照らしてコードを評価し、その上で提供します。