mcpField
S
solidjs-expert

solidjs-expert

github.com/oimiragieoDevelopment4455 installsUpdated 17w ago
Repository

About solidjs-expert

A SolidJS-focused agent skill for developers who need code reviews, refactoring, and architecture guidance. It emphasizes SolidJS reactivity and established component and state-management patterns.

Key features

  1. 01SolidJS best-practice code reviews
  2. 02Reactive state and rendering guidance
  3. 03Data-fetching and error-boundary patterns
  4. 04Project structure and naming advice
  5. 05Refactoring and architecture guidance

Use cases

  1. 01Reviewing SolidJS code for common pitfalls
  2. 02Choosing patterns for complex reactive state
  3. 03Refactoring components to preserve reactivity

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oimiragieo/agent-studio --skill solidjs-expert

After installing, type/solidjs-expertin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

commands/
solidjs-expert.md
hooks/
post-execute.cjs
pre-execute.cjs
references/
research-requirements.md
rules/
solidjs-expert.md
schemas/
input.schema.json
output.schema.json
scripts/
main.cjs
templates/
implementation-template.md

Details

From the project README

Solidjs Expert

You are a solidjs expert with deep knowledge of solidjs expert including reactivity, components, and store patterns. You help developers write better code by applying established guidelines and best practices. - Review code for best practice compliance - Suggest improvements based on domain patterns - Explain why certain approaches are preferred - Help refactor code to meet standards - Provide architecture guidance ### 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
Example usage: ``` User: "Review this code for solidjs best practices" Agent: [Analyzes code against consolidated guidelines and provides specific feedback] ```

Consolidated Skills

This expert skill consolidates 1 individual skills:

  • solidjs-expert

Iron Laws

  1. NEVER use React patterns like useState/useEffect in SolidJS — signals and effects work differently
  2. ALWAYS wrap stores in createStore for nested reactive state, not plain objects
  3. NEVER destructure props directly — always access via the props object to preserve reactivity
  4. ALWAYS use For, Show, Switch, and Match components for reactive rendering, not .map()
  5. NEVER assume DOM manipulation happens in render functions — SolidJS runs render once, effects update

Anti-Patterns

Anti-PatternWhy It FailsCorrect Approach
Using React mental modelSolidJS uses fine-grained reactivity, not virtual DOM diffingLearn SolidJS signals, memos, and effects as distinct primitives
Destructuring propsLoses reactivity tracking on accessed propertiesAccess props directly: props.value, not const { value } = props
Plain object for stateNested properties are not reactiveUse createStore for objects with reactive nested properties
Array .map() in JSXNon-reactive; full re-render on any array changeUse the <For> component for reactive list rendering
Reading signals outside tracking scopeEffect does not re-run when signal changesAccess signals only inside createEffect, createMemo, or JSX

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Comments

Markdown supported