ハイエージェンシーフロントエンドスキル

1. アクティブベースライン設定

DESIGN_VARIANCE: 8 (1=完全対称, 10=アーティスティックな混沌)
MOTION_INTENSITY: 6 (1=静的/動きなし, 10=映画的/マジック物理)
VISUAL_DENSITY: 4 (1=アートギャラリー/風通しの良い, 10=パイロットコックピット/情報満載)

AI指示: 全生成の標準ベースラインは厳密にこれらの値(8, 6, 4)に設定されています。ユーザーにこのファイルを編集するよう求めないでください。そうでなければ、常にユーザーに従ってください: チャットプロンプトで明示的に要求された内容に基づいて、これらの値を動的に適応させてください。これらのベースライン（またはユーザーが上書きした値）をグローバル変数として使用し、セクション3から7の特定のロジックを駆動してください。

2. デフォルトアーキテクチャと規約

ユーザーが明示的に異なるスタックを指定しない限り、一貫性を維持するために以下の構造的制約に従ってください:

依存関係の確認 [必須]: サードパーティのライブラリ（例: framer-motion, lucide-react, zustand）をインポートする前に、必ず package.json を確認してください。パッケージが存在しない場合は、コードを提供する前にインストールコマンド（例: npm install package-name）を出力しなければなりません。ライブラリが存在することを決して前提としないでください。
フレームワークとインタラクティビティ: ReactまたはNext.js。デフォルトはサーバーコンポーネント（RSC）です。
- RSCの安全性: グローバルステートはクライアントコンポーネントでのみ機能します。Next.jsでは、プロバイダーを "use client" コンポーネントでラップしてください。
- インタラクティビティの分離: セクション4または7（モーション/リキッドグラス）がアクティブな場合、特定のインタラクティブUIコンポーネントは、先頭に 'use client' を持つ独立したリーフコンポーネントとして抽出しなければなりません。サーバーコンポーネントは静的レイアウトのみをレンダリングします。
状態管理: 分離されたUIにはローカルの useState/useReducer を使用します。グローバルステートは深いプロップドリルを避けるために厳密に使用します。
スタイリングポリシー: スタイリングの90%にTailwind CSS（v3/v4）を使用します。
- TAILWINDバージョンロック: 最初に package.json を確認してください。v3プロジェクトでv4の構文を使用しないでください。
- T4設定ガード: v4の場合、postcss.config.js で tailwindcss プラグインを使用しないでください。@tailwindcss/postcss またはViteプラグインを使用してください。
アンチ絵文字ポリシー [重要]: コード、マークアップ、テキストコンテンツ、altテキストで絵文字を絶対に使用しないでください。シンボルは高品質なアイコン（Radix、Phosphor）またはクリーンなSVGプリミティブに置き換えてください。絵文字は禁止です。
レスポンシブとスペーシング:
- ブレークポイント（sm, md, lg, xl）を標準化します。
- ページレイアウトは max-w-[1400px] mx-auto または max-w-7xl でコンテナ化します。
- ビューポートの安定性 [重要]: 高さ全体のヒーローセクションに h-screen を決して使用しないでください。モバイルブラウザ（iOS Safari）での壊滅的なレイアウトジャンプを防ぐために、常に min-h-[100dvh] を使用してください。
- フレックス計算ではなくグリッド: 複雑なフレックスボックスのパーセント計算（w-[calc(33%-1rem)]）を決して使用しないでください。信頼性の高い構造には常にCSSグリッド（grid grid-cols-1 md:grid-cols-3 gap-6）を使用してください。
アイコン: インポートパスとして必ず @phosphor-icons/react または @radix-ui/react-icons を使用しなければなりません（インストールされているバージョンを確認）。strokeWidth をグローバルに標準化します（例: 1.5 または 2.0 のみを使用）。

3. デザインエンジニアリング指示（バイアス補正）

LLMには特定のUIパターンに対する統計的バイアスがあります。これらのエンジニアリングルールを使用して、プレミアムなインターフェースを積極的に構築してください:

ルール1: 決定論的タイポグラフィ

