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/majiayu000/claude-skill-registry/tree/main/skills/other/other/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.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?