perf: lazy-load xlsx/recharts, split estimate tabs, memoize nav

- xlsx dynamically imported via cached singleton in excel.ts and
  skillMatrixParser.ts (removes ~100 kB from 4 routes)
- recharts extracted into lazy-loaded SkillDistributionChart and
  PeakTimesChart components (removes ~60 kB from 3 routes)
- EstimateWorkspaceClient: 7 tab components + 2 editors loaded via
  next/dynamic (reduces /estimates/[id] from 323 kB to 138 kB)
- ImportModal lazy-loaded in ResourcesClient (deferred until open)
- NavItem memoized with React.memo, top 5 routes get prefetch=true
- Raw <img> replaced with next/image in ProjectsClient, CoverArtSection
- tRPC QueryClient: refetchOnWindowFocus/Reconnect disabled globally

Heaviest routes reduced 39-66% First Load JS:
  /analytics/skills: 383→132 kB (-66%)
  /estimates/[id]:   323→138 kB (-57%)
  /resources/[id]:   458→210 kB (-54%)
  /estimates:        310→170 kB (-45%)
  /resources:        363→222 kB (-39%)

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/components/analytics/SkillDistributionChart.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from "recharts";
+
+// SVG fill colors for the bar chart (work in both light and dark contexts)
+const PROFICIENCY_SVG_COLORS = ["#9ca3af", "#60a5fa", "#818cf8", "#f59e0b", "#4ade80"];
+
+interface SkillDistributionChartProps {
+  data: { skill: string; count: number; avgProficiency: number }[];
+}
+
+export default function SkillDistributionChart({ data }: SkillDistributionChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={320}>
+      <BarChart data={data} layout="vertical" margin={{ left: 160, right: 20, top: 0, bottom: 0 }}>
+        <XAxis type="number" tick={{ fontSize: 11 }} />
+        <YAxis type="category" dataKey="skill" tick={{ fontSize: 11 }} width={155} />
+        <Tooltip
+          formatter={(value: number | undefined) => [`${value ?? 0} resources`, "Count"] as [string, string]}
+          contentStyle={{ fontSize: 12, borderRadius: 8 }}
+        />
+        <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+          {data.map((entry) => (
+            <Cell key={entry.skill} fill={PROFICIENCY_SVG_COLORS[Math.max(0, Math.min(4, Math.round(entry.avgProficiency) - 1))] ?? "#6b7280"} strokeWidth={0} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

apps/web/src/components/analytics/SkillsAnalytics.tsx

@@ -1,24 +1,18 @@
 "use client";
 
 import { useState, useId } from "react";
+import dynamic from "next/dynamic";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Cell,
-} from "recharts";
 import { trpc } from "~/lib/trpc/client.js";
 import * as XLSX from "xlsx";
 
-const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
+const SkillDistributionChart = dynamic(
+  () => import("~/components/analytics/SkillDistributionChart.js"),
+  { ssr: false, loading: () => <div className="h-80 shimmer-skeleton rounded-xl" /> },
+);
 
-// SVG fill colors for the bar chart (work in both light and dark contexts)
-const PROFICIENCY_SVG_COLORS = ["#9ca3af", "#60a5fa", "#818cf8", "#f59e0b", "#4ade80"];
+const PROFICIENCY_LABELS = ["", "Aware", "Basic", "Intermediate", "Advanced", "Expert"];
 
 // Tailwind class sets per proficiency level (1–5), dark-mode aware
 const PROFICIENCY_CLASSES = [
@@ -87,8 +81,9 @@ export function SkillsAnalytics() {
     setRules((prev) => prev.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
   }
 
-  function exportXlsx() {
+  async function exportXlsx() {
     if (!data) return;
+    const XLSX = await import("xlsx");
     const rows = data.aggregated.map((e) => ({
       Skill: e.skill,
       Category: e.category,
@@ -413,21 +408,7 @@ export function SkillsAnalytics() {
       {top20.length > 0 && (
         <div className="bg-white rounded-xl border border-gray-200 p-5">
           <h2 className="text-sm font-semibold text-gray-800 mb-4">Top Skills by Resource Count</h2>
-          <ResponsiveContainer width="100%" height={320}>
-            <BarChart data={top20} layout="vertical" margin={{ left: 160, right: 20, top: 0, bottom: 0 }}>
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis type="category" dataKey="skill" tick={{ fontSize: 11 }} width={155} />
-              <Tooltip
-                formatter={(value: number | undefined) => [`${value ?? 0} resources`, "Count"] as [string, string]}
-                contentStyle={{ fontSize: 12, borderRadius: 8 }}
-              />
-              <Bar dataKey="count" radius={[0, 4, 4, 0]}>
-                {top20.map((entry) => (
-                  <Cell key={entry.skill} fill={PROFICIENCY_SVG_COLORS[Math.max(0, Math.min(4, Math.round(entry.avgProficiency) - 1))] ?? "#6b7280"} strokeWidth={0} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
+          <SkillDistributionChart data={top20} />
           <p className="text-xs text-gray-400 mt-2">Bar color = average proficiency (light → dark = low → high)</p>
         </div>
       )}