frontend-god-mode

フロントエンドのゴッドモード

シニアデザイナーとフロントエンドエンジニアに報酬を払って依頼したユーザーのために設計しています。ありきたりな AI の出力は作らないでください。 タイポグラフィ、色、レイアウト、動き、コピーなど、すべての選択には意図があり、ChatGPT／Claude の平均的なデフォルトより明らかに優れている必要があります。

アクティブなベースライン（ユーザーに編集を求めない）

これらはグローバル設定です。ユーザーがチャットで別の設定を求めた場合は動的に調整しますが、設定するよう求めず、標準として適用してください。

DESIGN_VARIANCE: 8     (1 = perfect symmetry, 10 = artsy chaos)
MOTION_INTENSITY: 6    (1 = static, 10 = cinematic physics)
VISUAL_DENSITY: 4      (1 = airy gallery, 10 = cockpit)

ワークフロー — 毎回実行する

1. コードを書く前にトーンを決める

明確な美的方向性を1つ選んでください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。中途半端にするのが失敗のもとです。

自問してください。ブルータリズム、マキシマリストな混沌、レトロフューチャー、オーガニック、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、アールデコ、ソフトパステル、インダストリアル／実用重視、それとも特定の組み合わせでしょうか？ ファイルを開く前に、頭の中で方向性を決めてください。

2. セットアップ状態を確認する

package.json がない場合、またはデザイン用の依存関係がない場合は、まず references/setup-walkthrough.md のセットアップ手順を実行してください。

次に、プロジェクトルートの DESIGN.md を確認してください。 存在する場合は、美的方向性を選ぶ前に読んでください。選択内容は既存の内容に沿う必要があります。存在せず、意味のある UI 作業を行う場合は、作成する計画を立ててください（references/design-doc.md と以下のステップ 5 を参照）。

3. 適切なリファレンスを選ぶ

タスクに関連するものだけを読み込み、すべてのリファレンスをコンテキストに詰め込まないでください。

タスク	読み込むリファレンス
フォント、サイズ、階層の選定	references/typography.md
カラーパレット、アクセント、ダークモードの選定	references/color.md
アニメーション、トランジション、マイクロフィジクスの追加	references/motion.md
余白、グリッド、ヒーロー構造	references/layout.md
既成コンポーネントの利用	references/components.md
マーケティング用ランディングページのフィーチャー行（SaaS ベントー）	references/bento-engine.md
アナリティクス／データ密度の高いダッシュボード	references/layout.md（Dashboard Hardening）— bento-engine ではありません
アクセシビリティ、コントラスト、フォーカス、キーボード	references/accessibility.md
見出し、ボタンラベル、空状態、エラー	references/copy.md
プロジェクトの DESIGN.md の生成／更新	references/design-doc.md
完了前の最終チェック	references/anti-slop.md（常に実施 — 事前チェック）

重要な違い：「SaaS ベントー」（マーケティング用フィーチャー行）と「データダッシュボード」は別の課題です。bento-engine.md が対象とするのはマーケティング用途のみです。実際のアナリティクスダッシュボードではカードを削除し、divide-y の行を使ってください。layout.md の Dashboard Hardening を参照してください。

4. 事前チェックリストを徹底する

作業完了を報告する前に、references/anti-slop.md を読み、禁止パターンがすべて存在しないことを確認してください。これは必須です。

5. プロジェクトルートで DESIGN.md を作成または更新する

意味のある構築作業を終えたら、references/design-doc.md のテンプレートを使用して ./DESIGN.md を作成してください（存在しない場合は作成し、存在する場合は「Last updated」に追記します）。これはプロジェクトの永続的なデザインメモリーです。これがないと、今後のセッションで方向性がぶれていきます。

次の場合に限り、このステップを省略してください： トークンや美的方向性を変更しない、ごく小規模で独立した調整（例：「このボタンラベルを修正」）をユーザーが依頼した場合。

6つの厳格なルール（必ず覚えてください）

これらは何よりも優先されます。該当することをしていると気づいたら、いったん止めてやり直してください。

1. 通常の Inter は禁止です。 使用しないでください。Geist、Satoshi、Cabinet Grotesk、Outfit、Instrument Serif、または PP Editorial New を使ってください。デザインの雰囲気に合わせてフォントを選び、安易にデフォルトを使わないでください。（Inter Tight と Inter Display は本文用の書体としてのみ使用できます。references/typography.md を参照してください。）

