setup-visual-testing — Claude Code command: visual regression setup
A slash command that wires up visual regression testing: component and page snapshots, responsive breakpoints, accessibility checks.
npx claude-code-templates@latest --command testing/setup-visual-testingWhat setup-visual-testing does
setup-visual-testing walks the agent through a visual testing setup. It first inspects the project: frontend framework, component layout, any Cypress, Playwright or Storybook traces, and the CI config. Then it picks a tool — Percy, Chromatic, BackstopJS or Playwright — and configures the integration.
From there the work splits into blocks: capture baselines and organise screenshots under version control, write scenarios for components and pages, define responsive breakpoints and a browser matrix, hook the run into CI with a review step. Diff thresholds and comparison algorithms get their own pass, which is where false positives are kept down. Accessibility checks and cross-browser validation sit alongside.
Scope comes from an argument: --components, --pages, --responsive, --cross-browser or --accessibility. With no argument the command covers the general case. Hosted tools like Percy and Chromatic need access to their service, so have tokens ready before you start — otherwise the baseline step stalls on auth.
What it helps with
- set up visual regression testing from scratch
- capture UI baselines and keep them under version control
- run the same pages across several browsers
- check layout at different viewport widths
- add accessibility checks to visual tests
Example prompts for the agent
- set up visual testing for components: /setup-visual-testing --components
- run visual tests across breakpoints: /setup-visual-testing --responsive
- add accessibility checks to visual tests: /setup-visual-testing --accessibility
How to install setup-visual-testing
1claude-code-templates
npx claude-code-templates@latest --command testing/setup-visual-testing2Manually: put the files in place
.claude/commands/setup-visual-testing.mdCall it with /setup-visual-testing. For all projects use ~/.claude/commands/
Manually: put the files in place
~/.codex/prompts/setup-visual-testing.mdCall it with /prompts:setup-visual-testing. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.github/prompts/setup-visual-testing.prompt.mdManually: put the files in place
.gemini/commands/setup-visual-testing.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about setup-visual-testing
How do I install setup-visual-testing in Claude?
Run npx claude-code-templates@latest --command testing/setup-visual-testing, then confirm the file landed at .claude/commands/setup-visual-testing.md.
What does setup-visual-testing do?
It sets up visual regression testing: tool selection, baselines, component and page scenarios, CI integration and diff thresholds.
What arguments does the command take?
Scope is set with --components, --pages, --responsive, --cross-browser or --accessibility; you can also pass a general scope with no flag.
Source text
setup-visual-testing.md · MIT
--- allowed-tools: Read, Write, Edit, Bash argument-hint: "[testing-scope] | --components | --pages | --responsive | --cross-browser | --accessibility" description: Setup comprehensive visual regression testing with cross-browser and responsive testing --- # Setup Visual Testing Setup comprehensive visual regression testing with responsive and accessibility validation: **$ARGUMENTS** ## Current Visual Testing Context - Frontend framework: !`grep -l "react\\|vue\\|angular" package.json 2>/dev/null || echo "Detect framework"` - UI components: !`find . -name "components" -o -name "src" | head -1 && echo "Component structure detected" || echo "Analyze structure"` - Existing testing: !`find . -name "cypress" -o -name "playwright" -o -name "storybook" | head -1 || echo "No visual testing"` - CI system: !`find . -name ".github" -o -name ".gitlab-ci.yml" | head -1 || echo "No CI detected"` ## Task Implement comprehensive visual testing with regression detection and accessibility validation: **Testing Scope**: Use $ARGUMENTS to focus on component testing, page testing, responsive testing, cross-browser testing, or accessibility testing **Visual Testing Framework**: 1. **Tool Selection & Setup** - Choose visual testing tools (Percy, Chromatic, BackstopJS, Playwright), configure integration, setup environments 2. **Baseline Creation** - Capture visual baselines, organize screenshot structure, implement version control, optimize image management 3. **Test Scenario Design** - Create component tests, design page workflows, implement responsive breakpoints, configure browser matrix 4. **Integration Setup** - Configure CI/CD integration, setup automated execution, implement review workflows, optimize performance 5. **Regression Detection** - Configure diff algorithms, setup threshold management, implement approval workflows, optimize accuracy 6. **Advanced Testing** - Setup accessibility testing, configure cross-browser validation, implement responsive testing, design performance monitoring **Advanced Features**: Automated visual testing, intelligent diff analysis, accessibility compliance checking, responsive design validation, performance visual metrics. **Quality Assurance**: Test reliability, false positive reduction, maintainability optimization, execution performance. **Output**: Complete visual testing setup with baseline management, regression detection, CI integration, and comprehensive validation workflows.
© davila7 · MIT · davila7/claude-code-templates