Communitygithub.com

plugin87/redesign

Atualize um site ou aplicativo existente para qualidade premium sem quebrar a funcionalidade — audite o design atual, identifique elementos genéricos ou de IA, e aplique bom gosto e regras sistêmicas de forma cirúrgica. Use quando o usuário quiser melhorar, modernizar, polir ou 'deixar melhor' uma UI/base de código existente.

O que é redesign?

Esta skill realiza uma auditoria completa de design antes de aplicar uma reforma, garantindo que o comportamento existente seja preservado. Ela segue uma sequência de etapas: Escanear a base de código (framework, estilo, tokens, componentes), Diagnosticar usando uma checklist de 'Padrões Proibidos' e uma rubrica de revisão, Direcionar a escolha de um sistema estético adequado à marca, Aplicar as mudanças na ordem correta (tokens, tipografia, espaçamento, estados de componentes, movimento) sem alterar rotas, dados ou semântica de marcação, e Verificar com revisões de design e acessibilidade. A skill é projetada para plataformas como Claude Code e Cursor, e suporta frameworks diversos através de adaptadores específicos. Ela também impõe consistência de tema único em aplicações multi-página, consolidando todos os tokens em um único tema compartilhado e verificando com scripts de lint que nenhuma página reintroduza valores fora do tema.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/redesign
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: Redesenho & Auditoria

Redesenho com auditoria prévia que preserva o comportamento.

Etapas

  1. Leia workflows/redesign-audit.md (a sequência completa Escanear → Diagnosticar → Direcionar → Aplicar → Verificar + Completeza da Saída).
  2. Escanear a base de código: framework, método de estilização (→ roteie para o adaptador correspondente em frameworks/), realidade dos tokens, componentes, o que deve ser preservado.
  3. Diagnosticar com a checklist de Padrões Proibidos (taste/design-taste.md) + a rubrica de revisão (skill design-review). Produza uma tabela priorizada de descobertas.
  4. Direcionar: escolha um arquétipo/sistema (skill apply-aesthetic) que se ajuste à marca.
  5. Aplicar na ordem — tokens primeiro, depois tipografia/espaçamento, depois estados dos componentes, depois movimento — sem alterar rotas/dados/semântica de marcação (exceto correções de acessibilidade).
  6. Verificar: re-execute design-review + a11y-audit; teste de fumaça em cada fluxo que funcionava anteriormente; verificação pontual de modo escuro + responsividade. Execute scripts/validate_contrast.py na fonte de tokens e scripts/lint_hardcodes.py sobre o código alterado.

Salvaguardas

Nunca sacrifique uma funcionalidade funcional pela estética. Nunca publique uma cor de marca que falhe no contraste. Nunca remova recursos de acessibilidade existentes. Entregue arquivos completos — sem placeholders.

Consistência de tema único (crítico para aplicações multi-página)

Consolide em UM tema de tokens compartilhado e faça cada página consumi-lo — um redesenho que deixa páginas diferentes em paletas diferentes falhou. Substitua cores por página/ad-hoc por tokens semânticos; verifique com scripts/lint_hardcodes.py que nenhuma página reintroduza valores fora do tema. As trocas de tema devem vir da única fonte de tokens, não de edições por página (.claude/rules/tokens-and-color.md → Consistência de Tema Único).

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/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

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/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