familysync/.planning/quick/260619-jp4-add-app-screenshots-to-readme/260619-jp4-PLAN.md

quick_id, slug, status, date

quick_id	slug	status	date
260619-jp4	add-app-screenshots-to-readme	complete	2026-06-19

Quick Task 260619-jp4: Add app screenshots to README

Goal

Add real screenshots of the running FamilySync PWA to the README, organized into a Features section that expands on the top-line project description (per user follow-up: "the screenshots should go in some sort of features section that expands on the description").

Approach

1. Drive the live dev app (Vite :5173 + API :3000, dev-auth-bypass) with playwright-cli (Chromium) and capture six views: Calendar, Lists index, List detail, Login, Setup wizard, Admin.
2. The live instance has only one seeded event and one list — too sparse to showcase. Per the user's decision (AskUserQuestion: "Mock locally"), populate the views by intercepting API responses in the browser with playwright-cli route (no writes to the real Fastmail account):
   • /api/me → friendly member "Jordan" (blue), admin, setup not needed
   • /api/events → a full June 2026 month of color-coded personal + family events
   • /api/lists + /api/lists/*/items → four lists, a stocked grocery list
   • /api/admin/members + /api/admin/calendars → two-person household
   • /api/setup/status → setupComplete:false so the wizard renders
3. Save final PNGs to docs/screenshots/.
4. Rewrite the README "What It Does" bullets into a "## Features" section with one screenshot per capability and expanded prose.

Tasks

• Capture six screenshots into docs/screenshots/ via playwright-cli (mocked data)
• Replace README "What It Does" with a "Features" section embedding the screenshots
• Pass local CI gates (prettier, markdownlint)

Files

• docs/screenshots/*.png (new — 6 images)
• README.md (Features section)

Verify

• pnpm exec prettier --check README.md → clean
• pnpm md:lint → 0 errors (MD033 inline-HTML active → pure-markdown images only)
• Images resolve at docs/screenshots/<name>.png relative paths