# Capture UI Before After

> Capture comparable before-and-after UI evidence at the same route, viewport, data, theme, and interaction state.

- Skill: `homenshum/capture-ui-before-after` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add homenshum/capture-ui-before-after`
- Raw SKILL.md: https://api.skillmd.com/api/skills/homenshum/capture-ui-before-after/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: HomenShum (https://skillmd.com/u/homenshum)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/homenshum/capture-ui-before-after

---


# Capture UI before and after

Read [the execution contract](references/contract.json) before starting. Validate the final receipt with its parameterized `verification.argv`, replacing `{python}`, `{skill_dir}`, and `{receipt}` with concrete local values.

Before editing, capture the reachable current interface and record route,
viewport, theme, session class, fixture, trigger, console, and network state.
Box only the intended change regions and name out-of-scope neighbors.

After editing, replay the identical state and capture after pixels plus empty,
loading, error, populated, overflow, and responsive states promised by the
contract. Compare neighboring regions for drift. DOM proves semantics; pixels
prove appearance; neither alone proves the other.