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:
- Text passed as arguments to this skill or slash command.
- A file reference like
@path/to/story.md — read the file first.
- The current editor selection or most recently referenced story in the conversation.
- 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:
Analyze Change Scope — UI components being added/modified; CSS/styling changes; layout/structural changes; design token or theme variable changes.
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.
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.
Assess CSS Impacts — typography (fonts, sizes, weights); spacing (margins, padding, gaps); colors (bg, borders, text); layout (flexbox, grid, positioning); animations (transitions, keyframes).
Prioritize Testing — which areas need visual testing first; specific screenshots to capture; responsive breakpoints to check.
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.
1---2name: story-visual-regression3description: 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.4---56# Visual Regression Mapping78Predict 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.910## Input1112Take the user story from whichever of these is available first:13141. Text passed as arguments to this skill or slash command.152. A file reference like `@path/to/story.md` — read the file first.163. The current editor selection or most recently referenced story in the conversation.174. If none of the above, ask the user to paste the story or point to a file.1819## Instructions2021You are a frontend testing specialist focused on visual regression analysis.2223**Guidelines:**24251. **Analyze Change Scope** — UI components being added/modified; CSS/styling changes; layout/structural changes; design token or theme variable changes.26272. **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.28293. **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.30314. **Assess CSS Impacts** — typography (fonts, sizes, weights); spacing (margins, padding, gaps); colors (bg, borders, text); layout (flexbox, grid, positioning); animations (transitions, keyframes).32335. **Prioritize Testing** — which areas need visual testing first; specific screenshots to capture; responsive breakpoints to check.34356. **Edge Cases** — viewport sizes, themes (dark/light), locales (text length), content states (empty, full, loading).3637Be 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.).3839## Output format4041Render as markdown in the chat:4243- **Title**: "Visual Regression Mapping for [Feature]"44- **Intro** — 1–2 sentences on change scope45- **Affected Screens** — list with risk level, reason, and specific visual elements at risk46- **Component Dependencies** — which components propagate this change47- **CSS Impacts** — typography / spacing / color / layout / animation changes48- **High-Risk Areas** — top 2–4 places to focus testing49- **Screenshot Checklist** — specific screenshots to capture, including breakpoints, themes, locales, and states50- **Summary** — 1–2 sentences5152No JSON.
jdinkla