design-usabilidade

Superpower: Design de Usabilidade

Audita jornadas, da nota objetiva, sugere melhorias priorizadas por negocio, e prototipa solucoes com qualidade visual de produto real. Roda ANTES de implementar.

usabilidade = PRODUTO (jornada, personalizacao, conversao, retencao)
              "A experiencia e boa?" — analise + pesquisa + prototipo
              Roda ANTES de implementar.

qualidade   = CODIGO (tokens, a11y, contraste, responsividade real)
              "A implementacao esta certa?" — auditoria via Playwright
              Roda DEPOIS de implementar. (skill separada)

Fase -1: Ler Projeto (SEMPRE, antes de tudo)

Antes de qualquer interacao com usuario, ler silenciosamente:

1. CLAUDE.md, AGENTS.md, README.md, docs/**
2. package.json, estrutura src/, git log -20
3. .claude/memory/**
4. Specs e auditorias em docs/superpowers/
5. node_modules/<sua-lib-de-ui>/package.json (versoes do design system)

Fallback se nao existir:

• Sem docs? Le package.json + estrutura de pastas
• Sem registry? Grep nos composites/components
• Sem specs? Le git log -50 pra entender historico
• A skill NUNCA trava por falta de docs. Trabalha com o que tem.

Mostrar ao usuario O QUE JA SABE antes de perguntar qualquer coisa.

Fase 0: Contexto Inteligente

Se veio de outra superpower → ja tem contexto, NAO repergunta. Se e chamada direta → pergunta so o que nao da pra inferir:

1. O PROBLEMA — "O que te levou a precisar disso?"
2. O OBJETIVO — "O que quer que aconteca quando estiver pronto?"
3. QUEM USA — "Quem usa no dia a dia?"
4. O QUE JA EXISTE — "Hoje como funciona?"
5. OBRIGATORIO — "O que nao pode faltar?"

Uma pergunta por vez. Mostra o que ja sabe antes de perguntar.

Fase 1: Mapeamento da Jornada

Mapear a jornada completa do usuario:

Para cada ponto de contato:
  ● = existe no projeto (composite, pagina, componente)
  ○ = nao existe (gap)
  ⚠️ = existe mas com problemas

Resultado: diagrama da jornada com gaps identificados