---
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