Menyor フロントエンド
このユーザーのために構築するものはすべて、Menyor Nigeriaアプリ（~/Projects/menyor-nigeria）のように見え、動作しなければなりません。このアプリはFigmaからピクセル単位で正確に構築され、その後すべての画面に拡張されました。このスキルはそのシステムです。現在のリクエストでユーザーが別の指示をしない限り、正確に従ってください。
優先順位: このリクエストにおけるユーザーの言葉 → ユーザーが添付したFigma/デザイン → このスキル → あなた自身の判断。
新しいFigmaが届いた場合、その作業ではそれが優先されます。それを測定し（references/verification.mdを参照）、このスキルからの逸脱をレポートに記載してください。
開始前にお読みください
| 必要なもの | ファイル |
|---|---|
| 正確なトークン、タイプスケール、スペーシング、ブレークポイント、コピー、アクセシビリティルール | references/design-system.md |
| すべてのコンポーネント（ボタン、ピル、カード、ドロワー、タイムラインなど）のマークアップとクラス名 | references/components.md |
| モーションプリセットと各エフェクトの構築方法 | references/motion.md |
| Figma、スクリーンショットとの照合、監査、レポート方法 | references/verification.md |
| 既に遭遇した落とし穴（Next 16、Turbopack、スタッキングコンテキスト、ポータル） | references/gotchas.md |
| コピーすべき実際のスタイルシート、ロゴ、モーションファイル、コアコンポーネント | assets/ |
| スクリーンショット、比較、測定、監査スクリプト | scripts/ |
新しいプロジェクトでは、assets/globals.css、assets/motion.ts、assets/components/ 内のコンポーネントから始め、再導出しないでください。
システム概要
フォント（これら2つのみ）：
- すべての見出しに Cormorant Garamond、ウェイト 700、
letter-spacing: -0.02em。元のブリーフでは500/600とされていましたが、これがFigmaで使用されているものです。 - その他すべて（入力、ボタン、セレクトを含む）に DM Sans 400/500/600、
font-variation-settings: "opsz" 33を設定し、Figmaのよりタイトなカットに合わせます。 - 両方とも
next/font/google、display: 'swap'で読み込み、プリロードします。 - ロゴはSVGであり、フォントではありません。
カラー（これらのみ）：
| トークン | Hex | 使用箇所 |
|---|---|---|
--brand-blue | #006BA6 | ボタン、リンク、見出し、青色バンド、フッター |
--brand-blue-hover | #005A8C | ホバー |
--brand-blue-tint | #E6F0F6 | バッジ、選択行 |
--bg | #EBEAEA | ページ、カード内の行 |
--surface | #FFFFFF | カード、入力、ドロワー |
--ink | #111111 | テキスト |
--ink-muted | #5F6368 | キャプション、ヘルパーテキスト |
--success | #1E8E3E | アイコンと「Confirmed」ドットのみ、本文テキストには使用不可（白色上でコントラスト比4.2:1） |
--error | #C62828 | エラー |
--on-blue | #FFFFFF | 青色上のテキスト；区切り線は60%不透明度 |
Hex値は :root と BRAND.colors 設定（メールとPDFが読み取る）にのみ存在します。
区切り線とスクリムは color-mix(in srgb, var(--ink) 12%, transparent) で導出します。
形状：
- すべてのボタン、タブ、入力、セレクト、検索ボックス、トリップコントロールは ピル 形状です。
- 大きなカードは48pxの半径、カードは24px、画像は24px、行は16pxです。
- アウトラインコントロールと入力は 1pxの青色ボーダー を持ちます。
- カードにボーダーはなく、シャドウもありません。
- 階層はグレーと白のサーフェスで表現します。
タイプスケール（デスクトップ → スマートフォン）：
| 要素 | サイズ |
|---|---|
| ヒーロー | 110px / 112px line height → 48px |
セクションおよびページ見出し（.display） | 64px / 1.22 → 40px |
| カードタイトル | 30px |
| リスト行 | 24px |
| 本文 | 16px |
| ヘルパーテキスト | 14px |
| バッジ | 13px |
| 価格 | 22px、ウェイト600、tabular figures |
| アイブロウ | DM Sans 16px、大文字、青色 |
レイアウト：
- コンテナ最大幅1480px、ガター40px（スマートフォンでは24px）。
- ヘッダー96px（スマートフォンでは72px）、グレーページ上でsticky、スクロール時に1pxの区切り線を表示。
- セクション間隔はデスクトップで約160px、スマートフォンで80px。
- ブレークポイント：1360（コンパクトトリップピル）、1180（ナビゲーションがメニューに変化）、960（1カラム）、640（スマートフォン）。
コピー：
- 表示見出しはタイトルケース（「Everything For Your Trip, In One Place」）。
- UIテキストはセンテンスケース（「Add to my trip」）。
- すべてのコピーは
src/content/*.tsに配置。コンポーネント内に文字列をハードコードしないでください。 - ブランド値（メール、電話、WhatsApp、法人名、ソーシャル）は
BRANDから取得。 - 価格は常に通貨ヘルパー（デフォルトNGN、記憶される）を通してください。
- レビュー、評価、統計、連絡先詳細を創作しないでください。
- プレースホルダーは常に
[BRACKETED]のまま表示してください。
譲れないルール
- 上記の2つのフォントとカラーのみを使用すること。 新しい画面ごとに
scripts/audits.mjs（paletteAudit）を実行してください。 - シャドウ、カードのボーダー、グラデーションは禁止。 唯一の例外は微妙な写真グラデーションで、テキストに必要な場合のみ。
- すべてのコントロールは、1pxの青色アウトラインまたはソリッドブルーの塗りつぶしのピル形状。 フォーカス時は2pxの白 + 2pxの青いリングを表示。
- 共有のモーションプリセットファイルを1つ使用。
transformとopacityのみアニメーション；FAQと予約カードの高さは意図的な例外。prefers-reduced-motionはすべてのアニメーションを無効にし、コンテンツを一度に表示。 - デフォルトでアクセシブル：
- WCAG AAコントラスト。
- ラベル付きコントロール。
- ドロワーとモーダルはフォーカストラップ、Escapeで閉じる、開いたボタンにフォーカスを戻す、
document.body上のポータルでレンダリング。 - トグルは
aria-pressed、ピル選択はrole="radio"とaria-checkedを使用。 - 視覚のみのプレースホルダーは
aria-hidden。
- コピーはコンテンツファイルに、ブランド値は
BRANDから取得。 画像には適切なaltテキストが必要で、そのパスはコンテンツファイルに記述。 - 390、768、1440pxでレスポンシブ、横スクロールなし：
- スマートフォンではスナップカルーセル（次のカードが一部見える）。
- フィルターと予約フォームはボトムシートに移動。
- メインアクションはスティッキーな下部バーに配置。
- ドロワーはボトムシートになる。
- レポート前に検証：
- 1440pxと390pxでスクリーンショットを撮影。
- デザインと比較し、並べて確認。
- パレット監査、コントラスト監査、axeを実行。
- プロダクションビルドでLighthouseモバイルを実行：Performance 85以上、Accessibility 95以上、CLS 0。
- 差異を正直にレポート。
新しい画面の構築手順
- まずコピーをコンテンツファイルに配置。
references/components.mdの既存コンポーネントから構成。- 典型的な構造：中央揃えの
page-head（アイブロウ +.display行 + イントロ）、その後にグレーのページ上に白いlarge-card/step-card/checkout-cardブロック。 - リストは白いカード内のグレーの
update-row/listing-row行に配置。
- 典型的な構造：中央揃えの
- 既存コンポーネントで対応できない場合のみ、トークンから構築した新しいクラスを
globals.cssの適切なセクションに追加。Tailwindやインラインカラーは使用禁止。 - モーションプリセット（
Reveal、SectionHeading行の立ち上がり、ホバー時のリフト）を適用。 - 検証（
references/verification.md）後、スクリーンショット付きでレポート。