Communitygithub.com

plugin87/governance

Regelt, wie sich das Designsystem weiterentwickelt – SemVer für Tokens/Komponenten, Contribution-Workflow, Deprecation-Richtlinie und Änderungskommunikation. Verwende es, wenn der Benutzer eine Komponente oder einen Token hinzufügen/fördern/deprecaten möchte, eine Versionserhöhung festlegen, einen Beitragsprozess einrichten oder das System vor Fragmentierung bewahren will.

Was ist governance?

Die ‚Governance‘-Fähigkeit stellt sicher, dass ein Designsystem konsistent und wartbar bleibt, während es wächst. Sie legt klare Regeln für Versionierung, Contribution und Deprecation fest. Entwickler können damit Änderungen an Komponenten und Tokens gemäß SemVer klassifizieren (Major, Minor, Patch), neue Elemente von der Produkt- über die Kandidaten- zur Kernphase hochstufen und veraltete Elemente mit Ersatz und Migrationspfad versehen. Die Fähigkeit unterstützt Plattformen wie Claude Code und Cursor und automatisiert die Validierung durch Skripte, sodass alle Änderungen dokumentiert, rückwärtskompatibel und barrierefrei sind.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Skill: Governance

Halte das System konsistent, während es wächst. Wende Versionierungs-, Beitrags- und Deprecation-Regeln an.

Schritte

  1. Lese workflows/governance.md (SemVer-Tabelle, Contribution-Workflow, Deprecation-Richtlinie, Änderungskommunikation).
  2. Klassifiziere die Änderung: major (brechend – umbenannter/entfernter Token oder Prop, geänderte Anatomie/Standard), minor (hinzufügend – neuer Token/Komponente/Variante/optionaler Prop), patch (Fix – Kontrast/Bug/Dokumentation/Wert-Anpassung innerhalb der Toleranz).
  3. Für eine neue Komponente/einen neuen Token: Bestätige, dass sie/er einen echten, wiederholten Bedarf deckt (≥ 2 Stellen), bevor du von Produkt → Kandidat → Kern hochstufst. Gestalte sie/ihn nach der vollen Qualitätslatte (.claude/rules/components.md → Komponenten-Qualitätslatte).
  4. Für eine Deprecation: Markiere mit Grund + Ersatz + Entfernungsversion; lasse sie mindestens einen Minor-Zyklus funktionieren; stelle eine Migrationskarte bereit (Stil wie design-systems/crosswalk.md); entferne nur in einem Major.
  5. Binde jede neue Datei in CLAUDE.md ein (Dateiverweis-Karte + relevante Tabelle/Router) und füge einen Changelog-Eintrag hinzu.

Überprüfung (Definition von „erledigt“)

  • Die Änderung hat ein SemVer-Level und einen Changelog-Eintrag.
  • Entfernungen haben eine Deprecation-Frist, einen Ersatz und eine Migrationstabelle.
  • Neue Spezifikation erfüllt die 8-Zustands- + a11y- + Token-Mapping-Latte und ist über den Router erreichbar.
  • python3 scripts/validate_tokens.py besteht; Kontrast erneut geprüft, wenn sich Farben geändert haben.

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.

Verwandte Skills

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