ReddRadar
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/aiskillstore/marketplace/tree/main/skills/crazyswami/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.
aiskillstore/marketplace
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
aiskillstore/marketplace
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
aiskillstore/marketplace
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
aiskillstore/marketplace
fastapi-mastery
Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.
aiskillstore/marketplace
context7-efficient
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
aiskillstore/marketplace
browser-use
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.
Didn't find tool you were looking for?