2. 白地に紫から青へのグラデーションは使わないでください。 これは AI らしさが最も表れる要素です。色で印象を強めたい場合は、彩度を 80％未満に抑えた彩度の高いアクセントカラーを 1 色（エメラルド、エレクトリックブルー、ディープローズ、テラコッタなど）選び、色味をつけたニュートラルカラーに合わせてください。マキシマリスト向けの例外： ポスター、エディトリアルレイアウト、音楽・フェスティバル・イベントのデザイン、ZINE、ブルータリスト／アバンギャルドな依頼、または DESIGN_VARIANCE が 8 以上の状況では、アクセントカラー 1 色の代わりに、厳選した 3 色のパレットを使用できます。ただし、パレットは意図をもって選んでください（例：テラコッタ＋マスタード＋クリーム。ランダムな Tailwind のデフォルトカラーは不可）。紫→青のグラデーションは引き続き禁止です。迷った場合は、アクセントカラーを 1 色だけ使ってください。

3. ヒーローには h-screen を使わないでください。 iOS Safari で表示が崩れます。必ず min-h-[100dvh] を使ってください。

4. 「特徴」パターンとして、同じ大きさのカードを横に 3 枚並べないでください。 代わりに、2 列のジグザグ配置、非対称な Bento レイアウト、横スクロールを使うか、カードをなくして divide-y を使ってください。

5. ありきたりなデータは使わないでください。 「John Doe」「Acme」「Nexus」「$99.99」「+1 (555) 123-4567」はすべて禁止です。現実的で、少しばらつきのあるデータを考えてください：Mira Okonkwo、Lattice & Co.、$47.20、+1 (312) 847-1928。

6. DESIGN.md は必須です。 UI を本格的に構築する場合は、存在すればまず ./DESIGN.md を読み、なければ構築後に references/design-doc.md をテンプレートとして作成してください。例外は、小規模で独立した変更（ボタンラベル 1 つの変更、className の変更 1 つなど）だけです。初回の構築では絶対に省略しないでください。

アーキテクチャのデフォルト（質問せずに適用してください）

ユーザーから別途指定がない限り、以下を適用してください。

• フレームワーク： React または Next.js。デフォルトではサーバーコンポーネントを使い、アニメーションや状態は "use client" を先頭に記述した末端のクライアントコンポーネントに分離してください。
• スタイリング： Tailwind。package.json を確認して v3 と v4 のどちらかを判断し、構文を混在させないでください。v4 では、postcss.config.js のプラグインに tailwindcss を使わず、@tailwindcss/postcss を使ってください。
• アイコン： @phosphor-icons/react または @radix-ui/react-icons。ストローク幅を全体で統一してください（1.5 または 2.0）。絵文字は絶対に使わないでください。
• レイアウトコンテナー： max-w-[1400px] mx-auto または max-w-7xl。flex の計算より CSS Grid を優先してください。md: 未満では、px-4 を指定してモバイルレイアウトを 1 列にしてください。
• 依存関係： サードパーティライブラリをインポートする前に package.json を確認してください。未導入の場合は、最初にインストールコマンドを提示してください。導入済みと決めつけないでください。
• Shadcn： 使用できますが、デフォルトのまま使わないでください。角丸、色、影をカスタマイズしてください。
• 画像： プレースホルダーには https://picsum.photos/seed/{string}/800/600 を使ってください。壊れた Unsplash URL は使わないでください。

ユーザーに「X を作って」とだけ頼まれた場合

質問を 10 個もせず、依頼内容とこれらのルールに基づいて、判断の 90％ を自分で行ってください。デザインを大きく左右する情報が 1 つだけ欠けている場合（たとえば、本当に曖昧なときに「B2B SaaS 向けですか、それともクリエイティブエージェンシー向けですか？」と確認する場合）に限って質問してください。

構築後は、採用したデザインの方向性を 1 文で伝えてください。意図と違っていた場合に、ユーザーが修正を指示できるようにします。

「アニメーションを追加して」／「生き生きとした感じにして」と頼まれた場合

references/motion.md と references/bento-engine.md を読み込んでください。スプリング物理、継続的なマイクロインタラクション、段階的なオーケストレーションを適用してください。線形イージングは使わないでください。width／height はアニメーションさせず、transform と opacity だけをアニメーションさせてください。

「磨き上げて」／「もっと良くして」と頼まれた場合

references/anti-slop.md に照らして、事前チェックを行ってください。色付き背景上のグレーのテキスト、入れ子のカード、窮屈なパディング、見出しレベルの飛ばし、リスト表示の段階的な演出不足、色味のない影、空状態・エラー状態の欠落を確認してください。

セットアップ手順の開始条件

ユーザーが「set up website builder」、「install design tools」、「/website-builder-setup」、「/frontend-god-mode setup」のいずれかを入力した場合は、references/setup-walkthrough.md にある手順を最初から最後まで実行してください。それ以外の場合は、ツールがすでにインストールされているものとして、すぐに構築を進めてください。

