技能概述
Docs Page 技能生成三欄文檔頁面：左側導航（inline-start nav，240-280px sticky）、中間文章主體（max-width ~720px）、右側目錄（inline-end TOC，200-240px sticky）。使用 logical CSS 屬性確保 RTL 佈局正確。
觸發關鍵字
- docs、documentation、guide、tutorial、api reference、文檔
什麼時候用
- 產品文檔頁面
- API 參考文檔
- 開發者指南
- 教學教程
- 知識庫頁面
使用方法
自然語言觸發
帮我做一个文档页面
做一個 API reference 頁面
整一個 tutorial 頁面
標準工作流程
- 讀 DESIGN.md — body type token 用於 prose，mono token 用於代碼
- 選主題 — 真實文檔，唔做 wireframe
- 佈局三個區域：
- Inline-start nav（240-280px sticky）：grouped link list，3-5 groups，4-8 links each
- Article body（max-width ~720px）：H1 + lede paragraph + H2 sections + code blocks + callout + table
- Inline-end TOC（200-240px sticky）："On this page"，highlight current section
- 寫真實內容 — 最少 350 字，至少 1 個 shell command + 1 個 code snippet + 1 個 callout + 1 個 table
輸出格式
單文件 HTML，CSS Grid 三欄佈局，sticky rails。Code blocks：mono token + soft surface fill + copy-button affordance（visual only）。每個 H2/H3 有 anchor ID 俾 TOC links 用。
自檢清單
- Body text 換行喺 DS line-length sweet spot（60-75 chars）
- Code 用 DS mono token
- Accent 克制 — active nav item + links + callout border
- 1280w 可讀，900w 以下 TOC drop out，nav 變 top drawer
- 用 logical CSS（
margin-inline-start,border-inline-start）支援dir="rtl"
實際例子
例子 1：API 文檔
用戶：「幫我做一個 API 文檔頁面，介紹 REST API 用法」
生成：
- 左導航：Getting Started / Authentication / Endpoints / Errors / SDKs
- 正文：overview + curl 示例 + response 示例 + 表格解釋參數
- TOC：自動提取 H2/H3
例子 2：開發者指南
用戶：「做一個 framework 嘅使用教程頁面」
生成三欄文檔：導航欄 / 安裝教程 body（含 shell command + 代碼範例）/ 右側目錄