Menyor/menyor-frontend-skill

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、堆疊上下文、Portal）	references/gotchas.md
真實樣式表、標誌、動畫檔案與核心元件，可直接複製	assets/
截圖、並排比較、測量與稽核腳本	scripts/

對於新專案，請從 assets/globals.css、assets/motion.ts 以及 assets/components/ 中的元件開始， 而不是重新推導它們。

系統一覽

字型（僅此兩種）：

• Cormorant Garamond 供所有標題使用，粗細 700，搭配 letter-spacing: -0.02em。這是 Figma 使用的設定，儘管原始簡報提到 500/600。
• DM Sans 粗細 400/500/600 供所有其他內容使用，包括輸入框、按鈕與選擇器，搭配 font-variation-settings: "opsz" 33 以符合 Figma 更緊湊的字體風格。
• 使用 next/font/google 載入兩者，display: 'swap'，並預先載入。
• 標誌是 SVG，絕非字型。

顏色（僅這些）：

代碼	十六進位色碼	用途
--brand-blue	#006BA6	按鈕、連結、標題、藍色橫幅、頁尾
--brand-blue-hover	#005A8C	懸停狀態
--brand-blue-tint	#E6F0F6	徽章、選中行
--bg	#EBEAEA	頁面、卡片內行
--surface	#FFFFFF	卡片、輸入框、抽屜
--ink	#111111	文字
--ink-muted	#5F6368	標題、輔助文字
--success	#1E8E3E	僅限圖示和「已確認」圓點，絕不用於主體文字（其在白色背景上的對比度為 4.2:1）
--error	#C62828	錯誤
--on-blue	#FFFFFF	藍色背景上的文字；分隔線透明度 60%

十六進位色碼僅存在於 :root 和 BRAND.colors 設定中（電子郵件和 PDF 從該處讀取）。 分隔線與遮罩使用 color-mix(in srgb, var(--ink) 12%, transparent) 衍生。

形狀：

• 每個按鈕、分頁標籤、輸入框、選擇器、搜尋框和旅程控制項都是藥丸形狀。
• 大型卡片圓角半徑 48px，卡片 24px，圖片 24px，行 16px。
• 外框控制項與輸入框有 1px 藍色邊框。
• 卡片無邊框，且任何元素無陰影。
• 層次結構來自灰色與白色背景的對比。

字型比例（桌面 → 手機）：

元素	尺寸
主視覺	110px / 112px 行高 → 48px
章節與頁面標題（.display）	64px / 1.22 → 40px
卡片標題	30px
列表行	24px
主體文字	16px
輔助文字	14px
徽章	13px
價格	22px，粗細 600，表格數字
眉毛文字	DM Sans 16px，大寫，藍色

佈局：

• 容器最大寬度 1480px，邊距 40px（手機上為 24px）。
• 頁首高度 96px（手機上為 72px），固定在灰色頁面上，並在滾動後顯示 1px 分隔線。
• 區塊間距約為桌面 160px，手機 80px。
• 斷點：1360（壓縮旅程藥丸）、1180（導航變成選單）、960（單欄）、640（手機）。

文案：

• 顯示標題使用標題大小寫（"Everything For Your Trip, In One Place"）。
• UI 文字使用句子大小寫（"Add to my trip"）。
• 所有文案存放於 src/content/*.ts。切勿在元件中硬編碼字串。
• 品牌值（電子郵件、電話、WhatsApp、法定名稱、社交媒體）來自 BRAND。
• 價格一律透過貨幣輔助函數處理（預設為 NGN，並記住用戶選擇）。
• 絕不虛構評論、評分、統計或聯絡資訊。
• 佔位符保持明顯的 [括號] 形式。

不可協商的事項

1. 僅使用上述兩種字型與顏色。 在每個新螢幕上執行 scripts/audits.mjs（paletteAudit）。
2. 無陰影、無卡片邊框、無漸層。 唯一的例外是微妙的照片漸層，且僅在文字需要時使用。
3. 每個控制項都是藥丸形狀，帶有 1px 藍色外框或實心藍色填充。 焦點狀態顯示 2px 白色 + 2px 藍色環。
4. 一個共用的動畫預設檔案。 僅動畫 transform 和 opacity；FAQ 與預訂卡片高度是刻意的例外。prefers-reduced-motion 會停用所有動畫並立即顯示內容。
5. 預設無障礙：
   • WCAG AA 對比度。
   • 已標籤的控制項。
   • 抽屜與模態框會鎖定焦點、按下 Escape 關閉、將焦點返回至開啟它們的按鈕，並在 document.body 的 portal 中渲染。
   • 切換開關使用 aria-pressed，藥丸選擇使用 role="radio" 搭配 aria-checked。
   • 視覺專用佔位符設定為 aria-hidden。
6. 文案存放在內容檔案中，品牌值來自 BRAND。 圖片需要有真實的替代文字，且其路徑存放在內容檔案中。
7. 在 390、768 和 1440px 下響應式運作，且無橫向滾動：
   • 手機獲得快照輪播，並可瞥見下一張卡片。
   • 篩選器和預訂表單移至底部工作表。
   • 主要操作按鈕置於黏性底部欄。
   • 抽屜變成底部工作表。
8. 報告前先驗證：
   • 在 1440 和 390 解析度下截圖。
   • 與設計稿並排比較。
   • 執行調色盤與對比度稽核以及 axe。
   • 在生產建置上執行 Lighthouse 行動版：效能至少 85，無障礙至少 95，CLS 為 0。
   • 誠實報告差異。

建構新螢幕：順序

1. 先將文案放入內容檔案。
2. 使用 references/components.md 中的現有元件組合它。
   • 典型結構：一個置中的 page-head（眉毛文字 + .display 行 + 介紹），然後在灰色頁面上放置白色 large-card/step-card/checkout-card 區塊。
   • 列表放在白色卡片內部的灰色 update-row/listing-row 行中。
3. 僅在無現成元件可用時，才在 globals.css 的正確區段新增類別，並從代碼建構。不使用 Tailwind 或內聯顏色。
4. 連接動畫預設（Reveal、SectionHeading 行升起、懸停上移）。
5. 驗證（references/verification.md），然後附上截圖報告。