docs(quick-260619-jp4): add app screenshots to README

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 14:24:33 -04:00
parent 23dc3cdd3f
commit cf9e345b87
3 changed files with 102 additions and 1 deletions
@@ -0,0 +1,50 @@
+---
+quick_id: 260619-jp4
+slug: add-app-screenshots-to-readme
+status: complete
+date: 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
+
+- [x] Capture six screenshots into `docs/screenshots/` via playwright-cli (mocked data)
+- [x] Replace README "What It Does" with a "Features" section embedding the screenshots
+- [x] 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