Skip to content
Cursor Rules Generator
Frontend4 sections

SolidJS Cursor Rules Template

Generate production-ready SolidJS Cursor rules for Project Rules (.mdc), AGENTS.md, or legacy .cursorrules. This template encodes stack-specific conventions for projects using SolidJS. Reactive UI library with fine-grained reactivity and no virtual DOM overhead.

What This Template Covers

The template focuses Cursor AI on concrete SolidJS practices instead of generic coding advice. Required sections are always included; optional sections can be enabled when they match your project.

Required guidance

  • - Reactivity Model
  • - Component Patterns
  • - State Management

Default style

  • - Indentation: 2 spaces
  • - Quotes: single
  • - Semicolons: enabled
  • - Naming: camelCase

Optional sections: Routing & SSR.

Example SolidJS Rules

The generator turns these sections into Project Rules with frontmatter, AGENTS.md, or a single .cursorrules file depending on the output format you choose.

Reactivity Model

- 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.

Component Patterns

- Use camelCase for function and variable names, PascalCase for component names.
- Use 2 spaces for indentation.
- Use single 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.

State Management

- 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.

Common Searches This Page Helps With

solidjs cursor rulessolid.js .cursorrulessolidjs AGENTS.md

Frequently Asked Questions

What does the SolidJS Cursor rules template include?
It includes 4 rule sections covering reactivity model, component patterns, state management and other SolidJS development conventions.
Can I generate SolidJS Project Rules and AGENTS.md from the same template?
Yes. The generator can export the same stack-specific guidance as modern Project Rules (.mdc), AGENTS.md, or a legacy .cursorrules file.
Should I combine SolidJS with other Cursor rules templates?
Yes. You can combine SolidJS with related templates such as TypeScript, Tailwind CSS, Docker, or backend frameworks when your project uses multiple technologies.

Related Cursor Rules Templates