Solidjs Expert
solidjs complex state management
When reviewing or writing code, apply these guidelines:
- Utilize createStore() for complex state management.
solidjs conditional and list rendering
When reviewing or writing code, apply these guidelines:
- Implement Show and For components for conditional and list rendering.
solidjs data fetching
When reviewing or writing code, apply these guidelines:
- Use createResource() for data fetching.
solidjs derived values management
When reviewing or writing code, apply these guidelines:
- Implement createMemo() for derived values.
solidjs error boundaries
When reviewing or writing code, apply these guidelines:
- Implement proper error boundaries
solidjs folder structure
When reviewing or writing code, apply these guidelines:
- Use the following folder structure: src/ components/ pages/ styles/ App.jsx index.jsx
solidjs functional components
When reviewing or writing code, apply these guidelines:
- Always use functional components in SolidJS.
solidjs functional components preference
When reviewing or writing code, apply these guidelines:
- Always use functional components instead of class components.
solidjs jsx templates
When reviewing or writing code, apply these guidelines:
- Use JSX for component templates
solidjs lazy loading
When reviewing or writing code, apply these guidelines:
- Implement lazy-loading for improved performance
solidjs naming conventions
When reviewing or writing code, apply these guidelines:
- Follow Solid.js naming conventions and best practices
solidjs optimization features
When reviewing or writing code, apply these guidelines:
- Use Solid's built-in optimization features
solidjs project folder structure
When reviewing or writing code, apply these guidelines:
- Enforce the following folder structure: src/ components/ pages/ utils/ types/ App.tsx index.tsx
solidjs reactive primitives
When reviewing or writing code, apply these guidelines:
- Use createSignal() for simple reactive state
- Use createEffect() for side effects that depend on reactive state
- Leverage fine-grained reactivity — avoid unnecessary re-renders
Consolidated Skills
This expert skill consolidates 1 individual skills:
- solidjs-expert
Iron Laws
- NEVER use React patterns like
useState/useEffectin SolidJS — signals and effects work differently - ALWAYS wrap stores in
createStorefor nested reactive state, not plain objects - NEVER destructure props directly — always access via the props object to preserve reactivity
- ALWAYS use
For,Show,Switch, andMatchcomponents for reactive rendering, not.map() - NEVER assume DOM manipulation happens in render functions — SolidJS runs render once, effects update
Anti-Patterns
| Anti-Pattern | Why It Fails | Correct Approach |
|---|---|---|
| Using React mental model | SolidJS uses fine-grained reactivity, not virtual DOM diffing | Learn SolidJS signals, memos, and effects as distinct primitives |
| Destructuring props | Loses reactivity tracking on accessed properties | Access props directly: props.value, not const {value} = props |
| Plain object for state | Nested properties are not reactive | Use createStore for objects with reactive nested properties |
Array .map() in JSX | Non-reactive; full re-render on any array change | Use the <For> component for reactive list rendering |
| Reading signals outside tracking scope | Effect does not re-run when signal changes | Access signals only inside createEffect, createMemo, or JSX |
Memory Protocol (MANDATORY)
Before starting:
cat .claude/context/memory/learnings.mdAfter completing: Record any new patterns or exceptions discovered.
ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.