SolidJS Cursor Rules Template

---
description: "Reactivity Model"
alwaysApply: false
---
- Use createSignal() for reactive state — signals auto-track in reactive contexts.
- Use createEffect() for side effects that depend on reactive state — it auto-subscribes.
- Use createMemo() for derived values that should be cached and only recompute when dependencies change.
- Use createResource() for async data fetching with built-in Suspense integration.
- Never destructure props — use props.propertyName directly to preserve reactivity.
- Use splitProps() when you need to separate props into groups while maintaining reactivity.
- Remember that components run ONCE — the function body is not reactive; use JSX bindings for updates.

---
description: "Component Patterns"
alwaysApply: false
---
- Use camelCase for function and variable names, PascalCase for component names.
- Use    spaces for indentation.
- Use {{QUOTES}} quotes for strings.
- Use function declarations for components: export default function MyComponent(props) { ... }.
- Use <Show>, <For>, <Switch>/<Match>, and <Index> control flow components instead of JavaScript operators.
- Use <Show when={condition}> instead of {condition && <div>} for conditional rendering.
- Use <For each={list}> for list rendering with efficient keyed updates.
- Keep components focused — extract reusable logic into custom primitives (create* functions).
- Use children prop for slot-like content — it's a function in SolidJS: props.children.

---
description: "State Management"
alwaysApply: false
---
- Use createStore() for nested reactive objects and arrays — it provides fine-grained reactivity.
- Use produce() from solid-js/store for immutable-style updates to stores.
- Use createContext() and useContext() for dependency injection across the component tree.
- Keep state as close to where it's used as possible — lift only when needed.
- For global state, create a store in a separate file and export it, or use SolidJS Context.
- Use batch() to group multiple state updates into a single reactive notification.
- Use onCleanup() for cleanup in effects and lifecycle — it prevents memory leaks.