Ui ux

Descobre melhorias visuais e de usabilidade com validação via browser. Use quando precisar analisar interfaces, identificar problemas de UX, ou sugerir melhorias visuais e de interação.From its SKILL.md

Install

npx -y skills add aronpc/ai --skill ui-ux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.5 KB, as published. Nobody here has run it

ui-ux

Resumo

Identifica melhorias de UI/UX com validação visual usando browser automation.

Skills Relacionadas

Skill	Quando usar junto
`mcp`	Para validação visual com browser automation
`spec`	Para criar specs a partir das melhorias visuais
`codebase`	Para combinar melhorias visuais e técnicas
`ux`	Para implementar melhorias com Precognition/Prompts

Quando usar

Use esta skill quando precisar:

Analisar UI/UX da aplicação visualmente
Identificar problemas de acessibilidade
Encontrar inconsistências de design
Priorizar melhorias de interface

Não use para:

Melhorias de código (use codebase)
Revisão de PR (use pr-review)

Princípio Chave

Veja a app como usuários veem.

Identifique friction points, inconsistências, e oportunidades de polish que melhoram a experiência do usuário.

Browser Exploration

Ferramentas Disponíveis

Puppeteer MCP para automation
Screenshots para verificação visual
Console logs para erros

Fases de Exploração

Navegar - Ir para página principal
Capturar - Screenshot do estado inicial
Interagir - Testar elementos interativos
Verificar - Checar erros de console
Documentar - Registrar descobertas

Auditoria de Acessibilidade

WCAG 2.2 - Verificações Rápidas

Check	O que verificar
Contraste	Ratio >= 4.5:1 para texto normal
Keyboard	Todos elementos acessíveis por tab
ARIA	Labels apropriados
Alt text	Imagens com descrição
Forms	Labels associados

Problemas Comuns

Focus states ausentes
Contraste de cor insuficiente
Labels de formulário ausentes
Sem skip links
Imagens sem alt text

Consistência de Componentes

O que Verificar

Avaliação Esforço/Impacto

Impacto	Esforço	Prioridade
Alto	Baixo	Fazer primeiro
Alto	Alto	Planejar cuidado
Baixo	Baixo	Fazer se tempo
Baixo	Alto	Evitar

Formato de Output

{
  "ui_ux_improvements": [
    {
      "id": "uiux-001",
      "title": "Add loading state to submit button",
      "description": "Show spinner during form submission",
      "category": "feedback",
      "effort": "trivial",
      "impact": "high",
      "affected_components": ["SubmitButton"],
      "screenshot": "path/to/screenshot.png"
    }
  ]
}

Categorias de Melhoria

Categoria	Exemplos
Feedback	Loading, success, error states
Navigation	Breadcrumbs, back buttons
Forms	Validation, help text
Layout	Responsive, spacing
Accessibility	ARIA, contrast, keyboard
Performance	Perceived speed, skeletons

Referências

references/accessibility-audit.md - WCAG checks detalhados
references/component-analysis.md - Design system consistency