Communitygithub.com

plugin87/governança

Governa como o design system evolui — SemVer para tokens/componentes, fluxo de contribuição, política de depreciação e comunicação de mudanças. Use quando o usuário quiser adicionar/promover/depreciar um componente ou token, decidir um aumento de versão, configurar um processo de contribuição ou evitar que o sistema se fragmente.

O que é governança?

Esta skill estabelece um processo de governança para design systems, garantindo consistência à medida que o sistema cresce. Ela aplica regras de versionamento semântico (SemVer), contribuição e depreciação, classificando cada mudança como major (quebras), minor (adições) ou patch (correções). A skill é útil para equipes que desejam evitar fragmentação, manter a qualidade e comunicar mudanças de forma clara. Suporta fluxos como promoção de novos tokens/componentes do estado de produto para core, depreciação com janela de migração e verificação automatizada com scripts Python. É ideal para uso com assistentes como Claude Code, Cursor ou Codex em projetos de design systems baseados em tokens.

Funciona com✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Skill: Governança

Mantenha o sistema consistente à medida que cresce. Aplique regras de versionamento, contribuição e depreciação.

Passos

  1. Leia workflows/governance.md (tabela SemVer, fluxo de contribuição, política de depreciação, comunicados de mudança).
  2. Classifique a mudança: major (quebra — token ou propriedade renomeada/removida, anatomia/padrão alterados), minor (aditiva — novo token/componente/variante/propriedade opcional), patch (correção — ajuste de contraste/bug/doc/valor dentro da tolerância).
  3. Para um novo componente/token: confirme que atende a uma necessidade real e repetida (≥ 2 lugares) antes de promover de produto → candidato → core. Projete-o com o padrão de qualidade completo (.claude/rules/components.md → Barra de Qualidade do Componente).
  4. Para uma depreciação: marque com motivo + substituto + versão de remoção; mantenha funcionando ≥ 1 ciclo minor; forneça um mapa de migração (estilo design-systems/crosswalk.md); remova apenas em uma major.
  5. Vincule qualquer novo arquivo em CLAUDE.md (Mapa de Referência de Arquivos + tabela/roteador relevante) e adicione uma entrada no changelog.

Verificação (definição de pronto)

  • A mudança tem um nível SemVer e uma entrada no changelog.
  • Remoções têm uma janela de depreciação, um substituto e uma tabela de migração.
  • A nova especificação atende ao padrão de 8 estados + acessibilidade + mapeamento de tokens e é acessível pelo roteador.
  • python3 scripts/validate_tokens.py passa; contraste re-verificado se cores foram alteradas.

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.

Habilidades Relacionadas

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