denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7f9d39c2753975e55de73644b0ccda85257c8f50
portfolio/.claude/skills/add-section/SKILL.md
denshooter 7f9d39c275
All checks were successful
CI / CD / test-build (push) Successful in 10m59s
Details
CI / CD / deploy-dev (push) Successful in 1m54s
Details
CI / CD / deploy-production (push) Has been skipped
Details
perf: eliminate Three.js/WebGL, fix render-blocking CSS, add dev team agents 
- 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>
2026-03-05 23:40:01 +01:00

1.8 KiB
Raw Blame History

name, description, context, agent
name description context agent
add-section Orchestrate adding a new CMS-managed section to the portfolio following the full 6-step pattern fork 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)