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:
38
.claude/rules/testing.md
Normal file
38
.claude/rules/testing.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
paths:
|
||||
- "**/__tests__/**/*.ts"
|
||||
- "**/__tests__/**/*.tsx"
|
||||
- "**/*.test.ts"
|
||||
- "**/*.test.tsx"
|
||||
- "e2e/**/*.spec.ts"
|
||||
---
|
||||
|
||||
# Testing Rules
|
||||
|
||||
## Jest environment
|
||||
- Global mocks are set up in `jest.setup.ts` — do NOT re-mock `matchMedia`, `IntersectionObserver`, or `NextResponse` in individual tests
|
||||
- Test env vars are pre-set: `DIRECTUS_URL`, `NEXT_PUBLIC_SITE_URL`
|
||||
- Always mock external API calls (Directus, n8n, PostgreSQL) — tests must work without running services
|
||||
|
||||
## ESM modules
|
||||
If a new import causes "Must use import to load ES Module" errors, add the package to `transformIgnorePatterns` in `jest.config.ts`.
|
||||
|
||||
## Server component tests
|
||||
```typescript
|
||||
// Server components return JSX, not a promise in React 19, but async ones need await
|
||||
const resolved = await MyServerComponent({ locale: 'en', ...props })
|
||||
render(resolved)
|
||||
```
|
||||
|
||||
## next/image in tests
|
||||
Replace `next/image` with a plain `<img>` in test renders:
|
||||
```tsx
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={src} alt={alt} />
|
||||
```
|
||||
|
||||
## Run commands
|
||||
- Single file: `npx jest path/to/test.tsx`
|
||||
- All unit tests: `npm run test`
|
||||
- Watch mode: `npm run test:watch`
|
||||
- Specific E2E: `npm run test:critical`, `npm run test:hydration`, `npm run test:accessibility`
|
||||
Reference in New Issue
Block a user