visual-qa
Ejecutar pruebas automatizadas de QA visual
Las pruebas visuales manuales consumen mucho tiempo y son propensas a errores. Esta habilidad automatiza capturas de pantalla de página completa con manejo adecuado de animaciones en múltiples dispositivos, permitiendo luego que Claude analice los resultados en busca de regresiones visuales.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“visual-qa”。 Run visual QA on the home page
预期结果:
- 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
正在使用“visual-qa”。 Check the about page for animation issues
预期结果:
- 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
安全审计
低风险Static 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.
风险因素
质量评分
你能构建什么
Desarrollador Web Verificando Cambios Visuales
Después de realizar cambios en CSS o plantillas, ejecutar QA visual para capturar todas las páginas en diferentes dispositivos y verificar que nada esté roto antes de desplegar.
Ingeniero de QA Realizando Pruebas de Regresión Visual
Capturar capturas de pantalla de un sitio web en múltiples puntos de interrupción y usar Claude para revisarlas en busca de problemas de diseño, imágenes faltantes o problemas de animación.
Diseñador Revisando Diseños Responsivos
Generar rápidamente capturas de pantalla en todos los tamaños de dispositivo para verificar que los diseños responsivos funcionen correctamente sin probar manualmente cada ventana.
试试这些提示
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.
最佳实践
- Ejecutar QA visual después de cualquier cambio en CSS, JavaScript o plantillas antes de desplegar
- Usar la lista de verificación en SKILL.md para revisar sistemáticamente cada página en busca de problemas comunes
- Ejecutar análisis en paralelo con múltiples agentes Haiku al probar muchas páginas para ahorrar tiempo
避免
- Ejecutar QA visual sin verificar primero que el servidor de desarrollo sea accesible
- No esperar a que las animaciones se completen antes de tomar capturas de pantalla
- Omitir los tamaños de ventana móvil al probar diseños responsivos