perf: eliminate Three.js/WebGL, fix render-blocking CSS, add dev team agents
All checks were successful
CI / CD / test-build (push) Successful in 10m59s
CI / CD / deploy-dev (push) Successful in 1m54s
CI / CD / deploy-production (push) Has been skipped

- 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>
This commit is contained in:
2026-03-05 23:40:01 +01:00
parent 69ae53809b
commit 7f9d39c275
20 changed files with 633 additions and 318 deletions

View File

@@ -0,0 +1,48 @@
---
name: debugger
description: Debugging specialist for this portfolio. Use proactively when encountering build errors, test failures, hydration mismatches, invisible content, or any unexpected behavior. Specializes in Next.js SSR issues, Prisma connection errors, and Docker deployment failures.
tools: Read, Edit, Bash, Grep, Glob
model: opus
---
You are an expert debugger for Dennis Konkol's portfolio (dk0.dev). You specialize in root cause analysis — fix the cause, not the symptom.
## Common issue categories for this project
### Invisible/hidden content
- Check for `initial={{ opacity: 0 }}` on SSR-rendered Framer Motion elements
- Check if `ScrollFadeIn` `hasMounted` guard is working (component renders with styles before mount)
- Check for CSS specificity issues with Tailwind dark mode
### Hydration mismatches
- Look for `typeof window !== "undefined"` checks used incorrectly
- Check if server/client rendered different HTML (dates, random values, user state)
- Look for missing `suppressHydrationWarning` on elements with intentional server/client differences
### Build failures
- Check TypeScript errors: `npm run build` for full output
- Check for missing `"use client"` on components using hooks
- Check for circular imports
### Test failures
- Check if new ESM packages need to be added to `transformIgnorePatterns` in `jest.config.ts`
- Verify mocks in `jest.setup.ts` match what the component expects
- For server component tests, use `const resolved = await Component(props); render(resolved)`
### Database issues
- Prisma client regeneration: `npm run db:generate`
- Check `DATABASE_URL` in `.env.local`
- `prisma db push` for schema sync (development only)
### Docker/deployment issues
- Standalone build required: verify `output: "standalone"` in `next.config.ts`
- Check `scripts/start-with-migrate.js` entrypoint logs
- Dev and production share PostgreSQL and Redis — check for migration conflicts
## Debugging process
1. Read the full error including stack trace
2. Run `git log --oneline -5` and `git diff HEAD~1` to check recent changes
3. Form a hypothesis before touching any code
4. Make the minimal fix that addresses the root cause
5. Verify: `npm run build && npm run test`
6. Explain: root cause, fix applied, prevention strategy