產生專案框架
對目前專案的最佳頁面進行螢幕截圖，然後加上邊框。此技能負責探索、應用程式準備以及原始截圖品質；必需的子技能： generate-frame 負責加上邊框和封面。先執行它的步驟 1（定位並檢查 frame-kit），如果失敗則停止。<frame-kit> 是它解析出來的路徑。
輸出目錄，永不混合：原始 → ~/Pictures/<project>-portfolio/raw/，已加框 → ~/Pictures/<project>-portfolio/framed/。
1. 掃描
找出使用者面向的頁面：路由、頁面/檢視元件、管理資源（Filament、Nova…）、導航選單。閱讀程式碼以了解如何執行應用程式、存在哪些角色，以及每個角色可以看到哪些頁面。不要猜測連接埠、URL 或登入資訊；透過執行應用程式或詢問來驗證它們。
2. 提議最多 5 個
判斷這是哪一種產品，然後根據頁面能多好地展示其真正功能來排序。問題是：一張圖片要如何讓陌生人理解這個產品？
| 產品 | 最有力的頁面 |
|---|---|
| 商業/管理應用程式 (POS、CRM、庫存) | 包含真實資料列的核心工作流程，然後是儀表板，再來是資料豐富的列表 |
| 儀表板/分析 | 主儀表板、一個向下鑽取、一份報告 |
| 內容/行銷/電子商務網站 | 著陸頁/主視覺、列表頁、詳細頁、購物車或結帳頁 |
| 編輯器/建構工具/創意工具 | 包含內容的畫布，然後是圖庫或專案列表 |
| 開發者工具/文件 | 使用中的主要 UI、結果/輸出檢視 |
跳過登入、空白表單、設定、錯誤頁面以及近乎重複的頁面。少於 5 個也沒問題。列出每個頁面的名稱、路徑、角色以及一行理由。
3. 詢問
AskUserQuestion，多選（每個問題最多 4 個選項；如果需要則分成兩個問題）。在使用者做出選擇之前不得開始截圖。同時詢問：淺色或深色（僅當應用程式兩者都有時），以及要使用哪個角色/帳號。憑證來自使用者的環境或現有工作階段；絕不將它們寫入腳本、檔案或輸出中，也絕不繞過存取控制（所選角色看不到的頁面會被跳過，而不是強制截圖）。
4. 準備應用程式
- 如果應用程式未執行，則在空閒的連接埠上啟動它；記得停止你啟動的程式。
- 開啟已選擇的頁面。如果為空或包含佔位符資料 → 說明狀況並提供真實的示範資料。植入資料需要明確同意，會放入一個獨立或可丟棄的資料庫，未經同意絕不觸碰開發資料庫。偏好使用 UI 可以建立的狀態（例如將商品加入購物車）而非直接寫入資料庫。
- 不要在使用者的專案中新增依賴項目或檔案。腳本應存放在暫存區中。
5. 截圖
撰寫一個暫存區腳本，從 <this skill>/scripts/capture.mjs 匯入 capturePages：
import { capturePages } from '<this skill>/scripts/capture.mjs';
const results = await capturePages({
frameKit: '<frame-kit>', outDir: '<raw dir>', colorScheme: 'light', // 此批次的單一配色方案
storageState: process.env.APP_STORAGE_STATE, // 已儲存的工作階段；或 login: async (page) => {...} 讀取 process.env
setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')), // 應用程式本身的主題切換（如果有的話）
pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* 開啟購物車、關閉導覽… */ } }],
});
console.log(JSON.stringify(results, null, 2));
它會為整個批次使用一個 1440×900 @2x 的環境（PNG 為 2880×1800），等待網路閒置、字型及懶加載內容，並回報每個頁面的 issues：主控台/頁面錯誤、HTTP ≥ 400、重新導向（通常是缺少登入）、損壞的圖片、可見的旋轉圖示/骨架、覆蓋層/Cookie 橫幅、空白圖表容器。依照提議順序將檔案命名為 NN-<slug>.png。透過 loadingSelectors/overlaySelectors/hideCss（例如 toast、除錯列）傳遞應用程式本身的选择器。
互動式畫面（購物車、編輯器、看板）需要先在 prepare 中加入範例內容。
對於每個有問題的頁面：修復它（關閉覆蓋層、等待元素載入、登入）並僅重新截取該頁面；或者告知使用者該問題無法修復並放棄該頁面。你判斷為無害的警告（例如 favicon 404）則可以接受；但要說明。然後讀取每張 PNG：確認有真實內容、沒有半載入狀態、不包含不應公開的私人資料（電子郵件、令牌、真實客戶名稱）；如果不確定則與使用者確認。
6. 加框
以原始資料夾作為輸入來執行 generate-frame 的步驟 2–4：--out <framed dir>、--url "<app host>/{name}"、--resolution（預設為最大值）。部分失敗要報告，不可隱藏：僅重新截取或重新加框失敗的檔案。報告原始資料夾、已加框資料夾、封面配對、被放棄的頁面及其原因，以及任何限制（例如未檢查圖片）。