JoernStoehler UI Development Workflow
Core Loop
- Implement changes
- Start dev server in background:
npm run dev &(check output for port) - Take screenshots:
npx playwright screenshot --viewport-size=1280,720 --full-page http://localhost:PORT/path scratch/name.png - Read screenshots yourself
- Iterate 2-3 times (Anthropic guidance: first pass is good, 2-3 iterations much better)
- Commit only after visual verification
Standard Screenshots for This Project
Light and dark mode for:
- Menu page (
/) - Game page (
/game) - Post-game page (
/post-game) - Tutorial modal (first visit to
/)
Dark Mode Testing
This project uses class-based dark mode (<html class="dark">), not prefers-color-scheme.
The --color-scheme=dark flag won't work. To test dark mode, navigate and click the toggle button, or use localStorage injection.
Project-Specific Context
Stack: React 18, Vite, Tailwind CSS (class-based dark mode)
Colors: Beige/warm palette (beige-50 through beige-300), amber accents, NOT generic white/gray
Common issues:
- Modals missing
dark:variants - Focus indicators invisible in dark mode
- Components reverting to white backgrounds
Detailed Review Criteria
See references/review-criteria.md for accessibility, contrast, typography, and visual consistency checklists.