# Codex Recommendations

## Main Recommendation

Ask Claude Design for a mobile-first leaderboard redesign, not a whole-app redesign. The board, splash, and victory surfaces matter, but the leaderboard should lead this pass.

Best target:

- Mobile full-screen leaderboard view on iPhone.
- Preserve current modal/card behavior on desktop or evolve it into a wider panel.
- Keep the implementation route open, but design as if leaderboard deserves its own focused surface.

## Implementation Shape To Prefer Later

1. Extract `LeaderboardContent` from `LeaderboardDialog`.
2. Add internal `range` state.
3. Wire range controls to existing `fetchLeaderboard(range)`.
4. Convert mobile CSS to full-screen dialog/view.
5. Keep desktop as card or wider panel.
6. Add focus-visible and Escape handling.
7. Add tests for range selection, refresh, account entry, error/empty/data states.

## What To Avoid

- Do not add a router just for a first visual pass unless URL sharing is explicitly chosen.
- Do not replace Framer Motion with GSAP.
- Do not import shadcn/ui visuals wholesale.
- Do not redesign score submission flow before understanding one-use session tokens.
- Do not build around player id unless the API changes.

## Verification Notes

Build passed with:

`corepack pnpm build`

Full tests failed in this environment with localStorage/jsdom/timing issues. A future implementation sprint should rerun:

`corepack pnpm vitest run`

and, if needed:

`corepack pnpm vitest run --exclude '.claude/**'`

The repo's own quick reference says to use `corepack pnpm`, not raw npm/yarn.

## Highest-Value Next Design Tasks

- Create two mobile leaderboard concepts:
  - Faithful polished overlay.
  - Full-screen premium indie puzzle leaderboard.
- Include one desktop adaptation for each.
- Include win-to-leaderboard transition notes.
- Include component and data constraints directly in the handoff.
- Make the final Claude prompt minimal and focused on visual exploration, not implementation.