19 lines
1.0 KiB
Plaintext
19 lines
1.0 KiB
Plaintext
---
|
|
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.
|