ディスプレイ/見出し: text-4xl md:text-6xl tracking-tighter leading-none をデフォルトにします。
- アンチスロップ: 「プレミアム」や「クリエイティブ」な雰囲気に Inter を使用することを推奨しません。Geist, Outfit, Cabinet Grotesk, または Satoshi を使用してユニークな個性を強制します。
- テクニカルUIルール: ダッシュボード/ソフトウェアUIではセリフフォントは厳密に禁止です。これらのコンテキストでは、ハイエンドのサンセリフペアリング（Geist + Geist Mono または Satoshi + JetBrains Mono）のみを使用してください。
本文/段落: text-base text-gray-600 leading-relaxed max-w-[65ch] をデフォルトにします。

ルール2: 色調整

制約: 最大1アクセントカラー。彩度 < 80%。
ライラック禁止: 「AIパープル/ブルー」の美学は厳密に禁止です。紫色のボタングロー、ネオングラデーションは禁止です。絶対的なニュートラルベース（Zinc/Slate）と、ハイコントラストで単一のアクセント（例: エメラルド、エレクトリックブルー、ディープローズ）を使用してください。
色の一貫性: 出力全体で1つのパレットに固執してください。同じプロジェクト内でウォームグレーとクールグレーを行き来しないでください。

ルール3: レイアウトの多様化

アンチセンターバイアス: DESIGN_VARIANCE > 4 の場合、中央揃えのヒーロー/H1セクションは厳密に禁止です。「スプリットスクリーン」（50/50）、「左寄せコンテンツ/右寄せアセット」、または「非対称な余白」構造を強制します。

ルール4: マテリアリティ、シャドウ、および「カードの過剰使用防止」

ダッシュボード強化: VISUAL_DENSITY > 7 の場合、汎用的なカードコンテナは厳密に禁止です。border-t, divide-y、または純粋なネガティブスペースを使用して論理グループ化してください。データメトリクスは、z-indexが機能的に必要でない限り、囲まれずに呼吸する必要があります。
実行: カードは、高さが階層を伝える場合にのみ使用してください。シャドウを使用する場合は、背景色に合わせて色合いをつけてください。

ルール5: インタラクティブUI状態

必須生成: LLMは自然に「静的な」成功状態を生成します。完全なインタラクションサイクルを実装しなければなりません:
- ローディング: レイアウトサイズに一致するスケルトンローダー（汎用的な円形スピナーは避ける）。
- 空状態: データの入力方法を示す美しく構成された空状態。
- エラー状態: 明確でインラインのエラー報告（例: フォーム）。
- 触覚フィードバック: :active 時に、-translate-y-[1px] または scale-[0.98] を使用して、成功/アクションを示す物理的な押し込みをシミュレートします。

ルール6: データとフォームパターン

フォーム: ラベルは入力の上に配置しなければなりません。ヘルパーテキストはオプションですが、マークアップに存在する必要があります。エラーテキストは入力の下に配置します。入力ブロックには標準の gap-2 を使用します。

4. クリエイティブプロアクティビティ（アンチスロップ実装）

一般的なAIデザインに積極的に抗うために、以下のハイエンドコーディングコンセプトをベースラインとして体系的に実装してください:

「リキッドグラス」屈折: ガラスモーフィズムが必要な場合、backdrop-blur を超えてください。1pxの内側ボーダー（border-white/10）と微妙な内側シャドウ（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]）を追加して、物理的なエッジの屈折をシミュレートします。
磁気マイクロ物理（MOTION_INTENSITY > 5 の場合）: マウスカーソルに向かってわずかに引っ張られるボタンを実装します。重要: 磁気ホバーや連続アニメーションにReactの useState を決して使用しないでください。モバイルでのパフォーマンス低下を防ぐために、Reactレンダリングサイクル外でFramer Motionの useMotionValue と useTransform のみを使用してください。
永続的マイクロインタラクション: MOTION_INTENSITY > 5 の場合、標準コンポーネント（アバター、ステータスドット、背景）に、連続的で無限のマイクロアニメーション（パルス、タイプライター、フロート、シャイマー、カルーセル）を組み込みます。すべてのインタラクティブ要素にプレミアムなスプリング物理（type: "spring", stiffness: 100, damping: 20）を適用します。リニアイージングは禁止です。
レイアウトトランジション: 状態変更にわたるスムーズな並べ替え、サイズ変更、共有要素トランジションには、常にFramer Motionの layout および layoutId プロパティを利用します。
スタッガードオーケストレーション: リストやグリッドを即座にマウントしないでください。staggerChildren（Framer）またはCSSカスケード（animation-delay: calc(var(--index) * 100ms)）を使用して、シーケンシャルなウォーターフォール表示を作成します。重要: staggerChildren の場合、親（variants）と子は同一のクライアントコンポーネントツリー内に存在しなければなりません。データが非同期でフェッチされる場合、データをプロップとして中央の親モーションラッパーに渡します。

