work-humanize-copy-side-by-sidelisted

Reword an interface's copy in your OWN voice through a two-pane side-by-side tool, then write the humanized text back into the source. Point it at a React/TSX interface (e.g. the landing page); it extracts every user-facing copy string, captures the real rendered screen 1:1 as an on-the-left reference, and builds ONE self-contained HTML file where the LEFT pane is the real screenshot with numbered anchors and the RIGHT pane is editable fields seeded with the original copy, each numbered to match its spot on the left and hover-paired to it. You reword only the fields you want and leave the rest; on hand-back it writes every string back into the .tsx/.ts files it came from. Because untouched fields still hold the original, apply is a safe blanket overwrite (no diffing) and every write is verified present in source afterward. Reuses the data-island and loss-free hand-back mechanics of /sk:ship-mockup-before-after; seeds voice guidance from rules/copy-quality.md but never auto-rewrites, you write the words. Use f
skowalskidev/dotclaude · ★ 2 · Data & Documents · score 78

Install: claude install-skill skowalskidev/dotclaude

# Reword the copy yourself, side by side, then write it back **Why this exists:** you write copy in your own voice better than any model, but the copy is scattered across twenty TSX components mixed with URLs, class names and props. Reading each file to find the human-facing strings, editing them in place, and not breaking the JSX is the friction that stops you doing it. This tool pulls every copy string out, shows the real screen beside it so you keep the context, lets you rewrite only what you want, and writes your words back into the exact source locations, so the whole job is "read the screen, type better words". **This is a HUMAN-in-the-loop tool, not an auto-rewriter.** The skill extracts, presents, and writes back. YOU supply the words. `rules/copy-quality.md`'s ban-list seeds optional suggestions when you ask for them; the skill never replaces your voice with its own. ## What it reuses, do not rebuild it `/sk:ship-mockup-before-after` owns the mechanics this shares. Read it and reuse them, never restate: - **ONE self-contained HTML FILE**: inline all CSS/JS, screenshots as compressed `data:` URIs, opens from `file://` with no server. Not a Claude artifact (a full-page screenshot blows the size ceiling). - **The `#spec` data island**: one `<script type="application/json" id="spec">` that IS the entire state; a small `render(spec)` builds the UI from it. Nothing user-visible lives outside `#spec`. - **Capturing the real screen**: screenshot at a fixed viewport,