Reproduce captures

Commands

node scripts/design-system/audit-startboard.mjs
node scripts/design-system/measure-startboard-contrast.mjs
node scripts/design-system/capture-startboard.mjs
python3 scripts/design-system/build-startboard-content.py
node scripts/design-system/verify-design-systems.mjs

Preparation and isolation

Use the actual ../startboard-next source with its installed dependencies. Audit captures commit, working-tree status and all inventoried hashes. The prepare script makes a disposable copy, replaces server auth/data with fixtures, removes provider API routes and caches the exact Adobe Elza font kit. Source-local Font Awesome stays intact.

Capture intercepts local APIs with deterministic records, simulates error responses only for documented failure examples, and rejects unexpected requests/runtime errors. Authentication screenshots omit third-party Turnstile and never show it as successfully passed. No original app files or live data are edited.

Rendering and crops

Desktop viewport is 1440×1000 and phone viewport is 390×844, both at minimum DPR 2. Component crops use higher native browser raster density (up to 16×) to retain about 1800 physical pixels across small specimens, with lossless WebP and no bitmap enlargement. The CSS viewport and original component geometry stay unchanged. Clock is frozen for consistent comparisons. Font load checks verify Elza and Font Awesome; body uses the source’s platform fallback stack.

Take context screens before crops. Crop native DOM bounds with padding. Menus retain their trigger; open icon suggestions retain the field. Keep phone overflow visible where it is a source limitation, and label expanded/full-content examples. Inspect every image at full resolution and in labeled contact sheets.

Cleanup and review

Capture stops only its own server process group, closes its browser, removes the snapshot and stale path record, and compares original source hashes/status. Working PNGs and logs remain ignored under uploads/work/startboard-design-system. Public images, dimensions and manifest update together.

Run the verifier after capture/content finish, then check HTTP routes, sitemap, invalid-route 404s, project tabs, sidebar search, mobile contents, palette downloads and image overlay in the portfolio preview.

Source references