Template
Florian Wilde
b0c4e9e9b9
Toolchain fixes (all previously broken): - npm run lint: next lint was removed in Next 16 -> eslint with flat config - .eslintrc.json was ignored by ESLint 9 -> eslint.config.mjs - npm test / test:e2e exited 1 with no tests -> passWithNoTests - Vitest scanned tests/ and would have run Playwright specs -> scoped to src/ - Playwright targeted Mobile Safari while docs installed only chromium - reuseExistingServer silently tested a foreign server on :3000 -> E2E_PORT - 11 high-severity vulns -> npm audit fix - deny rule Read(**/.env*) also blocked .env.example -> precise patterns Stack changes: - Tailwind v3 -> v4 (CSS-first, no tailwind.config.ts, tw-animate-css) - shadcn regenerated for v4; 33 components -> 6 core, bundled radix-ui - Supabase removed entirely; data layer is now chosen per project - Vercel removed; Docker Compose self-hosting with scripts/update.sh - Better Auth + passkey plugin as the binding auth standard - ThemeProvider and Sonner mounted; dark mode and toasts now actually work Workflow system: - Sub-agents wired: /frontend, /backend, /qa delegate to .claude/agents - Checklists folded into their SKILL.md; one file per skill - Rules rewritten: DB-agnostic backend, passkey security, v4 frontend - Spec language settled as German, skill instructions English
55 lines
1.9 KiB
Markdown
55 lines
1.9 KiB
Markdown
---
|
|
paths:
|
|
- "src/components/**"
|
|
- "src/app/**/page.tsx"
|
|
- "src/app/**/layout.tsx"
|
|
- "src/hooks/**"
|
|
---
|
|
|
|
# Frontend Rules
|
|
|
|
## shadcn/ui first (mandatory)
|
|
|
|
Pre-installed: `button`, `card`, `input`, `label`, `form`, `sonner`.
|
|
|
|
Before building any UI element, check `ls src/components/ui/`. If shadcn has the
|
|
component and it is not installed yet, install it — do not hand-write it:
|
|
|
|
```bash
|
|
npx shadcn@latest add dialog table tabs --yes
|
|
```
|
|
|
|
Never write a custom Button, Input, Select, Checkbox, Switch, Dialog, Alert,
|
|
Table, Tabs, Card, Badge, Dropdown, Popover, Tooltip, Sidebar or Breadcrumb.
|
|
Custom components are only compositions of these primitives plus business logic.
|
|
|
|
## Tailwind v4
|
|
|
|
- **There is no `tailwind.config.ts`.** Theme tokens live in `src/app/globals.css`
|
|
under `@theme inline`. Add a design token there, not in a config file.
|
|
- Use semantic tokens (`bg-background`, `text-muted-foreground`, `border-border`),
|
|
not raw palette values like `bg-slate-900` — otherwise dark mode breaks.
|
|
- Tailwind classes only. No inline `style`, no CSS modules.
|
|
|
|
## Component Standards
|
|
|
|
- TypeScript interfaces for all props
|
|
- Responsive at 375px / 768px / 1440px
|
|
- Every data-driven component handles three states: loading, error, empty
|
|
- Semantic HTML and ARIA labels; keyboard reachable
|
|
- Server Components by default — add `'use client'` only when you need state,
|
|
effects or browser APIs
|
|
|
|
## Feedback and Theming
|
|
|
|
- Toasts via `sonner`: `import { toast } from 'sonner'`. The `Toaster` is already
|
|
mounted in `layout.tsx` — do not mount a second one.
|
|
- Dark mode is class-based via next-themes; never read the theme during render in
|
|
a way that differs between server and client (hydration mismatch)
|
|
|
|
## Forms
|
|
|
|
`react-hook-form` + `zod` through `@hookform/resolvers/zod`, using the shadcn
|
|
`form` component. The Zod schema is the single source of truth — the same schema
|
|
validates again on the server.
|