← ClaudeAtlas

screenshotslisted

Capture README screenshots of the Tandem editor UI via Playwright + MCP
bloknayrb/tandem · ★ 18 · AI & Automation · score 67
Install: claude install-skill bloknayrb/tandem
# Capture README Screenshots Regenerate the numbered screenshot set in `docs/screenshots/`. ## When to Use After UI changes that affect any of these areas: editor layout, the right rail (annotations/chat), toolbar/tab bar, the status pill, toast notifications, the margin view, the outline rail, the Settings modal, the integration wizard, or the onboarding tutorial card. ## One pipeline ```bash npm run capture:screenshots ``` That is `scripts/screenshots/capture.spec.ts` behind its own Playwright config. It brings its own server, so there is **no** `dev:standalone` precondition, and it runs against an isolated per-run `TANDEM_APP_DATA_DIR`, so it cannot capture the operator's real chat history into a public image. There is exactly one capture pipeline, and a second one must not be added: two pipelines writing the same filenames means whichever ran last decides what the README shows, with different framing and seed data per shot. ## Critical warning — the reserved harness ports The capture config spreads the root `playwright.config.ts`, which since #1492 runs on the **reserved harness ports** from `scripts/test-ports.ts` (Vite 4573, backend 4728/4729) — a running `npm run dev:server` or the installed desktop app on 3478/3479 is safe and stays up. The reserved pair itself is not negotiable: the harness backend's boot `freePort()` **kills whatever holds 4728/4729**, so do not run `npm run test:e2e` (same ports) concurrently. ## Output The slot table — what each image m