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 laravel-toolkitnpx claudepluginhub aronpc/ai --plugin laravel-toolkitThis skill is limited to using the following tools:
references/accessibility-audit.mdreferences/component-analysis.mdDispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
Identifica melhorias de UI/UX com validação visual usando browser automation.
| 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 |
Use esta skill quando precisar:
Não use para:
Veja a app como usuários veem.
Identifique friction points, inconsistências, e oportunidades de polish que melhoram a experiência do usuário.
| 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 |
| Impacto | Esforço | Prioridade |
|---|---|---|
| Alto | Baixo | Fazer primeiro |
| Alto | Alto | Planejar cuidado |
| Baixo | Baixo | Fazer se tempo |
| Baixo | Alto | Evitar |
{
"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"
}
]
}
| 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 |
references/accessibility-audit.md - WCAG checks detalhadosreferences/component-analysis.md - Design system consistency