solidjs-components

Build reusable SolidJS UI components with reactive props and control flow.

Updated Apr 21, 2026

Search Tags:#components #patterns #reactivity #props #solidjs #splitprops #mergeprops

Ready to run

npx skills add https://github.com/gregoryraymond/claude-agents-and-skills --skill solidjs-components-gregoryraymond

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: solidjs-components
Source: https://github.com/gregoryraymond/claude-agents-and-skills/tree/main/skills/solidjs-components
Command: npx skills add https://github.com/gregoryraymond/claude-agents-and-skills --skill solidjs-components-gregoryraymond

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers create reusable SolidJS UI components with correct reactive behavior, avoiding common pitfalls in props handling.

Core Features & Use Cases

Props handling and reactivity best practices: using props directly or via splitProps/mergeProps.
Control flow patterns: Show, For, Index, Switch, Match, Dynamic, Portal for building dynamic interfaces.
Composition and patterns: Headless components, render props, and forward ref usage.

Quick Start

Create a Button component that demonstrates reactive props via splitProps and mergeProps, with a simple Show/For usage for conditional rendering.

Frequently Asked Questions about solidjs-components

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

FAQPage Schema

How do I handle SolidJS props destructuring without losing reactivity?▼

To maintain reactivity in SolidJS components, avoid destructuring props directly and instead use splitProps or mergeProps to isolate reactive values while passing the remaining props forward.

What is the best way to manage component composition and refs in SolidJS?▼

The best way to manage composition in SolidJS is using headless components and render props, combined with forward ref patterns to expose underlying DOM elements to parent components.

How do I use control flow components like Show and For in SolidJS?▼

SolidJS control flow components like Show, For, Index, Switch, and Match handle dynamic interfaces reactively, while Dynamic and Portal render conditional elements outside the normal DOM tree.

When should I use splitProps versus mergeProps in SolidJS components?▼

Use splitProps to separate specific reactive props from the rest for local consumption, and use mergeProps to combine multiple prop objects into a single reactive object for downstream component passing.

Does building reusable SolidJS UI components require special event handling patterns?▼

Building reusable SolidJS UI primitives requires proper event handling patterns alongside reactive props management to ensure Button, Card, and Tabs components behave reliably across different application contexts.