5. パフォーマンスガードレール

DOMコスト: グレイン/ノイズフィルターは、固定され、ポインターイベントがない疑似要素（例: fixed inset-0 z-50 pointer-events-none）にのみ適用し、スクロールコンテナには決して適用しないでください。これにより、連続的なGPU再描画とモバイルパフォーマンス低下を防ぎます。
ハードウェアアクセラレーション: top, left, width, height をアニメーション化しないでください。transform と opacity のみをアニメーション化します。
Z-Index制限: プロンプトなしで任意の z-50 や z-10 を乱用しないでください。z-indexはシステム的なレイヤーコンテキスト（固定ナビバー、モーダル、オーバーレイ）に厳密に使用します。

6. テクニカルリファレンス（ダイヤル定義）

DESIGN_VARIANCE (レベル 1-10)

1-3 (予測可能): Flexbox justify-center、厳密な12カラム対称グリッド、均等なパディング。
4-7 (オフセット): margin-top: -2rem の重なり、さまざまな画像アスペクト比（例: 4:3 と 16:9 の隣接）、中央揃えデータの上に左揃えヘッダー。
8-10 (非対称): メイソンリーレイアウト、CSSグリッドのフラクショナルユニット（例: grid-template-columns: 2fr 1fr 1fr）、大きな空きゾーン（padding-left: 20vw）。
モバイルオーバーライド: レベル4-10の場合、md: より上の非対称レイアウトは、ビューポートが < 768px の場合に、水平スクロールとレイアウト崩壊を防ぐために、厳密なシングルカラムレイアウト（w-full, px-4, py-8）に積極的にフォールバックしなければなりません。

MOTION_INTENSITY (レベル 1-10)

1-3 (静的): 自動アニメーションなし。CSSの :hover と :active 状態のみ。
4-7 (流動的CSS): transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) を使用します。ロードインには animation-delay カスケードを使用します。transform と opacity に厳密に焦点を当てます。will-change: transform は控えめに使用します。
8-10 (高度な振付): 複雑なスクロールトリガー表示またはパララックス。Framer Motionフックを使用します。window.addEventListener('scroll') は決して使用しないでください。

VISUAL_DENSITY (レベル 1-10)

1-3 (アートギャラリーモード): 多くの余白。大きなセクションギャップ。すべてが非常に高価でクリーンに見えます。
4-7 (デイリーアプリモード): 標準的なWebアプリの通常のスペーシング。
8-10 (コックピットモード): 小さなパディング。カードボックスなし。データを分離するのは1pxの線のみ。すべてが詰まっています。必須: すべての数字に等幅フォント（font-mono）を使用します。

7. AIのクセ（禁止パターン）

プレミアムで非汎用的な出力を保証するために、明示的に要求されない限り、これらの一般的なAIデザインの特徴を厳密に避けなければなりません:

ビジュアルとCSS

ネオン/外部グロー禁止: デフォルトの box-shadow グローまたはオートグローを使用しないでください。内側のボーダーまたは微妙な色付きシャドウを使用してください。
ピュアブラック禁止: #000000 を決して使用しないでください。オフブラック、Zinc-950、またはチャコールを使用してください。
過彩度アクセント禁止: アクセントを彩度を下げて、ニュートラルにエレガントにブレンドします。
過剰なグラデーションテキスト禁止: 大きなヘッダーにテキストフィルグラデーションを使用しないでください。
カスタムマウスカーソル禁止: これらは時代遅れであり、パフォーマンスとアクセシビリティを損ないます。

タイポグラフィ

Interフォント禁止: 禁止されています。Geist, Outfit, Cabinet Grotesk, または Satoshi を使用してください。
特大H1禁止: 最初の見出しは叫ぶべきではありません。単なる巨大なスケールではなく、ウェイトと色で階層を制御してください。
セリフの制約: セリフフォントはクリエイティブ/エディトリアルデザインにのみ使用します。クリーンなダッシュボードにはセリフを決して使用しないでください。

レイアウトとスペーシング

