Solid Optimizer

Audit a Solid/SolidStart codebase, report what is slow or fragile and why, agree a plan with the user, then fix it. Order: evidence, approval, edits. Solid components run once and update through fine-grained signals, so most "render" optimizations do not apply; the real risks are lost reactivity, effect loops, async waterfalls, SSR/hydration choices and router cache behavior. Nothing is edited before approval.

Workflow

1. Scope (quick)

• Find the root (package.json with solid-js and/or @solidjs/start). Record: Solid major (1.9 stable; 2.0 RC is experimental), SolidStart version (2.x current; v1 uses Vinxi), router version, Vite version, Node runtime, rendering mode (SSR/prerender/SPA), deployment plugin (Nitro/Cloudflare/Netlify), and whether Solid Router query/action is used.
• Run python <skill-dir>/scripts/audit.py <project-root> -- static scan of package.json, vite.config.*, app.config.*, routes, data modules and components for legacy Vinxi/v1, lost props, effect/resource waterfalls, server-only leakage, query/action misuse and bundle risks, with file:line evidence. Use --json to post-process.
• Classify the pain: slow first load (SSR/bundle), slow navigation (query/preload/cache), slow mutations (actions), hydration/CLS, server latency, or code health/migration. Ask which hurts if unclear.
• Read references/tooling.md once: what can be measured here (vite build, vite preview, Solid DevTools, Network, Lighthouse).

2. Audit

The script finds cheap leads; you find the rest by reading. Read vite.config.*, src/routes (the hot routes), the data modules with query/action, the root app/entry files, and any component with effects or resources. Load only what applies:

Measure, never guess. Build and run the production server (vite build + vite preview, or the Nitro/Cloudflare/Netlify preview), then measure that. Dev mode and a single warm route are not evidence. Record route JS, SSR TTFB/HTML, query/action timings, hydration and LCP/CLS.

Mark each finding Confirmed (build output, network/profiler, code evidence) or Suspected (needs measuring).

3. Report

Fill assets/report-template.md, save it as SOLID_OPTIMIZATION_REPORT.md in the project root, and show the user. Five-line summary, findings table by impact/effort, then per-finding detail (evidence, why it hurts, fix, risk, behavior impact). Group near-duplicates.

4. Plan -- then stop for approval

Use plan mode: EnterPlanMode (load with ToolSearch if deferred), write the plan, present with ExitPlanMode; if unavailable show it in chat and wait for an explicit "go". Structure:

1. Quick wins -- route preload for hot data, query keys/revalidation, deferStream, For/Index corrections, props access instead of destructuring, remove effect-driven derived state, lazy-load heavy widgets, preload the LCP image/font, prerender static routes. Low risk.
2. Structural -- move fetch out of effects/components into query/action, split slow routes, stream non-critical data with Suspense, batch N+1 queries, add server-only boundaries, move session/auth into server functions, migrate middleware order. Name each behavior change.
3. Heavy -- SolidStart v1/Vinxi to v2, Vite/Nitro v3 deployment migration, Solid 2.0 RC adoption, Start mode, bundler/architecture change. Separately approved. Each step: files touched, expected effect, how to verify, how to roll back.

5. Fix

Only approved items, in small groups. After each: typecheck (tsc --noEmit), lint, tests, vite build, then the production preview/server. A break must trace to one change. Do not mix a SolidStart/Solid major upgrade with optimization edits. If a change moves auth/session/server data across the client boundary, changes SSR/prerender output, or alters a query cache key, stop and ask.

6. Verify and wrap up

Re-measure the same routes: route JS, SSR TTFB, query/action latency, navigation requests, hydration, LCP/INP/CLS. State plainly what could not be measured. End with deferred items and one suggested next step.

Principles

• Components run once. Don't hunt for re-renders; hunt for unnecessary effects, lost reactivity and expensive computations.
• Props are getters. Never destructure props; read props.x (or mergeProps/splitProps) so updates stay reactive.
• Derive with memos, not effects. Effects are for external side effects; an effect that writes state is usually a derived value.
• Data belongs in the router. query + createAsync + route.preload for reads, action for writes; resource/fetch in components creates waterfalls.
• Server code stays server. "use server", server-only, and @solidjs/start/http must not reach client components.
• Cache keys are correctness. A query name/argument change changes the cache key; revalidate the keys a mutation affects.
• Prerender what can be static. SSR/prerender first; SPA adds round trips before content.
• Ship less JavaScript. Route-level code splitting, lazy heavy widgets, per-import libraries.
• Versions move. Solid 1.9 + SolidStart 2.2 is the stable stack; Solid 2 RC and Start mode are migration projects, not drop-in tweaks.
• Docs move. Check docs.solidjs.com for the installed Solid/SolidStart version, not memory.