da-express-milo: Skill for Claude Code

Comparison Skill

Backed by .claude/tools/comparison/compare-branches.mjs (lives in this repo, not globally), which is independently invokable by any skill/agent. It calls .claude/tools/qa-worktree/qa-worktree.mjs twice — once per ref, run CONCURRENTLY (distinct worktree names and ports; both refs are fetched once up front so the two calls never race on git fetch) — then diffs the results.

Workflow

1. Get the block name and branch from the invocation args (e.g. /comparison grid-marquee my-feature-branch). Both are required — ask if either is missing. The branch must already exist on origin.

   Watch for swapped/misordered args: if the named "block" produces zero matches when checked (the tool will report pagesFound: 0), but the named "branch" happens to be a real block name (or vice versa), the user likely gave them in the wrong order — infer the correct assignment rather than failing, and say so.

2. Get the baseline (optional). Default is stage. Override with --base only if the user wants to compare two feature branches instead of branch-vs-stage. --base and --branch must differ.

3. Run the tool (resolve the repo root first — this tool lives inside the checkout, so don't assume cwd is the repo root):

   ROOT="$(git rev-parse --show-toplevel)"
   node "$ROOT/.claude/tools/comparison/compare-branches.mjs" \
     --block="<name>" --branch="<branch>" [--base="<base>"]
   

   Options worth knowing about:

   • --mode=<element|full|both> — default element (just the block, not the whole page — full-page screenshots of a long page are slow to render/encode/write and mostly irrelevant to "did this block change"). Use --mode=full or --mode=both only when the user specifically wants to see how the block affected surrounding page layout.
   • --selector="<css>" — override the auto-derived .<block-slug> selector, e.g. when the block's root class doesn't match its name.
   • --concurrency=<n> — pages captured in parallel, per side. Default 6.
   • --timeout=<seconds> — dev-server readiness window per side.
   • --locale=<key> (repeatable) / --all-locales — compare other locales too, not just en (the default). Passed to both sides so page sets match. A locale requested explicitly via --locale that has no local content checkout is an error; --all-locales skips it instead (see localesSkipped) — sync locales first with node .claude/tools/sync-locale-content.mjs --locale=<key> (or --all for every locale; --list shows what's already synced). Comparing --all-locales on a widely-used block is meaningfully slower — it's still one worktree/dev-server pair per side, but N times the page count, so mention that to the user before running it.