first commit

.cursor/rules/frontend-ui.mdc

@@ -0,0 +1,18 @@
+---
+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.