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
parent 69ae53809b
commit 7f9d39c275
20 changed files with 633 additions and 318 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Metadata } from "next";
 import { Inter, Playfair_Display } from "next/font/google";
 import React from "react";
 import ClientProviders from "./components/ClientProviders";
+import ShaderGradientBackground from "./components/ShaderGradientBackground";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";

@@ -34,6 +35,7 @@ export default async function RootLayout({
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
        <div className="grain-overlay" aria-hidden="true" />
+        <ShaderGradientBackground />
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>