Claude Code Plugins

Community-maintained marketplace

Feedback

visual-qa

@CrazySwami/wordpress-dev-skills
0
0

Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name visual-qa
description Complete visual QA - screenshots with full-page scroll to trigger animations, then analyze with Claude. Run after CSS/template changes.
allowed-tools Read, Write, Edit, Bash, Task

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

  1. Full-Page Scroll - Scrolls through entire page in increments to trigger all GSAP/ScrollTrigger animations
  2. Multi-Device Screenshots - Desktop (1920px), Tablet (768px), Mobile (375px)
  3. Parallel Processing - Uses Haiku sub-agents to analyze multiple pages simultaneously
  4. 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