Communitygithub.com

plugin87/governance

管控設計系統的演進 — 為 token/元件提供 SemVer 版本號、貢獻流程、棄用政策與變更溝通。當使用者想新增/提升/棄用元件或 token、決定版本號、建立貢獻流程或防止系統碎片化時使用。

governance 是什麼?

這項技能為設計系統提供一套正式的治理框架,確保其擴展過程中保持一致性。它導入語意化版本 (SemVer) 來對 token 和元件的變更進行分類:重大變更 (major)、次要變更 (minor) 與修補 (patch),從而讓版本管理變得更清晰且可預測。此外,技能還定義了完整的貢獻流程:新元件或 token 需經由產品 (product) → 候選 (candidate) → 核心 (core) 的升級路徑,且必須滿足實際重複需求 (至少 2 處使用) 並達到高品質標準。對於棄用決策,技能要求提供原因、替代方案與移除版本,並保留至少一個次要版本週期,同時附上遷移對照表 (migration map)。最後,所有變更都需在 `CLAUDE.md` 中註冊檔案參考,並在更新日誌中留下紀錄,再通過自動化驗證腳本 (`validate_tokens.py`) 確保格式與對比度無誤。這套機制適合任何採用 monorepo 或明確設計 token 與元件規格的設計系統團隊,可在 IDE 或終端機環境中運作。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance

在你喜歡的 AI 中提問

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

說明文件

技能:治理

在系統成長的過程中保持其一致性。套用版本管理、貢獻與棄用規則。

步驟

  1. 讀取 workflows/governance.md(SemVer 表格、貢獻流程、棄用政策、變更溝通)。
  2. 對變更進行分類:major(破壞性 — 重新命名/移除 token 或 prop、改變結構/預設值)、minor(新增性 — 新的 token/元件/變體/選用 prop)、patch(修正 — 在容許範圍內的對比度/錯誤/文件/值調整)。
  3. 針對新元件/token:在從 product → candidate → core 提升前,確認它確實滿足一個真實且重複的需求(至少 2 處使用)。並按照最高品質標準進行設計(.claude/rules/components.md → 元件品質標準)。
  4. 針對棄用:標註原因 + 替代方案 + 移除版本;保留至少一個 minor 版本週期;提供遷移對照表(採用 design-systems/crosswalk.md 的風格);僅在 major 版本中移除。
  5. 將任何新檔案接入 CLAUDE.md(檔案參考對照表 + 相關表格/路由器)並新增更新日誌條目。

驗證(完成定義)

  • 變更必須有 SemVer 等級以及一條更新日誌條目。
  • 移除操作必須有棄用窗口、替代方案以及遷移對照表。
  • 新的規格必須滿足 8 狀態 + 無障礙 (a11y) + token 對應標準,並且可透過路由器存取。
  • python3 scripts/validate_tokens.py 必須通過;若顏色變更,需重新檢查對比度。

Individual skills in this repo

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

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相關技能