visual-verify

---
name: visual-verify
description: "Take a Playwright screenshot and inspect the actual rendered output before claiming any visual change works. Use this skill AFTER making any CSS, layout, theming, or rendering change to a frontend application. Also use when: the user asks 'does it look right?', you're about to say 'refresh and check', or you've modified globals.css, any component's styles, or any visual behavior. Never tell the user something visual is fixed without first seeing it yourself through this skill. This prevents the pattern of blindly claiming fixes work when they don't."
---

# Visual Verify

After any frontend visual change, take a screenshot and inspect it before reporting to the user. Never claim a visual fix works without seeing it.

## When to Use

- After changing CSS, styles, colors, backgrounds, or theming
- After modifying component layout or positioning
- After adding/removing visual elements (scrollbars, controls, animations)
- Before telling the user to "refresh and check"
- When the user asks if something looks right

## The Process

### Step 1: Navigate to the page

```
Use Playwright MCP to navigate to the running dev server (usually http://localhost:3000 or :3001).
```

### Step 2: Take a screenshot

```
Take a full viewport screenshot. Save it with a descriptive name (e.g., "dark-mode-check.png").
```

### Step 3: Inspect the screenshot

Look at the screenshot yourself. Check:
- Does the change you made actually appear?
- Is the background color consistent across ALL areas (control bar, diagram, explanation panel)?
- Are elements positioned where they should be?
- Is text readable and properly colored?
- Are there any visual artifacts, misalignments, or unexpected elements?

### Step 4: Check console errors

Read the browser console for errors. CSS/JS loading failures, React rendering errors, and hydration mismatches all affect visual output.

### Step 5: Report honestly

If the fix worked — say so and show what you see.
If it didn't work — say what's still wrong and what you think the cause is. Don't claim partial success.

## Key Principle

The user's browser and Playwright see the same thing. If the screenshot shows a problem, the user will see it too. Catching it before they do saves time and preserves trust.

## What NOT to Do

- Don't inspect the DOM and claim the styles are correct without taking a screenshot. Computed styles can say "white" while the page renders gray (this actually happened with React Flow's background).
- Don't skip this step because "it's a small change." Small CSS changes cause the most surprising visual bugs.
- Don't tell the user "refresh and check" as your verification strategy. That's making them do your job.