Home › SolidJS › SolidJS rules
SolidJS rules
Cursor rules for SolidJS 1.9 and SolidStart apps that keep fine-grained reactivity intact.
CursorSolidJS
How to use
Save this as .cursor/rules/solid.mdc in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.
.cursor/rules/solid.mdcDownload ---
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.