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

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 (デイリーアプリモード): 標準的なウェブアプリの通常のスペーシング。
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の「卵」や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。
メガメニューリビール: 複雑なコンテンツを段階的にフェードイン表示する全画面ドロップダウン。

レイアウトとグリッド

ベントウグリッド: 非対称なタイルベースのグループ化（例: Appleコントロールセンター）。
メイソンリーレイアウト: 固定された行の高さがない段違いグリッド（例: Pinterest）。
クロマグリッド: 微妙で連続的に変化する色を持つグリッドボーダーまたはタイル。

（以下、翻訳元マークダウンが途中で切れているため、ここまでの翻訳となります）

joniii4k/main1

main1 とは？

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

ドキュメント