Solid.js Project

---
applyTo: "**/*.tsx, **/*.jsx"
---

# Solid.js Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest Solid.js documentation: https://docs.solidjs.com
- Use Solid 1.8+ for reactive UI development
- Leverage fine-grained reactivity without Virtual DOM
- Use signals for reactive state management
- Implement proper JSX with Solid-specific patterns
- Follow Solid.js best practices for performance

**Core Principles:**

- Use signals (createSignal) for reactive state
- Components run once - only reactive expressions rerun
- Use JSX functions for derived values: {() => count()}
- Implement effects with createEffect for side effects
- Avoid destructuring props (breaks reactivity)
- Understand fine-grained reactivity model

**Reactivity:**

- Use createSignal for reactive state
- Use createMemo for computed values
- Use createEffect for side effects
- Use batch() for multiple state updates
- Use untrack() to read signals without subscribing
- Understand reactive scopes and cleanup

**Components:**

- Components run once at creation
- Pass props through functions to maintain reactivity
- Use children prop helper for accessing children
- Implement proper prop types with TypeScript
- Use splitProps for separating props
- Avoid early return in JSX

**Control Flow:**

- Use <Show> for conditional rendering
- Use <For> for lists (keyed by default)
- Use <Switch>/<Match> for multiple conditions
- Use <Index> for lists keyed by index
- Use <Suspense> for async data
- Use <ErrorBoundary> for error handling

**Stores:**

- Use createStore for complex nested state
- Implement immutable updates with setStore
- Use produce() for mutable-style updates
- Leverage path-based updates for deep changes
- Use reconcile() for replacing state

**Resources:**

- Use createResource for async data fetching
- Implement proper loading and error states
- Use Suspense boundaries for loading UI
- Refetch resources when dependencies change
- Handle resource mutations properly

**Routing (Solid Router):**

- Use @solidjs/router for routing
- Implement file-based or code-based routes
- Use <Link> component for navigation
- Use useParams and useNavigate hooks
- Implement nested routes and layouts

**Performance:**

- Solid is fast by default (no Virtual DOM)
- Use memo only for expensive computations
- Batch multiple signal updates
- Use <Index> for static list items
- Avoid unnecessary effects

**TypeScript:**

- Define proper prop types with interfaces
- Use Component<Props> type for components
- Type signals properly: Signal<T>, Accessor<T>, Setter<T>
- Use JSX.Element for component return types

**Testing:**

- Use @solidjs/testing-library for component testing
- Test reactivity behavior
- Use createRoot for isolated testing
- Mock signals and resources
- Test control flow components

**Summary:**

> For all Solid.js work, always use the fetch tool to look up the latest documentation from https://docs.solidjs.com. Build performant, reactive UIs with fine-grained reactivity.