ag-avaliar-ux-design-library

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

1. Playwright MCP disponivel (para screenshots)
2. App rodando (localhost ou URL deployada)
3. Design Library acessivel em ~/Claude/assets/design-library/
4. 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

1. Navegar para URL da app via Playwright MCP
2. Capturar snapshot de acessibilidade (browser_snapshot)
3. Identificar rotas/paginas disponiveis na navegacao
4. Se --scope especificado, filtrar rotas
5. Classificar cada tela por tipo: dashboard, form, table, chat, workflow, layout, etc.

Fase 2: CAPTURE — Screenshots de cada tela

Para cada tela identificada:

1. Navegar via browser_navigate
2. Aguardar carregamento completo (browser_wait_for)
3. Capturar screenshot full-page:

   browser_take_screenshot({ type: "png", filename: "ux-compliance/{slug}-desktop.png", fullPage: true })
   

4. 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
   

5. Capturar snapshot de acessibilidade (para analise estrutural)