visual-qa
Run automated visual QA testing
Manual visual testing is time-consuming and error-prone. This skill automates full-page screenshots with proper animation handling across multiple devices, then enables Claude to analyze the results for visual regressions.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "visual-qa". Run visual QA on the home page
Resultado esperado:
- Taking screenshots of: https://csrdevelopment.com/
- Output directory: /root/screenshots
- ✓ desktop-1920: 20260121_143022_home_desktop-1920.png
- ✓ desktop-1440: 20260121_143022_home_desktop-1440.png
- ✓ tablet-portrait: 20260121_143022_home_tablet-portrait.png
- ✓ mobile-iphone14: 20260121_143022_home_mobile-iphone14.png
- Complete! 10 screenshots saved to /root/screenshots
A utilizar "visual-qa". Check the about page for animation issues
Resultado esperado:
- Screenshot analysis for https://csrdevelopment.com/about/:
- - Hero section: Hero text visible at final opacity, loaded correctly
- - Team photos: All team member photos loaded, grayscale filter applied
- - Scroll animations: All scroll-card elements triggered properly
- - No horizontal scroll detected
- - All links and buttons styled correctly
Auditoria de Segurança
Baixo RiscoStatic scanner flagged 43 potential issues, but all are false positives. The skill uses Playwright for legitimate visual QA automation. Hardcoded URLs are documentation examples, file operations are standard screenshot output handling, and there is no cryptographic code or dangerous operations.
Fatores de risco
📁 Acesso ao sistema de arquivos (2)
Pontuação de qualidade
O Que Você Pode Construir
Web Developer Checking Visual Changes
After making CSS or template changes, run visual QA to capture all pages across devices and verify nothing is broken before deploying.
QA Engineer Performing Visual Regression Testing
Capture screenshots of a website at multiple breakpoints and use Claude to review them for layout issues, missing images, or animation problems.
Designer Reviewing Responsive Designs
Quickly generate screenshots across all device sizes to verify that responsive designs work correctly without manually testing each viewport.
Tente Estes Prompts
Run visual QA on [URL] and analyze the screenshots for any visual issues.
Run visual QA on all pages of [website]. Take screenshots at all breakpoints and review each one for visual issues like broken images, layout problems, or animation failures.
Take mobile screenshots of [URL] and check for touch target sizes, text readability, and layout issues on small screens.
Run visual QA on [URL] and specifically check that all GSAP ScrollTrigger animations completed properly. Look for elements that should be animated but appear in their initial state.
Melhores Práticas
- Run visual QA after any CSS, JavaScript, or template changes before deploying
- Use the checklist in SKILL.md to systematically review each page for common issues
- Run parallel analysis with multiple Haiku agents when testing many pages to save time
Evitar
- Running visual QA without first checking that the development server is accessible
- Not waiting for animations to complete before taking screenshots
- Skipping the mobile viewport sizes when testing responsive designs