Give the next edit
something to go on.

Capture before editing

Install @juxtapose/cli and its browser using the setup instructions. Start your app's dev server. This example assumes a page at http://localhost:5173/settings; replace it with your actual route.

npx -p @juxtapose/cli jux snap http://localhost:5173/settings --as before
# Make the component change.
npx -p @juxtapose/cli jux snap http://localhost:5173/settings --as after
npx -p @juxtapose/cli jux diff before after --json

The comparison reports changed elements, properties, old and new values, and whether structure explains the changed regions. That evidence narrows what the agent needs to investigate; it does not decide whether the change matches your intent.

Inspect pixels when they add context

npx -p @juxtapose/cli jux diff before after --crops

If a text wrap or missing element is unexplained, open the relevant image regions, make a targeted fix, and capture again. Compare each iteration against the same reference until you intentionally change it.

Connect through MCP or the shell

The same capture and review loop is available through MCP. For Claude Code:

claude mcp add jux -- npx -y -p @juxtapose/cli jux mcp

Other clients use the MCP configuration guide. Agents with shell access can use the commands above. Storybook or Ladle failures can also produce an agent handoff with jux handoff <story-id>.

Keep the approval decision explicit

Ask the agent to report what changed and why, then review the result before approving a baseline. A diff describes evidence; it does not prove the implementation satisfies a design or requirement.

Next: build toward a design reference, or read the verdict and agent workflow reference.