solidjs-solidstart-mastery-skill_skill

Overview

This skill provides expert-level SolidJS and SolidStart guidance from a senior/lead-engineer perspective. It focuses on building production-ready, scalable web apps using fine-grained reactivity, TypeScript, SSR/SSG, and performance-first patterns. Use it for architecture, integrations (TanStack Query/Router/Table/Form), debugging reactivity, and deployment workflows.

How this skill works

I inspect your app goals and recommend whether SolidStart or vanilla Solid is appropriate, then scaffold a production-ready structure, wiring routing, API routes, and server actions. I provide concrete patterns for signals, stores, resources, TanStack integrations, forms, tables, SSR/SSG/streaming, error boundaries, and deployment optimizations. I also surface anti-patterns, memory-leak fixes, and type-safe strategies tailored to your codebase.

When to use it

• Starting a new SolidStart app or choosing between SPA vs SSR
• Implementing TanStack Query/Router/Table/Form integrations
• Building fine-grained reactive components with signals, stores, resources
• Debugging reactivity issues, memory leaks, or hydration problems
• Optimizing bundle size, lazy-loading, and runtime performance

Best practices

• Prefer SolidStart for most apps; use vanilla Solid for widgets or micro-frontends
• Favor primitive signals and createMemo for derived state; keep effects for side effects only
• Type everything with TypeScript and use Zod for validator schemas
• Use createStore + produce/reconcile for complex nested state and path updates
• Use Suspense + ErrorBoundary for async UI; prefer resources with initialValue for SSR
• Avoid recreating objects/handlers in render; pass signals or stable callbacks

Example use cases

• Scaffold a SolidStart app with TypeScript, Tailwind, and SSR-friendly routes
• Connect TanStack Query for cached server state with optimistic updates and mutations
• Build a performant data table with @tanstack/solid-table and server-side pagination
• Implement a type-safe form flow using @tanstack/solid-form + Zod and handle submit actions on the server
• Diagnose reactivity loss from prop destructuring, memory leaks from unmanaged subscriptions, or hydration mismatches