B16 沈浸式前端
打造圍繞一個可辯護視覺概念的難忘體驗。此技能輔助更廣泛的專案工作流程；不取代治理、規劃、建構、驗證或審查技能，亦不宣稱能複製 B16 Dev OS。
確立簡報
在提問前消化所有可用的背景資訊。僅在有證據支持時推斷事實，引用來源或標註推斷，且只詢問那些可能實質改變方向的信息缺口。當方向尚未核准時，使用 briefing.md。
在實作之前，提出一個精簡的方向，涵蓋視覺論點、內容層級、英雄區塊焦點、字體排版、色板、佈局節奏、動態敘事、可能的技術棧、效能預算、備用方案、素材來源以及排除項目。取得此方向的核准。不要將概念核准視為部署、購買、帳戶、代幣或無關系統變更的許可。
有目的地設計
- 從行動裝置優先開始，然後針對較大視口擴展構圖與編排。
- 將品牌識別根植於主題、受眾、素材、語言和真實內容。避免通用的元件工具箱外觀。
- 將視覺大膽度集中在一個令人難忘的地方，並保持輔助系統嚴謹。
- 使用主動語態撰寫人性化且技術準確的文案。採用句子大小寫，不使用破折號。絕不編造證明、合作夥伴、推薦、指標或能力。
- 每個專案使用一個連貫的圖示家族，根據技術棧契合度、品牌識別、覆蓋範圍、授權、成本、維護、無障礙和檔案大小來選擇。使用官方或授權的品牌標誌。在技術棧支援的情況下，導入個別圖示並進行真正的 tree shaking。
- 確保每個主要操作在無懸停狀態下仍可操作。在相關處指定觸控、鍵盤、焦點、啟用、載入、禁用、錯誤和空狀態。
選擇最小的足夠技術棧
當考慮動畫、2D 畫布或 3D 時，閱讀 stack-selection.md。除非有正當理由且經核准，否則保留現有技術棧。
不要為了單一效果而在 WordPress 中加入 React。不要將任何函式庫設為所有網站的必備。不要僅僅因為某個依賴出現在計畫中就安裝它。對於簡單的轉場偏好使用 CSS 和平台 API；對於元件編排使用 Motion；對於有意的時間軸或滾動序列使用 GSAP 搭配 ScrollTrigger；對於需求較高的 2D 場景使用 PixiJS；對於直接 WebGL 使用 Three.js；而當 React 已存在且宣告式場景組合有益時，使用 React Three Fiber 搭配選擇性的 drei 輔助工具。Lenis 是可選的，絕非自動。
僅將 ReactBits 和 Codrops 作為選擇性參考。在重複使用前確認程式碼和素材的授權與來源。偏好原創整合；對於任何授權摘錄保留必要的聲明。
在建構前指定動畫
對於每個有意義的動畫，記錄：
- 目的：它解釋、優先處理、確認或使空間可理解的是什麼。
- 觸發條件：載入、進入、點擊、狀態變更、指標、滾動或媒體進度。
- 持續時間與緩動函數：包含重複和中斷的限制。
- 行動裝置行為：針對視口、粗略指標、觸控、電池和裝置能力所做的變更。
- 備用方案：針對減少動畫、JavaScript 不可用、媒體載入失敗、WebGL 遺失或硬體受限時的最終靜態狀態。
避免僅靠懸停傳達意義以及持續的裝飾性動畫。導航、主要訊息和 Call-to-Action 必須在動畫完成前可運作。在 prefers-reduced-motion: reduce 下，渲染穩定的最終狀態，並移除擦除、視差、自動播放或平滑滾動行為，而非僅縮短它們。
預算效能
在實作前為專案設定可衡量的預算。考慮初始 JavaScript、媒體大小、字型數量、動畫並發、長任務、佈局位移、最大內容繪製時間、畫面穩定性、GPU 記憶體、裝置像素比和熱成本。
對於畫布或 WebGL，提供靜態海報；限制像素比；在離屏或隱藏時暫停；避免每幀分配記憶體；在小型或受限裝置上減少運算負載；處理上下文失敗；並釋放影格、觀察者、監聽器、紋理、幾何體、材質、渲染目標和渲染器狀態。語義內容和控件必須保留在畫布之外或獨立於畫布。
按比例實作
保留已核准的方向和現有專案慣例。保持語義 HTML 和真實內容為真理來源。僅在能增加價值處載入重量級體驗。限制效果範圍，使多個系統不會控制同一個屬性。最多使用一個平滑滾動引擎，且僅在其價值超過複雜度時使用。
在計畫核准前，不要安裝函式庫、修改專案或進行實作。當實作獲得授權時，在進行任何技術棧或素材新增前先說明理由，並尊重專案的套件管理器和鎖定檔。
誠實驗證
對於實作或審查工作，使用 verification.md。檢查行動裝置和桌面的螢幕截圖、互動狀態、觸控、鍵盤、焦點、減少動畫、靜態備用方案、載入與失敗行為、效能證據，以及與變更規模相稱的清理行為。
報告確切執行、通過、目視檢查以及仍待驗證的項目。從不暗示未執行的建置、瀏覽器測試、無障礙檢查、裝置測試或效能測量已經執行。
參考來源
本指南為原創整合。請查閱 sources.md 以取得權威文件及明確標示的社群靈感。請勿透過此技能安裝或執行第三方技能程式碼。