mcpField
S
show-before-after

show-before-after

github.com/wkentaroDesign & UI081 installsUpdated 6d ago
Repository

About show-before-after

A design skill for creating single-page before-and-after comparisons, pairing two visual states with numbered notes pinned to the relevant areas.

Key features

  1. 01Show states side by side or stacked
  2. 02Render content from its source
  3. 03Pin numbered notes to page regions
  4. 04Highlight notes and pins together
  5. 05Control scrolling and viewport

Use cases

  1. 01Compare interface revisions
  2. 02Show differences in charts or model output
  3. 03Compare terminal text or logs

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wkentaro/agent-skills --skill show-before-after

After installing, type/show-before-afterin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Show Before/After

A before/after page is one self-contained HTML page that sets two states of something visual side by side and pins the reasoning to what the reader sees. Before is usually the current state; After is a plan, a finished branch, or an alternative.

Sources

Render each side from the most faithful source available, and label it under the pane title ("Current app.css", "localhost:5173 on main", "matplotlib, seed 0", "Screenshot, macOS"):

  • Both states run as web pages: point each <iframe> at its own server.
  • HTML, CSS, or SVG to recreate (web UI, diagram, email, rendered doc): put the real source in an <iframe srcdoc>, so the two stylesheets stay isolated.
  • Rendered output (chart, model prediction, native or mobile UI): an image per side, produced by the real code at each revision.
  • Text output (terminal, logs, copy): the real text in a monospace block per side.

Feed both sides the same input, data, and seed, so the change is the only difference.

Page

  1. Title, then one or two sentences: what changes and what stays fixed.
  2. One row of controls, only those this comparison needs: annotations toggle, layout (Side by side / Stacked), viewport, scroll together for long frames, and input variants that exercise the change.
  3. Two panes: "Before · " and "After · ".
  4. Numbered notes under each pane. Before notes name the problems; After notes name the fixes. Each note is a bold claim plus one sentence of why, with concrete numbers (px, counts, prices, metrics) where they exist.
  5. A numbered pin on the frame at the element or region each note describes. Hovering a note highlights its pin, and hovering a pin highlights its note.

Output

Write the page to $TMPDIR/<topic>/before-after.html, open its file:// URL in a background browser window, and reply with the absolute path. srcdoc iframes, iframes pointed at running servers, and images beside the page all load from file://, so skip the server. Serve the directory with python3 -m http.server only when the page needs what browsers block on file://: fetch, ES module scripts, or local font files.

The page is done when every note has a pin on what it describes and each side matches its labelled source.

Comments

Markdown supported