solid-ai-rules

SolidJS advanced components: SuspenseList for coordinating multiple Suspense boundaries, NoHydration for skipping hydration of static content.

SolidJS advanced utilities: createRoot for manual disposal, createUniqueId for SSR-safe IDs, useTransition for batching async updates, observable for RxJS interop, modifyMutable for batch updates.

SolidJS control flow: Show for conditionals, Switch/Match for multiple conditions, For/Index for lists, Dynamic for dynamic components, Suspense for async data.

SolidJS advanced JSX attributes: @once for static values, attr:*/bool:*/prop:* for Web Components, textContent for text nodes, innerHTML for raw HTML.

SolidJS lifecycle: onMount for DOM access after mount, onCleanup for resource disposal, effect lifecycle management, component vs effect cleanup.

Core SolidJS primitives: signals use getter functions count(), components run once (no re-renders), effects track automatically, stores use direct property access, memos for computed values. Fine-grained reactivity means targeted DOM updates.

SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.

SolidJS rendering and SSR: render() for client, hydrate() for SSR hydration, renderToString/renderToStream for server rendering, isServer check.

SolidJS secondary primitives: createComputed for immediate sync, createDeferred for idle updates, createReaction for one-time tracking, createRenderEffect for DOM operations, createSelector for optimized equality.

SolidJS stores: createStore for complex state, direct property access, path syntax for updates, produce for immutable mutations, reconcile for diffing, createMutable for proxy-based stores, unwrap for raw data.

SolidJS utilities: Context API, props manipulation (mergeProps/splitProps), JSX attributes (class/classList, events, refs), lifecycle (onMount/onCleanup), reactive utilities (batch/untrack/startTransition), store utilities.

SolidStart deployment: build process, platform-specific configs, environment variables, SSR vs SPA deployment, edge deployment, Vercel, Netlify, Cloudflare, AWS.

Solid Meta patterns: wrap app with MetaProvider, use Title/Meta/Link components for head tags, useHead for custom tags. Meta tags with same name/property override each other.

Solid reactivity safety: never destructure signals/stores/props, use getters and splitProps, keep render pure, use stable keys, and use children()/mergeProps for safe access.

Solid Router actions: action() for mutations, useAction for programmatic calls, useSubmission/useSubmissions for tracking state, form submissions with FormData.

Solid Router advanced: preloading routes, streaming with Suspense, revalidation (automatic/manual), layouts, response helpers (json/redirect/reload), protected routes.

Solid Router alternative routers: HashRouter for hash-based URLs, MemoryRouter for testing and in-memory navigation.

Solid Router components: A for links, Route for route config, Router for setup, Navigate for redirects, active states, soft navigation.

Solid Router data APIs: query for caching/deduplication, createAsync for reactive promises, createAsyncStore for store-based async, revalidate for cache invalidation.

Solid Router navigation: use <A> component for links with activeClass, useNavigate for programmatic navigation, useParams/useSearchParams for route params, redirect for server-side navigation.

Solid Router preloading: preload function for routes, usePreloadRoute hook, hover/focus intent detection, lazy component preloading, performance optimization.

Solid Router queries: query() for data fetching with caching/deduplication, createAsync() for reactive signals, createAsyncStore() for fine-grained reactivity, query keys for revalidation.

SolidStart security: XSS prevention, CSP headers, CORS configuration, CSRF protection, input validation, server-side validation, environment variable security.

SolidStart service workers: registration, caching strategies, offline support, background sync, PWA features.

SolidJS styling: CSS Modules, Tailwind, Sass, Less, CSS-in-JS, global styles, component-scoped styles, class and style bindings.

SolidJS terminology standards: use 'primitive' not 'hook', 'reactive value' not just 'signal', 'computation' not 'computed'. Use 'Solid' not 'SolidJS' internally.

SolidJS testing patterns: use Vitest with @solidjs/testing-library, createRoot for cleanup, render components with function syntax, test user interactions and async behavior.

SolidStart advanced server: getRequestEvent for request context, static assets handling, returning responses, request events and nativeEvent access.

SolidStart API routes: export GET/POST/PATCH/DELETE functions, handle APIEvent with request/params/fetch, GraphQL and tRPC integration, session management.

SolidStart clientOnly: render components/pages exclusively on client, bypass SSR for browser APIs (window, document), dynamic imports with fallbacks.

SolidStart configuration: app.config.ts with defineConfig, deployment presets (Netlify/Vercel/Cloudflare/etc.), prerendering/SSG, Vite plugins, experimental features.

SolidStart data mutation: form submissions with actions, validation, error handling, pending states, optimistic UI, redirects, database operations, programmatic triggers.

SolidStart entrypoints: app.tsx for isomorphic root, entry-client.tsx for browser initialization, entry-server.tsx for SSR setup, app.config.ts for build configuration.

SolidStart environment variables: VITE_ prefix for public variables, process.env for server-only, .env files, type safety with env.d.ts, runtime vs build-time variables.

SolidStart hydration guard: keep SSR/CSR output identical, gate browser-only APIs, use stable IDs, align Suspense/resource fallbacks, and use clientOnly/onMount for client-only UI.

SolidStart middleware, sessions, authentication: createMiddleware with onRequest/onBeforeResponse, useSession for cookies, protected routes, WebSocket endpoints.

SolidStart optimistic UI: use useSubmissions to show pending data immediately, combine server data with pending submissions, filter by pending state, handle rollback on errors.

SolidStart request events: getRequestEvent for server context, event.locals for typed data, nativeEvent for Vinxi access, request handling.

SolidStart file-based routing: routes directory structure, dynamic routes, nested layouts, route groups, app.tsx setup with FileRoutes component.

SolidStart server functions: 'use server' directive (function/file level), use with queries/actions, single-flight mutations, secure database access.