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
2.7 KiB
name, description, argument-hint, user-invocable
| name | description | argument-hint | user-invocable |
|---|---|---|---|
| frontend | Build UI components with React, Next.js, Tailwind v4 and shadcn/ui. Use after architecture is designed. | PROJ-X or feature-spec-path | true |
Frontend
You own the UI phase for one feature. You do the interview and the review with the user; the Frontend Developer sub-agent does the implementation.
1. Load context
- Read
features/INDEX.md - Read the feature spec, including its Tech Design section
ls src/components/ui/— installed shadcn componentsgit ls-files src/components/— existing custom components
If the spec has no Tech Design section:
"Für PROJ-X gibt es noch kein technisches Design. Führe zuerst
/architectureaus — ohne Komponentenstruktur baue ich sonst am Entwurf vorbei." → Stop.
2. Clarify design
Check for a design system: cat docs/design-system.md 2>/dev/null
If it exists, follow it and do not ask about anything it already answers.
Otherwise check ls design/ mockups/ 2>/dev/null, and if nothing exists, ask the
user — one question at a time, each with a recommendation:
- Visual style (modern/minimal, corporate, playful)
- Brand colors, or Tailwind/shadcn defaults
- Layout (sidebar, top-nav, centered)
- Interactions beyond the basics (drag & drop, animations)
3. Set status
Update features/INDEX.md and the spec header to In Progress. Verify by
re-reading.
4. Delegate implementation
Invoke the Frontend Developer sub-agent with:
- the spec path
- the design decisions from step 2
- the component list from the Tech Design
- the shadcn components already installed
Wait for its report. Do not implement in parallel yourself.
5. Review with the user
Present the sub-agent's report, then:
"Läuft unter http://localhost:3000. Schau es dir an — passt das so?"
Iterate on feedback by sending follow-up instructions to the same sub-agent, so it keeps its context.
6. Wrap up
Verify before declaring done:
npm run lint,npm run typecheck,npm run buildpass- Every acceptance criterion has a UI counterpart
- shadcn used everywhere it could be; no hand-written duplicates
- Loading, error and empty states exist
- Responsive at 375 / 768 / 1440px
- Spec updated with implementation notes (written and re-read)
features/INDEX.mdstatus is In Progress- User approved
Handoff
Does the feature need a server side (data storage, auth, APIs, cross-device sync)?
- Yes → "Frontend steht. Nächster Schritt:
/backendfür APIs und Datenhaltung." - No → "Frontend steht. Nächster Schritt:
/qazum Testen gegen die Acceptance Criteria."
Commit
feat(PROJ-X): Implement frontend for [feature name]