Illustrate a UI change

Visual verification is an optional add-on: before / after / design-reference images of a change, with numbered callouts and a legend. A project that never runs it carries nothing for it.

Prepare

Set the add-on up once per machine and once per app. From the project root:

e11 visual doctor --json
e11 visual init --app <app folder>

doctor installs a pinned browser runtime into Foundry Home on first use. init probes the app, writes visual.config.json beside it, and proves the config with a real sign-in and one screenshot. When the project has more than one app config, add the visual_app = "<app folder>" line init prints to .foundry/custom/config.toml.

Describe what a user will see. In a spec, list each state under ## Screen states, ending each line (new) or (changed); or write a screens file in the per-run shape the skill documents.

Request the task

Use e11-visual on the spec for this change and write the legend for each composite.

The composites land under {implementation_artifacts}/visual/<slug>/composites/ (the initiative's stories folder when one is in force), beside a run.json with every stage's timing. Captures and logs stay out of git through the folder's own .gitignore.

Verify the result

Open each composite. Every claimed change carries a numbered callout, and the legend says what each number points at. The skill's cold review writes composites/review.json once the set reads clearly to someone who never ran the change.

To check built screens against a design reference instead, configure a reference surface in the app config and ask for a punch list without code edits:

Use e11-visual-reconcile report on the app's saved screens.

Turn it off

Set visual = "off" under [modules.foundry] for the project, visual: off in one spec's front matter, or E11_VISUAL=off for one shell. e11 visual clean --runtime removes the browser runtime from Foundry Home.

Find the next skill or read the visual command reference.