sahin.io

All skills and agents

ui-before-after

Capture and show the owner side-by-side BEFORE/AFTER screenshots of every UI change (desktop + mobile). Use after ANY change that affects what a page looks like — static pages from server/seoRouteManifest.ts, server/publicChrome.ts, CSS, React pages/components, copy, layout, logos — before reporting the work as done or asking to ship.

Source file
.claude/skills/ui-before-after/SKILL.md

UI before/after screenshots

The owner wants to see the old and new UI for every visual change. Do this before saying the change is done, and before asking to commit or push.

1. Serve the NEW version locally

Static public pages (anything rendered by server/seoRouteManifest.ts, server/coInvestorPages.ts, server/listPages.ts, server/publicChrome.ts):

NODE_ENV=production npx vite build --config vite.config.cloudflare.ts
NODE_ENV=development npx tsx scripts/generate-static.ts
npx esbuild cloudflare/_worker.ts --bundle --platform=neutral --target=es2022 --format=esm --outfile=dist/cloudflare/_worker.js

Then start static-cloudflare from .claude/launch.json with preview_start (wrangler on port 8788). The Vite build must run again before every generate-static.ts run; it refuses an already-rendered index.html.

React-only changes: run the dev server instead and pass its URL as --new.

2. Capture

npx tsx scripts/ui-compare.ts --out <scratchpad>/ui \
  --path "/#pi-companies" \
  --path "/ai#taxonomy-companies"
  • BEFORE defaults to production (https://sahin.io/angel-investments), AFTER to http://localhost:8788/angel-investments. Override with --old / --new.
  • Production is the right baseline only while it matches origin/main. If main has undeployed commits, build origin/main in a worktree, serve it on another port, and pass that as --old.
  • #id crops each side to the changed element (#.class / #[attr] take any CSS selector). Anchor on something that exists in BOTH versions, such as the heading or section just above the change, never an id the change introduces. If a selector is new, the BEFORE label says "not found, showing top".
  • Cover every page type the change touches (one representative page per type), at desktop and mobile (default; --desktop-only / --mobile-only exist).
  • Write output to the session scratchpad, never into the repo.

3. Check, then show

  • Read each PNG yourself first. If AFTER looks wrong (blank, broken layout, overflow), fix the change before showing anything.
  • Send the PNGs with SendUserFile (display: "render"), with a one-line caption per page saying what changed.
  • In the reply, list which pages/viewports were captured. If a page could not be captured, say so rather than skipping it silently.