---
description: Frontend and UI rules for Mixmaker
globs: frontend/**/*.{ts,tsx,css}
alwaysApply: false
---

# Frontend And UI

- Build mobile-first screens first, then scale up to desktop.
- Use React, TypeScript, Vite, TanStack Router, TanStack Query, Tailwind CSS, shadcn/ui, and accessible primitives.
- Organize code by product capabilities; keep reusable primitives in `shared`.
- Keep the live match screen focused: show the current step, active team, allowed actions, score, and concise validation feedback.
- Use orange and blue team accents on a dark graphite base, with accessible contrast and non-color status indicators.
- Make touch targets large and keep the primary action reachable on phones.
- Treat server state as authoritative; use optimistic updates only when rollback is clear and safe.
- Keep API access behind typed client functions generated from or aligned with OpenAPI.
- Prefer subtle motion that communicates state changes; respect reduced-motion preferences.
- Do not encode map pools, hero catalogs, or draft rules directly in UI components.