leonxlnx/taste-skill

High-Agency Frontend Skill（高裁量フロントエンドスキル）

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プラグインを使用してください。
• アンチ絵文字ポリシー [重要]: コード、マークアップ、テキストコンテンツ、代替テキストで絵文字を絶対に使用しないでください。記号は高品質なアイコン（Radix、Phosphor）またはクリーンなSVGプリミティブに置き換えてください。絵文字は禁止です。
• レスポンシブ性とスペーシング:
  • ブレークポイント（sm、md、lg、xl）を標準化します。
  • ページレイアウトは max-w-[1400px] mx-auto または max-w-7xl を使用してコンテナ化します。
  • ビューポートの安定性 [重要]: 全高のヒーローセクションに h-screen を絶対に使用しないでください。モバイルブラウザ（iOS Safari）での壊滅的なレイアウトジャンプを防ぐために、常に min-h-[100dvh] を使用してください。
  • Flexの計算よりもグリッド: 複雑なフレックスボックスのパーセンテージ計算（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コスト: グレイン/ノイズフィルターは、固定された pointer-events-none の擬似要素（例：fixed inset-0 z-50 pointer-events-none）に排他的に適用し、スクロールコンテナには決して適用しないでください。これにより、継続的なGPU再描画とモバイルパフォーマンスの低下を防ぎます。
• ハードウェアアクセラレーション: top、left、width、height をアニメーション化しないでください。transform と opacity を介して排他的にアニメーション化します。
• Z-インデックスの抑制: 理由もなく恣意的な 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（Fluid 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/キャンバスアニメーションにはThreeJS/WebGL を活用してください。重要: 同じコンポーネントツリー内でGSAP/ThreeJSとFramer Motionを混在させないでください。UI/BentoインタラクションにはFramer Motionをデフォルトとします。GSAP/ThreeJSは、分離された全ページスクロールテリングまたはキャンバス背景に排他的に使用し、厳格なuseEffectクリーンアップブロックでラップしてください。

標準ヒーローパラダイム

• 暗い画像の上の中央寄せテキストをやめてください。非対称のヒーローセクションを試してください。テキストは左または右にきれいに揃えます。背景は、高品質で関連性の高い画像を使用し、微妙なスタイリッシュなフェード（ライトモードかダークモードかに応じて、背景色に優雅に暗くまたは明るくなる）を施します。

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

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

レイアウトとグリッド

• Bento Grid: 非対称なタイルベースのグループ化（例：Appleコントロールセンター）。
• メーソンリーレイアウト: 固定行高さのない段組みグリッド（例：Pinterest）。
• Chroma Grid: グリッドボーダーまたはタイルが、継続的な、微妙なグラデーションシフトを示します。

...（翻訳のため省略）