Template

Files

T

Florian Wilde b0c4e9e9b9 refactor: rebuild template — Tailwind v4, Docker self-hosting, passkey auth

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

2026-08-09 00:48:50 +02:00

1.9 KiB

Raw Blame History

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:

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.

1.9 KiB Raw Blame History