# Swapple Repo Design Capture For ChatGPT

This packet captures the real Swapple React SPA so ChatGPT can turn it into a final Claude Design handoff packet and one minimal Claude Design prompt.

Primary redesign focus: the leaderboard, especially on iPhone-sized mobile. The live authenticated mobile capture is the most important visual reference:

- `screenshots/08_iphone_live_leaderboard_overlay.png`

Supporting captures:

- `screenshots/01_splash.png` - local splash screen
- `screenshots/02_game_board.png` - local game board
- `screenshots/03_leaderboard_overlay.png` - local leaderboard shell with API-failed state
- `screenshots/04_victory_overlay.png` - local victory overlay after dev force-solve
- `screenshots/05_live_splash.png` - live site splash
- `screenshots/06_live_leaderboard_overlay.png` - live leaderboard at desktop/default viewport
- `screenshots/07_iphone_live_splash_or_game.png` - live site at 430 x 932 before opening leaderboard
- `screenshots/08_iphone_live_leaderboard_overlay.png` - live authenticated leaderboard at 430 x 932

The source zip was unpacked from:

`C:/Users/Corbin/Downloads/Swapple-main.zip`

Repo root inspected:

`C:/Users/Corbin/Documents/Codex/2026-05-19/files-mentioned-by-the-user-swapple/extracted/Swapple-main`

Local verification:

- `corepack pnpm install` completed.
- `corepack pnpm build` passed.
- `corepack pnpm test -- --runInBand` failed in this local environment. The visible failure pattern was mostly unavailable `localStorage` plus jsdom/browser timing noise. Treat this as an environment caveat, not a design finding.
- Plain `pnpm` was not on PATH in this shell. The repo itself instructs agents to use `corepack pnpm`.
- Vite dev server ran at `http://localhost:5173/`.

Use this packet in this order:

1. `LEADERBOARD_FINDINGS.md`
2. `CLAUDE_DESIGN_CONTEXT.md`
3. `STYLE_SYSTEM_FINDINGS.md`
4. `WIN_STATE_FINDINGS.md`
5. `DESIGN_OPPORTUNITY_NOTES.md`
6. `prompt_for_chatgpt.md`

The `source_snippets/` folder contains copied source files and relevant specs so ChatGPT/Claude can inspect real implementation details without inventing a different app.