analyze-reference
抽取模式，而非克隆。這個技能讀取一個公開頁面（加上最多兩個使用者指定的內部連結），以抽象術語描述其建置方式與動態效果，並寫入 patterns/<slug>.md。不會儲存網站任何內容：無圖片、影片、3D、標誌、文字、程式碼、品牌字型名稱或顏色代碼。螢幕截圖為 .cache/analyze/ 目錄下的暫時工作素材（已加入 git-ignore），並在結束時一律刪除。
此為專案自身工作流程的指引，並非法律建議。在產品化之前，請諮詢智慧財產權律師（參見 docs/roadmap.md）。
輸入
url（必要）：一個公開的 http(s) 頁面。任何需要登入、付費牆或機器人驗證的頁面均不納入範圍。--focus "..."（選用）：使用者對該網站的喜好描述，以他們自己的話表達。這個參數會引導模式表中哪些區段應深入分析。記錄於 frontmatter 中（若省略則為none）。- 最多 2 個內部連結（選用，同一網站）：對每個連結執行相同分析步驟，並合併至同一份模式表中。絕不進一步爬取。
Slug：從主機名稱衍生（去除 www.，點號改為連字號，例如 example-com）。若使用者指定 slug，則將 --slug 傳遞給 recon.mjs。若 patterns/<slug>.md 已存在，則在覆蓋前先詢問。
所有命令從專案根目錄執行。腳本位於 .claude/skills/analyze-reference/scripts/；每個腳本皆支援 --help。
步驟
按順序執行。無論步驟 1 至 5 如何結束（成功、中止或錯誤），步驟 6（清理）都會執行。將其視為 finally 區塊。
1. 檢查權限（在瀏覽器接觸網站之前）
node .claude/skills/analyze-reference/scripts/check-robots.mjs <url>
此腳本會評估 robots.txt 中針對 *、ClaudeBot、anthropic-ai 和 GPTBot 的規則、X-Robots-Tag 標頭、<meta name="robots">，以及文字與資料探勘保留（TDMRep：/.well-known/tdmrep.json、tdm-reservation 標頭與 meta）。結束碼：0 允許、1 禁止、2 無法驗證。
- 結束碼
1或2：停止。不產出任何模式表，不執行偵察任務。告知使用者腳本列出的確切原因。結束碼2（5xx、逾時、無法讀取的檔案）屬於保守的中止：表示無法驗證權限；不要重複重試，也不要尋找其他繞道方式。 - 對每個額外的內部連結也要執行此檢查。
robots.txt回傳 404 視為允許；回傳 401/403 視為禁止。
2. 偵察
node .claude/skills/analyze-reference/scripts/recon.mjs <url> [--slug <slug>]
Playwright（無頭 Chromium；若 Playwright 自帶的瀏覽器未安裝，請設定 QA_CHROME_PATH 或 CHROME_PATH）會載入頁面、捲動頁面，並寫入 .cache/analyze/<slug>/recon.json 和 screens/{375,768,1440}-<n>.png。JSON 僅包含結構與統計資料：按順序排列的區段及其高度與標題/字數（絕對不包含文字）、彙總的字型大小、行高、間距、網格/flex 使用情況、以字型分類（serif/sans/mono/display）標示的字型（絕不指名稱）、以角色描述標示的顏色（絕不包含色碼）、偵測到的函式庫及其證據與信心度、網路網域、Canvas/WebGL 存在與否，以及動態觀察（揭示、固定、視差、滾動觸發、固定標頭、平滑捲動）。
滾動容器。 有些頁面會將文件設為一個視口高度，並在內部包裝器中進行捲動。recon.mjs 會偵測此情況（可視的 overflow-y: auto|scroll|overlay 元素，覆蓋至少 60% 的視口，且具有最大的滾動範圍），並將其用於螢幕截圖、動作取樣和滾輪探測。recon.json 會記錄 scroller: { kind: "document" | "container", scrollHeightPx, clientHeightPx }，而 viewports[w].docHeightPx 是實際使用的可滾動高度。在閱讀證據時請檢查 scroller.kind。這個啟發式方法是記錄性而非保證性的：如果螢幕截圖顯示的是側面板或模態框而非頁面本身，請在模式表中說明。不涵蓋的情況：巢狀或水平滾動器，以及由滾輪事件驅動但無可滾動元素的場景。此外，頁面可能在某個寬度停止捲動（例如平板斷點）；此時在該寬度僅有一張螢幕截圖是正確的。
在代理後面。 當設定了 HTTPS_PROXY 或 HTTP_PROXY（雲端工作階段）時，check-robots.mjs 和 recon.mjs 會以 NODE_USE_ENV_PROXY=1 重新執行一次，以便 Node 的 fetch 使用代理，而 recon.mjs 會將代理傳遞給 Chromium（回送流量仍保持直接連線）。無需額外旗標；Node 的實驗性警告訊息會被隱藏。憑證照常來自 NODE_EXTRA_CA_CERTS；腳本不會讀取或嵌入它們。沒有代理時則一切不變。
結束碼 3 表示頁面無法分析（登入表單、機器人驗證、HTTP 401/403/429、無法連線）。停止：不產生模式表，告知使用者原因（若是登入頁面則說：「該頁面非公開」）。絕不嘗試規避封鎖、解決驗證問題、登入或改變使用者代理字串。
3. 閱讀證據
- 完整讀取
.cache/analyze/<slug>/recon.json。 - 使用 Read 工具檢視螢幕截圖，每個寬度至少數張，以判斷數字無法呈現的內容：英雄區構圖、節奏、密度、佈局何時打破網格、哪些部分會動。這些截圖僅供你查看；絕不複製、嵌入或參考它們。
- 信心度：全域或 DOM 類別加上相符的腳本名稱為
高；僅其中一項為中；僅網路網域為低。若函式庫被綑綁進應用程式程式碼中，則只會顯示腳本名稱匹配，因此請使用「可能」並保留偵察報告中的信心度。
4. 撰寫模式表
將 patterns/_template.md 的結構複製到 patterns/<slug>.md。填寫 frontmatter（url、slug、今天的日期 YYYY-MM-DD、focus、libraries 作為名稱清單）以及每個區段，使用你自己的語言：
| 區段 | 內容 |
|---|---|
| 摘要 | 這是什麼樣的頁面，以及為什麼值得學習 |
| 區段地圖 | 依序排列的區段：角色、近似高度（以視口為單位）、佈局構想 |
| 英雄區 | 英雄區類型、首屏構圖、載入時哪些部分會動 |
| 網格與間距 | 欄位系統、內容寬度類別、間距比例（基本單位）、垂直節奏 |
| 字體 | 通用類別（「大型怪誕展示字體 + 襯線內文字體」）、比例、字重、行高與字距習慣、大小寫 |
| 調色盤 | 角色與色調（「近乎黑色的背景、暖色飽和的強調色」）、對比特性、主題 |
| 密度 | 每螢幕內容量、留白、每區段的想法數量、文字與媒體的平衡 |
| 動作 | 表格：時刻、觸發（載入、滾動、懸停）、類型（揭示、固定、視差、滾動觸發、頁面轉場、著色器/3D）、技術與函式庫、信心度 |
| 函式庫 | 偵測到的函式庫及其證據類別與信心度 |
| 可取之處 / 應避免之處 | 哪些可直接沿用作為原創著陸頁的模式，哪些過於特殊或有風險而不宜模仿 |
動作條目：每個相關效果一行。固定區段內含隨滾動動畫的內容，觸發為 scroll，類型為 pin+scrub，並附上函式庫與其信心度。懸停行為無法由偵察測量；請查看螢幕截圖或 hoverTransitionElements 計數，並在推測時將信心度標示為低。
5. 驗證
npm run validate:patterns
必須通過。若回報 file:line 違規，請將那些行改寫得更抽象，然後再次執行。切勿削弱驗證器，也切勿使用 > note: 行來夾帶文案：該前綴僅允許你自己的簡短評論不受長引號規則限制。
只有在步驟 3 之後仍有標記為有趣的效果無法解釋時（選用）：npx rea-agents analyze-javascript-application <url>（耗效能，絕非必要）。僅記錄書面結論（「由時間軸函式庫驅動的滾動連結攝影機路徑，中等信心度」），絕不記錄其輸出、程式碼或傾印資料。若其需要你無法取得的網路存取權，則跳過。
6. 清理（總是執行）
node .claude/skills/analyze-reference/scripts/recon.mjs --cleanup <slug>
在成功、任何步驟中止或發生錯誤後執行。然後確認 .cache/analyze/<slug> 已移除，且 git status 顯示沒有來自網站的內容（成功時僅有 patterns/<slug>.md）。recon.mjs 在失敗時也會移除自己的資料夾，但你仍須執行清理步驟。
7. 向使用者報告
說明分析了什麼、模式表的路徑、函式庫及其信心度、任何無法確定的內容，並強調 PR 中必須由人工審查模式表。若中止：告知原因，以及未寫入任何模式表。
抽象規則（嚴格）
絕不將以下內容放入模式表、模式表的聊天摘要、提交記錄或任何版本控制的檔案中：
- 來自網站的文字：標題、內文、微文案、替代文字、meta 描述（只允許頁面標題和 URL）。
- 圖片、影片、字型、3D 模型或圖示的 URL，以及任何資產檔案。
- 原始碼、標記、CSS、JS 或著色器片段，即使經過縮小或編輯。
- Hex、
rgb()、hsl()或其他顏色代碼。請用角色和色調描述。 - 品牌或專有字型名稱。請使用通用類別。
- 標誌、品牌標記、插圖。
請像設計師向同事簡報一樣撰寫模式：「固定的陳述區段，內容在大約一個額外視口的範圍內隨滾動過渡」，而不是標記的逐字轉錄。若你不確定某個細節是內容還是模式，請將其省略。
中止情況
| 情況 | 行動 |
|---|---|
robots.txt 禁止 *、ClaudeBot、anthropic-ai 或 GPTBot 存取該路徑 | 在步驟 1 停止，報告匹配的規則，不產生模式表 |
TDM 保留（TDMRep 檔案、標頭或 meta，或 robots.txt 指令） | 在步驟 1 停止，報告此情況，不產生模式表 |
X-Robots-Tag 或 meta robots 中含有 noai、noindex 或 none | 在步驟 1 停止，報告此情況，不產生模式表 |
| 權限無法驗證（5xx、逾時、無法讀取的檔案） | 在步驟 1 停止，告知「無法驗證權限」，不產生模式表 |
| 登入表單、付費牆、HTTP 401/403/429、機器人驗證 | 在步驟 2 停止，告知該頁面非公開或封鎖自動化瀏覽器，不產生模式表；不嘗試規避 |
| URL 無法連線或回應非 2xx | 在步驟 2 停止，報告錯誤，不產生模式表 |
| 驗證持續失敗 | 透過進一步抽象來修正；若無法在不失焦點的情況下通過，則告知並不撰寫模式表 |
在每種中止情況下均執行步驟 6。
歸屬
偵察方法（多種寬度的螢幕截圖、DOM 結構、計算樣式、互動與滾動觀察）改編自 JCodesMore/ai-website-cloner-template 中 clone-website 技能的偵察階段，採用 MIT 授權。僅重複使用並改寫了偵察階段的概念，以進行抽象描述；不包含任何程式碼，也不包含其中的資產下載或重建階段。