# Kazzle template context

This app was created from the `ui` template. It is a frontend-only React and Vite app.

Template-owned setup:
- `kazzle.config.ts` declares one UI component.
- `components/ui/package.json` already contains the Vite dev, build, typecheck, and check scripts.
- `components/ui/src/main.tsx` and `components/ui/src/App.tsx` are the base UI entrypoint. `main.tsx` imports the design system once via `src/styles/theme.css`.

Styling — this is mandatory, not a suggestion:
- The design system is `src/styles/theme.css`. It already imports Tailwind v4 (`@import "tailwindcss"`) so EVERY Tailwind utility class works in `className`, plus ready-made primitives (`.page`, `.stack`, `.row`, `.card`, `.btn`, `.btn-primary`, `.input`, `.field`, `.muted`) and design tokens.
- Style ONLY two ways: Tailwind utility classes in `className` (e.g. `className="flex items-center gap-4 rounded-xl"`), and/or the primitives above. Mix freely.
- NEVER invent semantic class names (`app-shell`, `hero`, `stats-grid`, `listing-grid`, …) and NEVER add a separate per-screen stylesheet keyed to class names. Those classes have no CSS behind them, so the app renders with no layout. If a pattern repeats, add a primitive under `@layer components` in `theme.css` — do not create a new CSS file.
- To re-skin, edit the `@theme` tokens in `theme.css`. Do not create `App.css` or any other stylesheet.

Do not add a server component, database wiring, or secret env refs unless the user's requirements need backend behavior. For ordinary Postgres persistence, use the `ui-db` template instead of converting this app by hand.