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

# Quick Task 260619-jp4 — Summary

## What was done

Added six real screenshots of the running PWA to `docs/screenshots/` and rebuilt
the README intro into a **Features** section that expands the project description,
pairing each capability with its screenshot:

| View | File | Feature |
| --- | --- | --- |
| Calendar (month) | `calendar.png` | One color-coded family calendar |
| Lists index | `lists.png` | Shared collaborative lists |
| List detail | `list-detail.png` | Live-syncing list items |
| Login | `login.png` | Single sign-on (local + Authelia OIDC) |
| Setup wizard | `setup.png` | Guided zero-setup onboarding |
| Admin | `admin.png` | Household administration |

## How

Captured with `playwright-cli` (Chromium — the box has no Google Chrome) against
the live dev stack. Demo data was injected per-browser via `playwright-cli route`
response interception — **nothing was written to the real Fastmail account**
(user chose "Mock locally"). Screens that fight the dev-bypass authed/locked
state were unlocked by mocking `/api/me`, `/api/setup/status`, and the auth/admin
endpoints. Login and Setup were reframed at a 1280×720 viewport to remove dead
vertical space; the content views at 1280×900.

## Notes / honest caveats

- The list-detail header literally reads "List", not the list name — that is the
  app's own placeholder (`apps/pwa/src/routes/ListDetail.tsx:380`, "List name not
  available without an extra fetch"), not a screenshot artifact. Left as-is rather
  than faking the real UI.
- The color-legend in the sidebar shows the current member + "Family" by design
  (`App.tsx` derives legend members from `/api/me` only); the two-person household
  is shown on the Admin members screen.

## Verification

- `pnpm exec prettier --check README.md` → "All matched files use Prettier code style!"
- `pnpm md:lint` → Summary: 0 error(s) (12 files)
- Images committed under `docs/screenshots/` (not gitignored); README references
  resolve via relative paths.