Modern Frontend — パックルーター
このパックには6つのディレクションが含まれています。それぞれは同じクラフトレベル（Emil Kowalskiアニメーションカノン＋スロップフィルター）を基盤としていますが、異なるデザインの問いに答えます。ルーターの役割は、適切なディレクションを迅速に選択し、その後は邪魔をしないことです。
このパックのアイデンティティは「一般的なセンス」ではありません。具体的には、Louis Paquet / Locomotiveの作品に見られるシネマティックな自信と、Emil Kowalskiの目に見えないクラフトです。各ディレクションは、その軸に沿ってキュレーションされています。このパックから構築されたページは、ディレクション（Louis Paquet）とクラフト（Emil Kowalski）を同時に感じさせるものにします。
6つのディレクション
| ディレクション | 答えを出す問い |
|---|---|
cinematic-scroll | 「どのようにして製品をページの物語にするか？」 |
motion-bento | 「マーケティングコンテキストで、動作する製品表面をどのように見せるか？」 |
publication | 「ページをデザインされた記事のように読ませるには？」 |
nightside | 「このブランドを夜間の洗練された、派手ではない雰囲気にするには？」 |
modernist-grid | 「タイポグラフィとグリッドにすべての仕事を任せるには？」 |
considered-modern | 「これを温かみとプロフェッショナルさを感じさせ、コールドスタートアップには見せないには？」 |
ディレクションは選択されるものであり、交渉されるものではありません。ユーザーが明示的に要求しない限り、パックはハイブリッドな出力を生成しません。
ディレクションの選択
ルーターは以下の順序で決定します:
- 明示的な名前指定。 ユーザーが
cinematic-scroll、motion-bento、publication、nightside、modernist-grid、considered-modernと入力した場合、そのディレクションにルーティングします。類似した言い回しも受け付けます — 以下の§ エイリアスを参照。 - フレーズシグナル。 ユーザーが§ フレーズルーティングにリストされている強いシグナルのフレーズを使用した場合、一致したディレクションにルーティングします。
- ブリーフの推論。 ブリーフ（製品、オーディエンス、ムード、密度、エネルギー）を読み取り、§ 推論ルールを使用して最も強い適合を選びます。
ルーターはユーザーにメニューから選ばせたりしません。ルーターが選択し、その選択を出力の上部で一文で説明します（「nightside にします — ブランドはスタートアップのツヤよりも夜の自信を求めています」）。
エイリアス
cinematic、cinematic product、scrolltell、product launch、immersive→cinematic-scrollbento、premium bento、motion engine、SaaS feature grid、archetype bento→motion-bentoeditorial、editorial premium、magazine、publication、design journal→publicationdark luxe、dark luxury、moody premium、late night UI、after hours→nightsideswiss、swiss system、swiss design、modernist、grid system、typographic poster→modernist-gridwarm modern、humane modern、studio site、professional services→considered-modern
フレーズルーティング（明示的な名前がない場合）
- 「プロダクトローンチ」/「ハードウェア」/「スクロール駆動」/「映画のような」 →
cinematic-scroll - 「SaaSランディング」/「機能セクション」/「AIプロダクトページ」/「bento」 →
motion-bento - 「雑誌」/「画像主導」/「パブリケーション」/「デザインスタジオ」 →
publication - 「ダーク」+「プレミアム」/「レストラン」/「ホスピタリティ」/「エクスクルーシブ」 →
nightside - 「合理的」/「グリッド」/「スイス」/「タイポグラフィックポスター」/「インスティテューショナル」 →
modernist-grid - 「プロフェッショナルサービス」/「エージェンシーサイト」/「ウォーム」/「コンサルタンシー」/「スタジオ」 →
considered-modern
推論ルール（ブリーフが曖昧な場合）
- 強い物語の弧 + 製品が主人公 →
cinematic-scroll - 製品が何をするかをミニチュアサーフェスで見せる →
motion-bento - タイポグラフィ主導 + キュレーションされた画像シーケンス →
publication - ムード主導 + 深いネガティブスペース →
nightside - グリッド主導 + 構造的な色使い →
modernist-grid - スタジオの声 + 実際の写真 →
considered-modern
2つのディレクションが競合しているように見える場合は、ブランドの自信により合致する方を選びます。プレミアムウォッチブランドはおそらく nightside を望み、motion-bento は望みません。B2Bオブザーバビリティツールは motion-bento を望み、cinematic-scroll は望みません。
パックの2層モデル
すべての出力は、以下の順序で適用される2つの層の結果です:
レイヤー1 — ディレクション
選択されたスタイルフォルダの skill.md がデザインブリーフとなります。以下を定義します:
- このディレクションのダイヤル調整（バリエーション/モーション/密度のベースライン）。
- このディレクションを特徴づける3つのシグネチャームーブ。
- 素材: タイポグラフィ、カラー、レイアウト、サーフェス処理。
- このディレクションに適したモーションコレオグラフィ。
- 間違ったスタイルを示す兆候（このディレクションに固有のスロップシグナル）。
- トーン調整のためのリファレンスアーティファクト。
レイヤー2 — クラフトカノン（共通）
2つのファイルがディレクションに関係なくすべての出力に適用されます。エージェントはディレクションを選択した後にこれらを読み込みます:
references/animation.md— Emil Kowalskiアニメーションカノン。決定フレームワーク（easing優先、ユーザビリティフレーム、頻度、目的、持続時間）、イージングカーブ、クラフトチェックリスト（ボタンプレス、ポップアップトリガー発原点、scale(0.95)エントリー、非対称タイミング、ジェスチャーベロシティ）、どのルールがEmilから直接来ているか、どのルールがスキル調整されたものかに関する来歴メモ。references/forbidden.md— スロップフィルター。ビジュアル/タイポグラフィ/レイアウト/コンテンツ/コンポーネント/React-Framerアンチパターン + 出力前に必ずパスしなければならないプレフライトチェックリスト。
これらが、パックがクラフトレベルで「プレミアム」を定義する方法です。modernist-grid のボタンも :active で押し込みます。publication のポップアップもトリガーからスケールします。禁止パターンは6つのディレクションすべてに等しく適用されます。
コンポーネントナレッジ — ファイルを開く
ディレクションを選択した後、エージェントは共有のコンポーネントライブラリ調査を参照します:
components/style-recipes.md— 各ディレクションを、各ライブラリの特定のパターン（どのGSAPデモ、どのFramerプリミティブ、どのAceternityレシピ、どの21st.devコンポーネント）にマッピングします。最初にこれを開きます。components/gsap-patterns.md— シネマティックディレクションのためのGSAP + ScrollTrigger + Lenisレシピ。components/motion-libraries.md— Framer Motionパターン、React Bitsメモ、Aceternity UIメモ（注意深く適用した場合）。components/component-libraries.md— 21st.devプリミティブ、shadcnカスタマイズルール、Radixポップアップ発原点の強制。
これらはテンプレートではなく調査として使用します。そのまま貼り付けられたものはすべてキットとして読まれます。選択したディレクションに合わせてカスタマイズしてください。
パック全体の安全ルール — 無条件に適用
これらはディレクションやブリーフに依存しません。すべての出力に適用されます。
- 絵文字禁止。 コード、マークアップ、コンテンツ、altテキストを含む、どこにも使用しないでください。代わりにPhosphorまたはRadixアイコンを使用します。
- 依存関係の検証。
framer-motion、lucide-react、@phosphor-icons/react、@radix-ui/react-icons、zustandなどをインポートする前に、package.jsonを確認してください。不足している場合は、最初にインストールコマンドを出力します。 - Tailwindバージョンロック。
package.jsonでv3とv4を確認します。 - ビューポートの安定性。
h-screenは絶対に使用しないでください。フルビューポートサーフェスには常にmin-h-[100dvh]を使用します。 - アイコンファミリーロック。 PhosphorまたはRadixのいずれか、両方は使用しません。ストロークウェイトは1.5または2.0。
Inter、Roboto、またはシステムサンセリフをアイデンティティとして使用禁止。- 純粋な
#000000は禁止。 調整されたオフブラックを使用します。 - ライラ禁止。 紫や青のAIグラデーショングローは禁止。
scale(0)エントリー禁止。 常にscale(0.95)+opacity: 0を使用します。- UIに
ease-inは禁止。 カスタムcubic-bezierで常にease-outを使用します。
品質基準
ディレクションに関係なく、すべての出力はこの基準をクリアしなければなりません:
- 任意のセクションをスクリーンショットで切り取っても、意図的であると読めること。
- ロゴを削除しても、依然として具体的に感じられること。別のブランドが緊張なく入れ替えられる場合、その作業は失敗です。
- 画像が役立つ場合、ヒーローまたは最初の2つのセクションに実際のビジュアルメディア（写真、レンダリング、イラスト）が含まれていること。
- 「ビジュアルメディア」をグラデーション/パーティクル/シェーダーではなく、実際の画像として扱うこと。
- そのディレクションのペースに合ったインタラクション状態（ローディング、空、エラー、ホバー、フォーカス、アクティブ）を含むこと。
- 完了と宣言する前に、
references/forbidden.mdのプレフライトをパスすること。
ブリーフが広範な場合
ルーターは最も強い妥当なディレクションを選び、コミットします。曖昧にすることはありません。
ブリーフが2つのディレクションの間で曖昧な場合、ブランドの自信をよりよく保つ方に決定します。ハンドクラフトブランドは motion-bento よりも cinematic-scroll または nightside に進みます。B2Bプラットフォームは publication よりも motion-bento または modernist-grid に進みます。
ブリーフがどのディレクションにもうまく当てはまらないほど広範な場合、それ自体がシグナルです。ブリーフはコード化する前に絞り込む必要があります。明確化の質問を1つし、その後コミットします。
パックの例 — コピー用ではなくトーン用
2つのリファレンスアーティファクトが examples/ にあります:
examples/cinematic-landing.html— Maris & Co.、1947年創業のニューポートセールメーカー。cinematic-scrollページを最初から最後まで: 非対称マストヘッド、スティッキーレター、インベントリbento、ディープネイビーの引用、マグネティックCTA、コロフォンフッター、3幕構成のペース配分。examples/bento-saas.tsx— Morse、ゲームスタジオ向けサウンドデザインライブラリワークフロー。5つのアーキタイプすべてが配線されたmotion-bentoページ。
これらはトーン調整のために読んでください。文字通りコピーしないでください。すべてのページは独自の世界を創造しなければなりません。