Agent skill
visual-qa
Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.
Install this agent skill to your Project
npx add-skill https://github.com/CrazySwami/wordpress-dev-skills/tree/main/skills/visual-qa
SKILL.md
Visual QA Skill
Automated visual testing that properly handles GSAP animations by scrolling through the entire page before capturing screenshots.
Usage
Ask Claude to run visual QA:
- "Run visual QA on the CSR site"
- "Take screenshots of all pages and analyze them"
- "Check the visual state of the website"
What This Skill Does
- Full-Page Scroll - Scrolls through entire page in increments to trigger all GSAP/ScrollTrigger animations
- Multi-Device Screenshots - Desktop (1920px), Tablet (768px), Mobile (375px)
- Parallel Processing - Uses Haiku sub-agents to analyze multiple pages simultaneously
- Visual Analysis - Reviews screenshots for issues
Pages Tested
| Page | URL |
|---|---|
| Home | https://csrdevelopment.com/ |
| About | https://csrdevelopment.com/about/ |
| Portfolio | https://csrdevelopment.com/portfolio/ |
| Contact | https://csrdevelopment.com/contact/ |
| Privacy Policy | https://csrdevelopment.com/privacy-policy/ |
| Terms | https://csrdevelopment.com/terms-of-service/ |
Screenshot Script
Location: /root/.claude/skills/visual-qa/screenshot.py
Single Page
python3 /root/.claude/skills/visual-qa/screenshot.py --url https://csrdevelopment.com/about/
All Pages
python3 /root/.claude/skills/visual-qa/screenshot.py --all
Output
Screenshots saved to: /home/dev/screenshots/
Parallel Analysis with Haiku
When running full visual QA, launch multiple Haiku agents to analyze different pages simultaneously:
Agent 1: Analyze Home + About screenshots
Agent 2: Analyze Portfolio + Contact screenshots
Agent 3: Analyze Legal pages screenshots
Visual QA Checklist
All Pages
- Header visible and logo centered
- Menu button works
- Footer links present
- No horizontal scroll
- Text readable at all sizes
Home Page
- Hero video/image loaded
- Hero text visible (not opacity 0)
- Property cards show with images
- Animations completed
About Page
- Team member photos loaded (not placeholders)
- Bio text visible
- Images have grayscale filter
Portfolio
- Property grid displays
- Status badges visible
- Different images for each property
Contact
- Form fields visible
- Contact info displayed
- Submit button styled
Property Detail
- Hero image loaded
- Property details sidebar
- Inquiry form present
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
CrazySwami/wordpress-dev-skills
wp-test-analyzer
CrazySwami/wordpress-dev-skills
wp-performance
WordPress performance optimization - Core Web Vitals, image/video compression, caching, asset optimization, and speed testing. Use when optimizing site speed or diagnosing performance issues.
CrazySwami/wordpress-dev-skills
wordpress-dev
WordPress development best practices - coding standards, custom post types, security, performance, hooks/filters, and template hierarchy. Use for any WordPress theme or plugin development guidance.
CrazySwami/wordpress-dev-skills
gsap-animations
GSAP animation best practices for web design - scroll triggers, performance optimization, accessibility, responsive animations, and testing integration. Use when implementing or reviewing animations on WordPress or any web project.
CrazySwami/wordpress-dev-skills
wp-docker
Docker-based WordPress development environment. Use when setting up new WordPress sites, managing Docker containers, or automating site deployment with WP-CLI.
CrazySwami/wordpress-dev-skills
siteground-cache
Didn't find tool you were looking for?