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>
This commit is contained in:
39
.claude/skills/check-quality/SKILL.md
Normal file
39
.claude/skills/check-quality/SKILL.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: check-quality
|
||||
description: Run all quality checks (lint, build, tests) and report a summary of the project's health
|
||||
disable-model-invocation: false
|
||||
---
|
||||
|
||||
Run all quality checks for this portfolio project and report the results.
|
||||
|
||||
Execute these checks in order:
|
||||
|
||||
**1. ESLint**
|
||||
Run: `npm run lint`
|
||||
Required: 0 errors (warnings OK)
|
||||
|
||||
**2. TypeScript**
|
||||
Run: `npx tsc --noEmit`
|
||||
Required: 0 type errors
|
||||
|
||||
**3. Unit Tests**
|
||||
Run: `npm run test -- --passWithNoTests`
|
||||
Report: pass/fail count and any failing test names
|
||||
|
||||
**4. Production Build**
|
||||
Run: `npm run build`
|
||||
Required: successful completion
|
||||
|
||||
**5. i18n Parity Check**
|
||||
Compare keys in `messages/en.json` vs `messages/de.json` — report any keys present in one but not the other.
|
||||
|
||||
After all checks, produce a summary table:
|
||||
| Check | Status | Details |
|
||||
|-------|--------|---------|
|
||||
| ESLint | ✓/✗ | ... |
|
||||
| TypeScript | ✓/✗ | ... |
|
||||
| Tests | ✓/✗ | X passed, Y failed |
|
||||
| Build | ✓/✗ | ... |
|
||||
| i18n parity | ✓/✗ | Missing keys: ... |
|
||||
|
||||
If anything fails, provide the specific error and a recommended fix.
|
||||
Reference in New Issue
Block a user