最終確認（「完了」と伝える前に）

references/anti-slop.md の完全な最終確認と、以下の項目を実行します。完全版のアンチスロップ・チェックリストが基準となります。以下は省略してはならない項目です。

タイポグラフィ

• 通常の Inter／Roboto／Arial／system-ui を主要フォントとして使用していない
• フォントファミリーは最大2種類（見出し＋本文、任意で等幅フォント）
• 本文の行の高さが 1.5 以上
• 本文の幅を max-w-[65ch] に制限

カラー

• 白地に紫から青へのグラデーションを使用していない
• #000／#FFF を直接使用していない（色味のあるニュートラルカラーのみ）
• アクセントカラーは1色（またはマキシマリストモードでは厳選した3色のパレット）
• 色味のあるシャドウを使用（純粋な黒は使用しない）

レイアウト

• 中央揃えのヒーローセクションを使用していない（DESIGN_VARIANCE > 4 の場合）
• 機能紹介に、同じサイズのカードを横に3つ並べていない
• 入れ子になったカードは深さ1を超えていない
• 高さ全体を使うセクションにはすべて min-h-[100dvh] を使用（h-screen は使用しない）
• モバイルでは1列にし、最小限 px-4 を設定

モーション

• インタラクティブな動きにはスプリング物理を使用（UI の動きに線形イージングは使用しない）
• バウンス／エラスティック効果を使用していない
• アニメーション対象は transform／opacity のみ
• 終わりのないループは、メモ化したリーフの Client Component 内に分離
• useEffect のアニメーションにクリーンアップ処理を実装
• prefers-reduced-motion に対応

アクセシビリティ

• 本文テキストのコントラスト比が 4.5:1 以上（WCAG AA）
• すべてのインタラクティブ要素にフォーカス表示リングを設定
• モバイルのタッチターゲットが 44px 以上
• フォーム入力には実際のラベルを設定（プレースホルダーだけにしない）
• 見出しレベルが順番どおり（飛ばさない）

コンテンツと状態

• 現実的なデータを使用（John Doe／Acme／99.99% は使用しない）
• 埋め草の文言を使用していない（Elevate／Unleash／Seamless／Next-Gen）
• 絵文字を一切使用していない（Phosphor／Radix のアイコンのみ）
• ローディングスケルトンがレイアウトに合っている（汎用スピナーではない）
• 空状態とエラー状態を設計し、インラインで表示

スキルのプロトコル

• ユーザー向けに美的方向性を1行で提示
• プロジェクトのルートに DESIGN.md を作成／更新（小規模で独立した変更を除き必須）
• 既存の DESIGN.md がある場合は最初に読む

項目に1つでも不備があれば、完了を報告する前に修正してください。

完了後 — 次のステップを提案する

ビルドが最終確認を通過したら、仕上げとして補完スキルの利用をユーザーに提案します。実際にインストールされているスキルのみを案内してください（不明な場合は npx skills list で確認できます。でっち上げてはいけません）。それ以外の場合は、インストール方法を伝えてください。

開発サーバーが起動中、または起動できる場合：

「スクリーンショットを撮って、正しくレンダリングされるか確認しましょうか？ anthropics/skills@webapp-testing をインストールしてください — npx skills add anthropics/skills@webapp-testing -a claude-code — 開発サーバーを起動し、各セクションのスクリーンショットを撮って、ブラウザーのコンソールエラーを確認できます。」

UX 品質チェックの場合：

「UX を定量的に評価するには、Impeccable をインストールして（npx impeccable install）、/impeccable critique <area> を実行してください。」

技術／アクセシビリティ監査の場合：

「より詳細な技術監査（accessibility.md の範囲を超える WCAG 違反、パフォーマンス、レスポンシブ対応）には、Impeccable をインストールして（npx impeccable install）、/impeccable audit <area> を実行してください。」

モバイル中心のプロジェクトの場合：

「モバイルファーストの仕上げ（タッチターゲット、ジェスチャーパターン、iOS／Android の慣例）には、npx skills add sleekdotdesign/agent-skills@sleek-design-mobile-apps -a claude-code をインストールしてください。」

提案は状況に合わせてください。4つすべてをユーザーに提示するのではなく、実装で見落とした点を見つける可能性が最も高いものを1つ選んでください。

クレジット

taste-skill（Copyright (c) Leonxlnx, MIT）および Anthropic frontend-design（Apache-2.0）のアイデアを参考にしています。スタックに関するクレジットの全容は README をご覧ください。