visual-qa
A step-by-step QA guide for verifying visual components, mobile responsiveness, and accessibility in the browser.
Install
mkdir -p .claude/skills/visual-qa && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13525" && unzip -o skill.zip -d .claude/skills/visual-qa && rm skill.zipInstalls to .claude/skills/visual-qa
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
|Key capabilities
- →Execute a visual QA protocol
- →Confirm local npm checks and tests pass
- →Verify layout integrity on main sample routes
- →Test mobile responsiveness at 360px viewport
- →Check accessibility with prefers-reduced-motion setting
How it works
The skill walks the user through a step-by-step visual QA protocol, confirming prerequisites, checking layout and responsiveness, and testing accessibility features.
Inputs & outputs
When to use visual-qa
- →Verifying homepage layout integrity
- →Performing mobile responsiveness testing
- →Checking accessibility with reduced-motion settings
About this skill
Execute o roteiro abaixo passo a passo. A cada etapa, espere confirmação do usuário (✓ ok / ✗ encontrei problema) antes de prosseguir.
Pré-requisitos
Confirme que:
npm run checkpassou local.npm run testpassou local.npm run devestá rodando (porta 3000 por padrão).
Se algum falhar, pare e peça correção antes do QA visual.
Passo 1 — Primitivos no Storybook do RDS
Os primitivos genéricos vivem no @fabio.caffarello/react-design-system
(o BaV não tem mais primitiva local — ADR-038). Variantes de
primitivo se conferem no Storybook do RDS, não numa rota do app.
Pergunte ao usuário:
Se a mudança envolve um primitivo do RDS, confira as variantes no Storybook do RDS (repo do design system). Aqui no BaV o foco do QA é a integração no shell do app — siga para o Passo 2.
✓ ok / ✗ problema?
Se ✗, peça screenshot ou trecho do erro.
Passo 2 — Rotas-amostra principais
Pergunte ao usuário para abrir, uma de cada vez:
/(home)/parlamentares/parlamentares/<id-real>(qualquer parlamentar real)
Em cada uma, confirme:
- Layout não quebra
- Texto legível (contraste WCAG aparente)
- Cards/listagens renderizam sem warning
- Se a página tem TrustBadge, cores L1/L2/L3/L4 estão consistentes com o resto do site
Passo 3 — Mobile 360px
Abra DevTools (F12), modo responsivo, defina viewport 360x800. Recarregue qualquer uma das rotas do Passo 2.
- Layout passa sem overflow horizontal?
- Navbar usa hamburger ou compactação correta?
- Botões mantêm tamanho mínimo de toque (44px+)?
Passo 4 — prefers-reduced-motion
Em DevTools → Rendering tab → Emulate CSS media feature
prefers-reduced-motion: reduce.
- Animações reduzem ou desaparecem?
- Nenhuma animação fica em loop infinito?
- Conteúdo permanece acessível?
Passo 5 — Dark mode (default)
Confirma que o site continua em modo dark (ADR-021 §dark-first). Sem toggle light por enquanto.
Passo 6 — Screenshot antes/depois
Sugira ao usuário:
Tire um screenshot da rota afetada antes/depois (compare com a versão em
mainse necessário, ou descreva o que mudou). Anexe os dois screenshots ao corpo do PR.
Veredito final
Se todos os passos passaram, recomende:
QA visual concluído. Pode abrir o PR com confiança visual.
Se algum falhou:
QA visual encontrou problemas em: <passos>. Sugiro corrigir antes de abrir o PR. Quer ajuda em algum desses?
When not to use it
- →When npm run check or npm run test fail locally
- →When npm run dev is not running
- →When the change involves a primitive from RDS and not integration in the app shell
Limitations
- →Requires npm run check to pass locally
- →Requires npm run test to pass locally
- →Requires npm run dev to be running on port 3000
How it compares
This skill provides a structured, interactive visual QA process with specific checks for layout, responsiveness, and accessibility, unlike a manual, unguided review.
Compared to similar skills
visual-qa side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| visual-qa (this skill) | 0 | 1mo | No flags | Beginner |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| accessibility | 42 | 5mo | Review | Intermediate |
| ui-testing | 4 | 4mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
accessibility
tech-leads-club
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
ui-testing
alinaqi
Visual testing - catch invisible buttons, broken layouts, contrast
detecting-accessibility-issues
microsoft
Detects and fixes accessibility issues in React/Fluent UI webviews. Use when reviewing code for screen reader compatibility, fixing ARIA labels, ensuring keyboard navigation, adding live regions for status messages, or managing focus in dialogs.
frontclippy-audit
limiteinductive
Run frontclippy against a local HTML file, live URL, snapshot JSON, suite, or manifest and summarize the findings. Use when the user asks to audit a UI, inspect frontclippy output, emit SARIF, or run capture plus analysis.
a11y-audit
jarbitechture
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating acce