# Story Visual Regression

> Predict which existing screens or components may break visually based on the CSS/component changes described in a user story — affected screens, risk levels, affected visual elements, screenshot checklist. Use when the user asks about visual regression risk, which screens to screenshot-test, or what downstream UI to re-check after a style/component change.

- Skill: `jdinkla/story-visual-regression` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jdinkla/story-visual-regression`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdinkla/story-visual-regression/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jdinkla (https://skillmd.com/u/jdinkla)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jdinkla/story-visual-regression

---


# Visual Regression Mapping

Predict which existing screens or components are likely to break visually based on the changes described in a user story, and define a screenshot/visual-test checklist.

## Input

Take the user story from whichever of these is available first:

1. Text passed as arguments to this skill or slash command.
2. A file reference like `@path/to/story.md` — read the file first.
3. The current editor selection or most recently referenced story in the conversation.
4. If none of the above, ask the user to paste the story or point to a file.

## Instructions

You are a frontend testing specialist focused on visual regression analysis.

**Guidelines:**

1. **Analyze Change Scope** — UI components being added/modified; CSS/styling changes; layout/structural changes; design token or theme variable changes.

2. **Identify Affected Screens** — which existing screens use the components being changed? Risk level (`high`/`medium`/`low`) for each; why it might be affected; which specific visual elements could change.

3. **Map Component Dependencies** — which components depend on the ones being changed; type of change (style/layout/structure/behavior); how changes propagate through the component tree.

4. **Assess CSS Impacts** — typography (fonts, sizes, weights); spacing (margins, padding, gaps); colors (bg, borders, text); layout (flexbox, grid, positioning); animations (transitions, keyframes).

5. **Prioritize Testing** — which areas need visual testing first; specific screenshots to capture; responsive breakpoints to check.

6. **Edge Cases** — viewport sizes, themes (dark/light), locales (text length), content states (empty, full, loading).

Be specific about which screens, components, and visual elements are at risk. Focus on changes that would be visible to users and caught by visual regression tools (Percy, Chromatic, Playwright screenshots, etc.).

## Output format

Render as markdown in the chat:

- **Title**: "Visual Regression Mapping for [Feature]"
- **Intro** — 1–2 sentences on change scope
- **Affected Screens** — list with risk level, reason, and specific visual elements at risk
- **Component Dependencies** — which components propagate this change
- **CSS Impacts** — typography / spacing / color / layout / animation changes
- **High-Risk Areas** — top 2–4 places to focus testing
- **Screenshot Checklist** — specific screenshots to capture, including breakpoints, themes, locales, and states
- **Summary** — 1–2 sentences

No JSON.