Communitygithub.com

plugin87/gouvernance

Gouvernez l'évolution du système de design — SemVer pour les tokens/composants, le workflow de contribution, la politique de dépréciation et la communication des changements. Utilisez cette compétence lorsque l'utilisateur souhaite ajouter/promouvoir/déprécier un composant ou un token, décider d'un changement de version, mettre en place un processus de contribution ou empêcher la fragmentation du système.

Qu'est-ce que gouvernance ?

Cette compétence établit un cadre de gouvernance pour maintenir la cohérence du système de design à mesure qu'il évolue. Elle permet de classer chaque changement selon les règles SemVer (majeur, mineur, correctif) et de suivre un workflow structuré pour la contribution, la dépréciation et la communication des modifications. Elle s'appuie sur un fichier workflow (`workflows/governance.md`) et est conçue pour des plateformes comme Claude Code, Cursor ou Codex. L'utilisateur peut ainsi promouvoir un composant ou un token du statut de produit à candidat puis à cœur, gérer les dépréciations avec un remplacement et un tableau de migration, et s'assurer que tout nouveau fichier est intégré dans `CLAUDE.md` avec une entrée dans le changelog. La vérification finale inclut la validation SemVer, la conformité aux critères de qualité (8 états, accessibilité, mappage des tokens) et l'exécution réussie de `python3 scripts/validate_tokens.py`.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence : Gouvernance

Maintenez la cohérence du système à mesure qu'il se développe. Appliquez les règles de versioning, de contribution et de dépréciation.

Étapes

  1. Lisez workflows/governance.md (tableau SemVer, workflow de contribution, politique de dépréciation, communication des changements).
  2. Classez le changement : majeur (rupture — token ou propriété renommé/supprimé, anatomie/valeur par défaut modifiée), mineur (ajout — nouveau token/composant/variante/propriété optionnelle), correctif (réparation — contraste/bogue/doc/ajustement de valeur dans la tolérance).
  3. Pour un nouveau composant/token : confirmez qu'il répond à un besoin réel et récurrent (≥ 2 occurrences) avant de promouvoir produit → candidat → cœur. Concevez-le selon la barre de qualité complète (.claude/rules/components.md → Barre de qualité des composants).
  4. Pour une dépréciation : marquez avec la raison + le remplacement + le numéro de version de suppression ; maintenez-le fonctionnel pendant ≥ 1 cycle mineur ; fournissez un plan de migration (style design-systems/crosswalk.md) ; supprimez uniquement lors d'une version majeure.
  5. Rattachez tout nouveau fichier dans CLAUDE.md (carte de référence des fichiers + tableau/routeur pertinent) et ajoutez une entrée dans le changelog.

Vérification (définition de fait)

  • Le changement a un niveau SemVer et une entrée dans le changelog.
  • Les suppressions ont une fenêtre de dépréciation, un remplacement et un tableau de migration.
  • La nouvelle spécification répond à la barre des 8 états + accessibilité + mappage des tokens et est accessible via le routeur.
  • python3 scripts/validate_tokens.py réussit ; le contraste est revérifié si les couleurs ont changé.

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.

Skills associés

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