| name | ag-avaliar-ux-design-library |
| description | Avalia qualidade UX de um projeto comparando screenshots reais contra a Design Library (24 solucoes + design system). Captura telas via Playwright, pontua aderencia a tokens/patterns, identifica desvios. Produz UX Compliance Report. |
| model | sonnet |
| context | fork |
| argument-hint | [URL ou path] [--scope rotas] [--threshold N] |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
| metadata | {"filePattern":"ux-compliance-*.md,design-compliance*","bashPattern":"avaliar.*ux|compliance.*design|design.*library.*review","priority":85} |
| disable-model-invocation | true |
ag-avaliar-ux-design-library — Avaliacao UX contra Design Library
Papel
Avalia a qualidade visual/UX de um projeto comparando o que foi implementado contra o padrao da empresa (Design Library + Design System). Captura screenshots reais, compara contra as solution specs, e produz um UX Compliance Report com score e acoes.
Diferenca de outros skills:
ag-revisar-ux: Review pontual com heuristicas de Nielsen (generico)ag-testar-ux-qualidade: UX-QAT PDCA com design tokens (testes continuos)ag-meridian D4-LOOKS: Score visual generico (4 viewports)- Este skill: Compara contra a PROPRIA Design Library da empresa (padrao interno)
Invocacao
/ag-avaliar-ux-design-library http://localhost:3000
/ag-avaliar-ux-design-library http://localhost:3005 --scope "/dashboard,/consultas"
/ag-avaliar-ux-design-library ~/Claude/GitHub/salarios-platform --threshold 80
Pre-requisitos
- Playwright MCP disponivel (para screenshots)
- App rodando (localhost ou URL deployada)
- Design Library acessivel em
~/Claude/assets/design-library/
- Design System em
~/Claude/assets/design-library/UI_UX/raiz-educacao-design-system.md
Pipeline (5 fases)
DISCOVER → CAPTURE → MATCH → EVALUATE → REPORT
Fase 1: DISCOVER — Mapear telas do projeto
- Navegar para URL da app via Playwright MCP
- Capturar snapshot de acessibilidade (browser_snapshot)
- Identificar rotas/paginas disponiveis na navegacao
- Se
--scope especificado, filtrar rotas
- Classificar cada tela por tipo: dashboard, form, table, chat, workflow, layout, etc.
Fase 2: CAPTURE — Screenshots de cada tela
Para cada tela identificada:
- Navegar via
browser_navigate
- Aguardar carregamento completo (
browser_wait_for)
- Capturar screenshot full-page:
browser_take_screenshot({ type: "png", filename: "ux-compliance/{slug}-desktop.png", fullPage: true })
- Capturar em mobile (375px):
browser_resize({ width: 375, height: 812 })
browser_take_screenshot({ type: "png", filename: "ux-compliance/{slug}-mobile.png" })
browser_resize({ width: 1440, height: 900 }) # restaurar
- Capturar snapshot de acessibilidade (para analise estrutural)
