---
description: "STUB — not yet hydrated for this project. Render a visual change and actually look at it, instead of judging appearance by reading code. Hydrate this file against the project's UI stack and dev-server setup before invoking it."
---

> ⚠️ **STUB.** This skill has no working procedure yet. Before it can be invoked, fill in: how to mount a component or page in isolation, how to boot the app without real credentials, how to drive a browser and capture images, and where the captures go. Delete this banner once you have. If the project has no visual surface, delete the skill instead.

## What this skill is for

Looking at a visual change with your own eyes before claiming it works.

The failure mode this exists to prevent is specific and common: reasoning about appearance by reading the code that produces it. Spacing, overflow, contrast, and how something reflows at a narrow width are not reliably derivable from source — they have to be rendered and observed.

## Concerns that hold regardless of stack

| Concern | What a hydrated version must handle |
|---|---|
| **Isolation** | Mount the thing under test on a scratch route or story that doesn't require navigating the real app to reach it. Reaching a deep UI state through six clicks makes the check expensive enough that it gets skipped. |
| **Boot without secrets** | The preview has to come up against placeholder config — stub credentials, fixture data, whatever it takes. A preview that needs production keys is one nobody runs. Say plainly which parts are faked, so an observation about them isn't mistaken for an observation about the real thing. |
| **Several widths** | Capture at more than one viewport. Most layout defects are width-dependent, and a single desktop screenshot is exactly the evidence that misses them. Pick the breakpoints the project actually claims to support. |
| **Keep artifacts out of the merge** | Screenshots are for the operator now, not for the repo forever. Put them under gitignored `tmp/`, or under `docs/remove-before-merging/` when they need to ride the branch for review — `/finalize` sweeps that tree before the PR goes ready. Never leave image files to land on the trunk. |
| **Report what you saw, not what you rendered** | "Captured 3 screenshots" is not a finding. Say what the images show and whether it matches what was intended, and surface the ones that don't. |

## Related

`/qa-checklist` classifies some verification steps as `manual-only` precisely because they need a human's eye on pixels; a hydrated `/preview` is what lets the agent close some of that gap itself.