---
name: add-section
description: Orchestrate adding a new CMS-managed section to the portfolio following the full 6-step pattern
context: fork
agent: general-purpose
---

Add a new CMS-managed section called "$ARGUMENTS" to the portfolio.

Follow the exact 6-step pattern from CLAUDE.md:

**Step 1 — lib/directus.ts**
Read `lib/directus.ts` first, then add:
- TypeScript interface for the new collection
- `directusRequest()` GraphQL query for the collection (with translation support if needed)
- Export the fetch function

**Step 2 — API Route**
Create `app/api/$ARGUMENTS/route.ts`:
- `export const runtime = 'nodejs'`
- `export const dynamic = 'force-dynamic'`
- Try Directus first, fallback to hardcoded defaults
- Include `source: "directus" | "fallback" | "error"` in response
- Error logging behind `process.env.NODE_ENV === "development"` guard

**Step 3 — Component**
Create `app/components/$ARGUMENTS.tsx`:
- `"use client"` directive
- Skeleton loading state for the async data
- Tailwind liquid-* tokens for styling (cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15 backdrop-blur-sm border-2 rounded-xl`)
- Headline uppercase with tracking-tighter and emerald accent dot

**Step 4 — i18n**
Add translation keys to both:
- `messages/en.json`
- `messages/de.json`

**Step 5 — Client Wrapper**
Add `${ARGUMENTS}Client` to `app/components/ClientWrappers.tsx`:
- Wrap in scoped `NextIntlClientProvider` with only the needed translation namespace

**Step 6 — Homepage Integration**
Add to `app/_ui/HomePageServer.tsx`:
- Fetch translations in the existing `Promise.all`
- Render wrapped in `<ScrollFadeIn>`

After implementation:
- Run `npm run lint` — must be 0 errors
- Run `npm run build` — must compile successfully
- Report what was created and any manual steps remaining (e.g., creating the Directus collection)