---
name: frontend
description: Build UI components with React, Next.js, Tailwind v4 and shadcn/ui. Use after architecture is designed.
argument-hint: "PROJ-X or feature-spec-path"
user-invocable: 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

1. Read `features/INDEX.md`
2. Read the feature spec, including its Tech Design section
3. `ls src/components/ui/` — installed shadcn components
4. `git 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 `/architecture` aus —
> 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 build` pass
- [ ] 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.md` status 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: `/backend` für APIs und Datenhaltung."
- No → "Frontend steht. Nächster Schritt: `/qa` zum Testen gegen die Acceptance Criteria."

## Commit

```
feat(PROJ-X): Implement frontend for [feature name]
```