solidjs

Implement SolidJS reactivity primitives and component patterns for React migration.

Updated Jun 15, 2025
One-click install
npx skills add https://github.com/patrickhaahr/dotfiles --skill solidjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: solidjs
Source: https://github.com/patrickhaahr/dotfiles/tree/main/opencode/.config/opencode/skills/solidjs
Command: npx skills add https://github.com/patrickhaahr/dotfiles --skill solidjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to design robust SolidJS components and migrate from React while maintaining correct reactivity and clean patterns.

Core Features & Use Cases

  • Reactivity guidance: correct use of Signals, Effects, Memos, and avoiding common pitfalls.
  • Component patterns: practical prop handling, composition, and lifecycle considerations.
  • Migration assistance: step-by-step checklist for moving React components to SolidJS, plus debugging strategies.

Quick Start

Create a new SolidJS project and implement a minimal component using createSignal, createEffect, and createMemo to observe reactive updates.

Frequently Asked Questions about solidjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use SolidJS signals and effects for reactive state management?

SolidJS signals and effects manage reactive state by tracking dependencies automatically. You create reactive roots using createSignal for state, createEffect for side effects, and createMemo to cache derived values and observe reactive updates efficiently.

What's the best way to migrate React components to SolidJS?

Migrating React components to SolidJS requires a step-by-step checklist focusing on reactivity differences. You replace React hooks with SolidJS primitives, adjust component patterns for fine-grained reactivity, and apply targeted debugging strategies to resolve lifecycle and state synchronization issues.

When do I need to use memos instead of signals in SolidJS?

You use memos in SolidJS when you need to cache and memoize derived reactive values, whereas signals store raw reactive state. Memos prevent unnecessary recalculations by only re-executing when their underlying signal dependencies actually change.

Does SolidJS reactivity work the same way as React hooks?

SolidJS reactivity differs from React hooks because it uses fine-grained dependency tracking rather than component-level re-rendering. Signals update the DOM directly without virtual DOM diffing, which requires understanding distinct component design and lifecycle patterns to avoid common pitfalls.

Why does my SolidJS component fail to update when props change?

SolidJS component update failures often stem from incorrect reactivity usage, such as destructuring props or accessing signals outside reactive scopes. Debugging involves verifying signal tracking within createEffect or createMemo and ensuring proper reactive root boundaries.

How to scaffold a new SolidJS project with a minimal component?

Scaffolding a new SolidJS project involves initializing the application structure and implementing a minimal component using createSignal, createEffect, and createMemo. This setup demonstrates core reactivity primitives and establishes the foundational reactive update observation workflow.