Communitygithub.com

plugin87/governance

Gestiona cómo evoluciona el sistema de diseño: versionado semántico (SemVer) para tokens/componentes, flujo de contribución, política de deprecación y comunicación de cambios. Úsalo cuando el usuario quiera añadir, promover o deprecar un componente o token, decida un incremento de versión, configure un proceso de contribución o evite que el sistema se fragmente.

¿Qué es governance?

Esta skill (habilidad) para agentes de IA (como Claude Code, Cursor, Codex) proporciona un marco de gobernanza para sistemas de diseño. Su objetivo principal es mantener la consistencia del sistema a medida que crece, aplicando reglas claras de versionado (SemVer), contribución y deprecación. Es útil para desarrolladores y diseñadores que colaboran en un sistema de diseño compartido, ya que estandariza cómo se clasifican y gestionan los cambios (mayores, menores, parches). La skill lee un archivo de flujo de trabajo (`workflows/governance.md`) y guía al agente paso a paso: clasificar el cambio según su impacto (rompedor, aditivo o corrección), definir el proceso para nuevos componentes o tokens (con un flujo de promoción producto→candidato→core), manejar deprecaciones (con ventana de soporte y tabla de migración), y asegurar la integridad del sistema validando con scripts (`validate_tokens.py`) y actualizando la documentación (`CLAUDE.md` y changelog). Al final, verifica que se cumplan criterios formales de finalización (definición de hecho).

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Skill: Gobernanza

Mantén el sistema coherente a medida que crece. Aplica reglas de versionado, contribución y deprecación.

Pasos

  1. Lee workflows/governance.md (tabla SemVer, flujo de contribución, política de deprecación, comunicaciones de cambio).
  2. Clasifica el cambio: major (ruptura — token o propiedad renombrada/eliminada, anatomía/valor por defecto modificados), minor (aditivo — nuevo token/componente/variante/propiedad opcional), patch (corrección — contraste/error/documentación/ajuste de valor dentro de tolerancia).
  3. Para un nuevo componente/token: confirma que satisface una necesidad real y repetida (≥ 2 lugares) antes de promoverlo de producto → candidato → core. Diséñalo con el nivel de calidad completo (.claude/rules/components.md → Barra de Calidad de Componentes).
  4. Para una deprecación: márcalo con motivo + reemplazo + versión de eliminación; mantenlo funcional ≥ 1 ciclo minor; proporciona un mapa de migración (estilo design-systems/crosswalk.md); elimínalo solo en una major.
  5. Conecta cualquier archivo nuevo en CLAUDE.md (Mapa de Referencia de Archivos + tabla/enrutador relevante) y añade una entrada en el changelog.

Verificación (definición de hecho)

  • El cambio tiene un nivel SemVer y una entrada en el changelog.
  • Las eliminaciones tienen una ventana de deprecación, un reemplazo y una tabla de migración.
  • La nueva especificación cumple con el estándar de 8 estados + a11y + mapeo de tokens y es accesible a través del enrutador.
  • python3 scripts/validate_tokens.py pasa; el contraste se vuelve a verificar si los colores cambiaron.

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 relacionados