visual-regression
Visual Regression Testing Setup Skill
Skill Purpose
Generate complete visual regression testing setup with Storybook stories, configuration files, and CI/CD workflows.
Supports: Chromatic, Percy, BackstopJS Frameworks: React, Vue, Svelte (TypeScript/JavaScript) CI/CD: GitHub Actions, GitLab CI, CircleCI
What This Skill Does
- Detects existing setup: Storybook version, VR tool, CI platform
- Validates component: Extract props, variants, states
- Generates stories: Complete
.stories.tsxwith all variants
More from alekspetrov/navigator
product-design
Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.
17frontend-component
Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".
13nav-install-multi-claude
Install Navigator multi-Claude workflow orchestration scripts. Auto-invokes when user says "install multi-Claude workflows", "set up multi-Claude", or "enable parallel execution".
11backend-test
Generate backend tests (unit, integration, mocks). Auto-invoke when user says "write test for", "add test", "test this", or "create test".
11frontend-test
Generate frontend component tests (unit, snapshot, e2e). Auto-invoke when user says "test this component", "write component test", or "add component test".
10nav-graph
Query project knowledge graph. Search across tasks, SOPs, memories, and concepts. Use when user asks "what do we know about X?", "show everything related to X", or "remember this pattern/pitfall/decision".
10