Communitygithub.com

theme-review

僅在使用者要求審核或稽核 UI 主題、設計 Token,或針對視覺一致性與元件在主題中的重複使用性進行審查時使用。不適用於一般程式碼審查、UX 流程審查或非 UI 工作。

theme-review 是什麼?

此技能旨在稽核專案與其主題的吻合程度,確保主題檔案本身健全,且設計與程式碼確實遵循該主題。審核結果會產生一份依嚴重程度排序的發現清單,以及一份建議的主題變更提案。審核者必須以專案既有的主題為基礎,絕不發明新的主題;主題中的落差會被視為應由 `theme` 技能補充的提議,而非全新的調色盤。支援的平台範圍包括程式碼(原始碼目錄、差異比對或 PR)、畫布成品或螢幕截圖中的主題檔案與設計 Token。運作方式包含透過 `check.mjs` 驗證主題 Token 檔案、以 `scan.mjs` 掃描程式碼中的 Token 使用情形、檢查原始 Token 的直接引用、分析頁面實際樣式並遵循檢查清單中的多個檢視輪次,最終產生一份包含主題版本、目標、發現嚴重性與具體修復建議的結構化報告。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mrgnhnt96/ultrahand/tree/main/skills/theme-review

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

ultrahand: theme-review

稽核專案與其主題的吻合程度:主題檔案本身是否健全,以及設計和程式碼是否確實使用該主題。輸出為一份依排名排列的發現清單,加上一份提議的主題變更清單。審核者以專案的主題為基礎,絕不發明新主題。主題中的缺口會變成提議,讓 theme 技能來補充,而非建立全新的調色盤。

規則位於 shared/theme/rules.md(強制性規則 NN-n、創意軸線 CR-n、演進規則 EV-n);每項檢查均在 references/checklist.md 中,兩者皆引用 shared/theme/sources.md。對於超越主題範圍的 UX 問題(流程、標籤、平台慣例),請指向 review 技能。

以下腳本位於 ${CLAUDE_PLUGIN_ROOT}/shared/theme/。

1. 取得主題與目標

  • 主題: 找到 design/THEME.md 以及 Token 檔案(如同 theme 技能的第一步搜尋方式)。閱讀 THEME.md:其特質、哪些決定已被鎖定、其元件清單及其變更日誌。這些是目標必須遵守的依據。
  • 尚無主題: 不要自行編造。執行 node scan.mjs <src dir> 來顯示程式碼目前使用的值,並僅根據強制性規則進行審核。建議使用 theme 技能從中萃取主題,並將掃描的主要集群作為起點放入報告中。
  • 目標: 程式碼(原始碼資料夾、差異比對或 PR)、畫布成品或螢幕截圖。與 review 技能相同,請說明你擁有的是哪一種,並將每項發現標記為 Confirmed(透過程式碼、Token 檔案或畫布量測)或 Likely(根據影像判斷)。針對差異比對,審查其變更的內容,並記錄其引入的任何偏離。

2. 執行檢查

  1. 主題檔案: node check.mjs design/theme.tokens.json --json。每個錯誤都是一項發現;閱讀兩個模式的對比表格。
  2. 程式碼中的 Token 使用: node scan.mjs <src dir> --theme design/theme.tokens.json。
    • 符合 Token 的原始值:主題值的硬編碼副本。當主題變更時,這些不會隨之更新 [HIG-COLOR] [PRIMER-LINT]。
    • 沒有對應 Token 的值:偏離主題。每個要不是錯誤(將其對齊到顯示的最近 Token),就是真實需求(提議建立一個 Token)。
    • 沒有任何檔案提及的 Token:可能未使用。在提議移除前請先確認;掃描是透過模式比對名稱。
    • 接近重複的顏色 與 偏離格線的間距:每個集群一項發現,而非每行一項。 同時搜尋程式碼中直接使用的原始 Token(primitive. 或平台的等效表示),這會跳過角色層(NN-1)。
  3. 在畫布或即時頁面上: 讀取受審核元素的計算樣式。組合審核(shared/composition/audit.mjs,透過 shared/input/drive.mjs 執行)會回報每個區段的控制項樣式、字型大小與間距,這能立即顯示出第二種按鈕樣式或異常的字型大小。
  4. 依序執行 references/checklist.md 中的檢視輪次:主題健康度、Token 使用、元件重複使用、跨畫面一致性、兩個模式以及特性。

這些腳本找到的是模式,而非確鑿證據。在每個線索成為發現之前,請先開啟並確認它。

3. 評分與報告

使用與 review 相同的 0–4 等級(請參閱其檢查清單的嚴重程度指南),並使用此技能檢查清單中的基準點。一個問題出現在多個地方,視為一項發現,並附上數量與主要位置。

## 結論
<主題版本與目標、證據、各嚴重程度計數、偏離的最大單一來源。>

## 發現
### T1 · 3 Major · <簡短標題>
- **位置:** <檔案:行號, 畫面 › 元素, 或 Token 路徑>;×<數量>
- **證據:** Confirmed | Likely
- **問題:** <偏離了什麼,以及其代價:人們看到的不一致,或是不會隨下次主題變更而更新的值>
- **規則:** <NN-n / EV-n / CR-n> [<來源鍵>]
- **修復:** <具體:"在 3 處將 #8e3f27 替換為 var(--color-primary)">

## 建議的主題變更
<供 theme 技能套用。每項:新增 / 棄用 / 鎖定,Token 或決定,其值的別名,原因,以及哪些發現需要它。排除任何現有 Token 已涵蓋的項目。>

## 運作良好的部分
## 未檢查的部分

將修復維持在主題範圍內:先對齊到現有 Token,其次提議一個新 Token,絕不建議會違反強制性規則的值。提供套用程式碼修復的選項,並建議執行 theme 技能來套用提議的變更。

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

相關技能