denshooter
7f9d39c275
- Replace ShaderGradientBackground WebGL shader (3 static spheres) with pure CSS radial-gradient divs — moves from ClientProviders (deferred JS) to app/layout.tsx as a server component rendered in initial HTML. Eliminates @shadergradient/react, three, @react-three/fiber from the JS bundle. Removes chunks/7001 (~20s CPU eval) and the 39s main thread block. - Remove optimizeCss/critters: it was converting <link rel="stylesheet"> to a JS-deferred preload, which PageSpeed read as a 410ms sequential CSS chain. Both CSS files now load as parallel <link> tags from initial HTML (~150ms). - Update browserslist safari >= 15 → 15.4 (Array.prototype.at, Object.hasOwn are native in 15.4+; eliminates unnecessary SWC compatibility transforms). - Delete orphaned app/styles/ghostContent.css (never imported anywhere, 3.7KB). - Add .claude/ dev team setup: 5 subagents (frontend-dev, backend-dev, tester, code-reviewer, debugger), 3 skills (/add-section, /review-changes, /check-quality), 3 path-scoped rules, settings.json with auto-lint hook. - Update CLAUDE.md with server/client orchestrator pattern, SSR animation safety rules, API route conventions, and improved command reference. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
51 lines
1.8 KiB
Markdown
51 lines
1.8 KiB
Markdown
---
|
|
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)
|