uiux-baselinelisted

# 專案樣式基準抽取 此 Skill 掃描專案既有樣式，產出一份供 AI 與使用者共同閱讀的樣式基準檔。基準檔記錄的是專案的客觀統計事實，不是建議值，用途為讓後續的畫面規劃與 Demo 產製有可引用的視覺依據，不必每次重新想像。 基準檔含兩類內容。一類是色彩、間距、字級���圓角的原子值，用於還原局部觀感。另一類是可整段複用的具名版型模式，例如查詢條件列與資料表格，用於還原版型慣例。只有原子值時，後續產出的畫面仍會偏離專案既有版型，因此兩類缺一不可。 專案既有樣式本身可能不一致。此 Skill 的職責是把不一致暴露出來交由使用者決定，不是替使用者選定其中一種寫進基準。 ## 啟動條件 符合任一條件時套用： - 使用者要求建立或更新專案的樣式基準。 - 使用者要求���點專案既有的視覺慣例。 - `uiux` skill 或 `UI Demo` sub-agent 需要引用基準檔，而目標路徑尚無檔案。 ## 執行流程 ### Phase 1：掃描範圍判定 1. 依主規則判定 `work-root`。 2. 辨識前端來源目錄，納入下列副檔名的檔案： - 標記語言：`.html`、`.cshtml`、`.aspx`、`.master`、`.razor`、`.vue`、`.jsx`、`.tsx` - 樣式表：`.css`、`.scss`、`.less` 3. 一併納入主題設定檔，包含 Tailwind 設定檔、CSS 變數定義檔、Bootstrap 或其他框架的覆寫檔。 4. 排除 `bin/`、`obj/`、`dist/`、`out/`、`build/`、`node_modules/`、`.local/`。 5. 單一 `work-root` 下存在多個前端 app 時，逐一產出獨立基準檔，以檔名後綴區分。 ### Phase 2：來源分層 抽取前先將掃描到的樣式來源分為三層。層級決定該來源的值在後續判定中的角色。 | 層級 | 範圍 | 在判定中的角色 | | --- | --- | --- | | 權威層 | 主要版型檔載入的共用 CSS、CSS 變數定義檔、框架主題設定檔 | 直接列為專案慣例，不參與門檻投票 | | 佐證層 | 個別檢視或元件檔內的 `<style>` 區塊 | 參與門檻投票，並用於判定權威層是否被普遍覆寫 | | 雜訊層 | 標記上的行內 `style` 屬性 | 不進入值的計數池，僅記錄總量與覆寫熱點 | 權威層的判定方式為找出被最多檢視引用的版型檔，讀取其載入的樣式表清單。專案無明確版型檔時，改以被最多檢視直接引用的樣式表為權威層。 行內樣式不進計數池的理由是，既有專案的行內樣式宣告數常達共用 CSS 的數十倍。兩者混入同一池時任何主導值都無法成立，判定結果會退化為「全部未統一」，基準檔因此失去可引用的內容。 ### Phase 3：原子值抽取 依下列四個面向抽取實際使用值。每個值記錄出現次數與至少一處代表檔案位置（含行號）。 | 面向 | 抽取內容 | | --- | --- | | 色彩 | 文字色、背景色、邊框色、主要動作色、狀態色（成功、警示、錯誤、停用） | | 間距與尺寸 | 內距、外距、元件高度、容器最大寬度、斷點值 | | 字級與字重 | 各層級標題、內文、輔助文字的字級與字重 | | 圓角與陰影 | 圓角半徑、陰影層級 | 抽取的是**實際出現在程式碼中的值**，不是框架預設值。專案透過 CSS 變數或 Tailwind 設定集中定義時，以該定義為準並註明來