Communitygithub.com

ガバナンス（plugin87/governance）

デザインシステムの進化を統制します — トークン/コンポーネントのSemVer、コントリビューションワークフロー、非推奨ポリシー、変更通知を適用します。ユーザーがコンポーネントやトークンを追加/昇格/非推奨にする、バージョンアップを判断する、コントリビューションプロセスを設定する、またはシステムの断片化を防ぎたい場合に使用します。

governance） とは？

このスキルは、デザインシステムの一貫性を保ちながら成長させるためのガバナンスを提供します。主にSemVerに基づくバージョニング、コントリビューションワークフロー、非推奨ポリシー、変更通知の4つの側面をカバーします。変更を「major（破壊的）」「minor（追加的）」「patch（修正）」に分類し、新しいコンポーネントやトークンは「product→candidate→core」の段階を経てプロモーションされます。非推奨の際は理由・代替手段・削除バージョンを明示し、最低1つのマイナーサイクルは動作を維持、移行マップを提供してメジャーバージョンでのみ削除します。全ての変更はchangelogに記録され、新しいファイルはCLAUDE.mdのファイル参照マップに紐付けられます。また、検証スクリプト `python3 scripts/validate_tokens.py` の合格と、アクセシビリティ・トークンマッピングの品質基準を満たすことが必須です。このスキールはCLAUDE.md連携を前提としており、AIエージェントがデザインシステムの進化を安全かつ体系的に管理するのに役立ちます。

対応✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

スキル: ガバナンス

システムが成長しても一貫性を保ちます。バージョニング、コントリビューション、非推奨ルールを適用します。

手順

  1. workflows/governance.md（SemVerテーブル、コントリビューションワークフロー、非推奨ポリシー、変更通知）を読みます。
  2. 変更を分類します: major（破壊的 — トークンやプロパティの名前変更/削除、アナトミー/デフォルトの変更）、minor（追加的 — 新しいトークン/コンポーネント/バリアント/オプショナルプロパティ）、patch（修正 — コントラスト/バグ/ドキュメント/値の微調整（許容範囲内））。
  3. 新しいコンポーネント/トークンの場合: それが本当に繰り返し発生するニーズ（2箇所以上）に応えることを確認してから、product → candidate → core に昇格させます。完全な品質基準（.claude/rules/components.md → コンポーネント品質基準）に従って設計します。
  4. 非推奨の場合: 理由 + 代替手段 + 削除バージョンを明示し、最低1つのマイナーサイクルは動作を維持します。移行マップ（design-systems/crosswalk.md スタイル）を提供し、メジャーバージョンでのみ削除します。
  5. 新しいファイルを CLAUDE.md（ファイル参照マップ + 該当テーブル/ルーター）に紐付け、changelogエントリを追加します。

検証（完了の定義）

  • 変更に SemVer レベル と changelogエントリがあること。
  • 削除に非推奨期間、代替手段、移行テーブルがあること。
  • 新しい仕様が8状態 + a11y + トークンマッピングの基準を満たし、ルーターから到達可能であること。
  • 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.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community