---
description: SolidJS conventions
globs: ["src/**/*.{ts,tsx,jsx}"]
alwaysApply: false
---

# SolidJS

Solid is not React. Components run once; signals drive updates.

- State: `createSignal`, derived values as plain functions or `createMemo`, nested state with `createStore` + `produce`/`reconcile`.
- Never destructure props; read `props.x` or use `splitProps`/`mergeProps` so reactivity is kept.
- Read signals by calling them (`count()`) inside JSX or tracked scopes. Reading outside a tracked scope makes them static.
- Control flow: `<Show>`, `<For>` (by reference), `<Index>` (by index), `<Switch>/<Match>`. Don't use `array.map` for lists that change.
- Async data: `createResource`, or in SolidStart `query()` + `createAsync()`; mutations with `action()`.
- Side effects in `createEffect`; cleanup with `onCleanup`. DOM setup in `onMount`.
- Use `class` (not `className`) and `on:` / `onClick` handlers as the codebase already does.

## Don't
- Don't import from `react`, or add `useState`/`useEffect` patterns.
- Don't wrap everything in `createMemo`; plain derived functions are fine.

## Done when
`npm run typecheck`, `npx vitest run`, and `npm run build` pass.