完全に整列＆スペース配置: パディングとマージンが数学的に完璧であることを確認してください。不格好なギャップのある浮遊要素を避けてください。
3カラムカードレイアウト禁止: 汎用的な「3つの等しいカードの水平配置」機能行は禁止です。代わりに、2カラムのジグザグ、非対称グリッド、または水平スクロールアプローチを使用してください。

コンテンツとデータ（「Jane Doe」効果）

汎用的な名前禁止: 「John Doe」、「Sarah Chan」、「Jack Su」は禁止です。非常にクリエイティブで現実的な名前を使用してください。
汎用的なアバター禁止: アバターに標準のSVG「egg」やLucideユーザーアイコンを使用しないでください。クリエイティブで信頼できる写真プレースホルダーまたは特定のスタイリングを使用してください。
偽の数字禁止: 99.99%、50%、または基本的な電話番号（1234567）のような予測可能な出力を避けてください。有機的で乱雑なデータ（47.2%、+1 (312) 847-1928）を使用してください。
スタートアップスロップネーム禁止: 「Acme」、「Nexus」、「SmartFlow」。プレミアムでコンテキストに合ったブランド名を考案してください。
フィラーワード禁止: 「Elevate」、「Seamless」、「Unleash」、「Next-Gen」のようなAIコピーライティングの決まり文句を避けてください。具体的な動詞を使用してください。

外部リソースとコンポーネント

壊れたUnsplashリンク禁止: Unsplashを使用しないでください。https://picsum.photos/seed/{random_string}/800/600 のような絶対的で信頼性の高いプレースホルダー、またはSVG UIアバターを使用してください。
shadcn/uiのカスタマイズ: shadcn/ui を使用しても構いませんが、決して汎用的なデフォルト状態では使用しないでください。角丸、色、シャドウをプロジェクトのハイエンドな美学に合わせてカスタマイズしなければなりません。
プロダクション対応のクリーンさ: コードは非常にクリーンで、視覚的に印象的で、記憶に残り、あらゆる細部が細心の注意を払って洗練されている必要があります。

8. クリエイティブアーセナル（ハイエンドインスピレーション）

汎用的なUIをデフォルトにしないでください。この高度なコンセプトのライブラリから引き出して、出力が視覚的に印象的で記憶に残ることを保証してください。適切な場合は、基本的なCSSモーションではなく、複雑なスクロールテリングに GSAP（ScrollTrigger/Parallax） を、3D/Canvasアニメーションに ThreeJS/WebGL を活用してください。重要: 同じコンポーネントツリー内でGSAP/ThreeJSとFramer Motionを混在させないでください。UI/BentoインタラクションにはFramer Motionをデフォルトとして使用します。GSAP/ThreeJSは、厳格なuseEffectクリーンアップブロックでラップされた、分離されたフルページスクロールテリングまたはキャンバス背景にのみ使用します。

標準ヒーローパラダイム

暗い画像の上に中央揃えのテキストを配置するのをやめてください。非対称のヒーローセクションを試してください: テキストを左または右にきれいに揃えます。背景には、高品質で関連性の高い画像を、背景色にグラデーションで溶け込ませる（ライトモードかダークモードかに応じて、エレガントに暗くまたは明るくする）微妙なスタイルフェードとともに使用します。

ナビゲーションとメニュー

Mac OS Dock拡大: 端にあるナビゲーションバー。アイコンがホバーで流動的に拡大します。
磁気ボタン: カーソルに向かって物理的に引き寄せられるボタン。
グイーメニュー: サブアイテムが粘性液体のようにメインボタンから分離します。
ダイナミックアイランド: ステータス/アラートを表示するために変形するピル型UIコンポーネント。
コンテキストラジアルメニュー: クリック座標に正確に展開する円形メニュー。
フローティングスピードダイヤル: 二次アクションの曲線に飛び出すFAB。
メガメニューリビール: 複雑なコンテンツをスタッガーフェードで表示する全画面ドロップダウン。

レイアウトとグリッド

Bentoグリッド: 非対称でタイルベースのグループ化（例: Appleコントロールセンター）。
メイソンリーレイアウト: 固定行の高さのないスタッガードグリッド（例: Pinterest）。
クロマグリッド: グリッドの境界線またはタイルが、微妙で連続的な...

...（以降、翻訳されていない部分）

shawon-builds/Ai-skill

Ai-skill とは？

お気に入りのAIに質問する

ドキュメント