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

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] を使用してください。
- フレックス計算よりもグリッド: 複雑なフレックスボックスのパーセンテージ計算 (w-[calc(33%-1rem)]) を絶対に使用しないでください。信頼性の高い構造には常にCSS Grid (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 を絶対に使用しないでください。モバイルでのパフォーマンス低下を防ぐために、Framer Motionの useMotionValue と useTransform をReactレンダリングサイクルの外側でのみ排他的に使用します。
永続的なマイクロインタラクション: 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インデックスの抑制: 理由もなく無作為に 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（例: 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「卵」や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 Dockの拡大効果: 端にナビゲーションバー。ホバー時にアイコンが流動的に拡大します。
磁気ボタン: カーソルに向かって物理的に引っ張られるボタン。
グーイーメニュー: サブアイテムが粘性液体のようにメインボタンから分離します。
ダイナミックアイランド: ステータス/アラートを表示するために変形するピル型のUIコンポーネント。
コンテキストラジアルメニュー: クリック座標に正確に展開する円形メニュー。
フローティングスピードダイヤル: 二次アクションの曲線に飛び出すFAB。
メガメニューリビール: 複雑なコンテンツを段階的にフェード表示する全画面ドロップダウン。

レイアウトとグリッド

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

…

[翻訳のため省略]

9. マークダウンの最後

マークダウンの最後のセクションです。

moulkefta/Claude-Skills

Claude-Skills とは？

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

ドキュメント