skills.rest
gregoryraymond
gregoryraymondCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/gregoryraymond/claude-agents-and-skills --skill solidjs-components-gregoryraymond
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

solid-component-generator

Generate SolidJS components with TypeScript and reactive primitives.

Community
Basic
DimitriGilbertDimitriGilbert
5

opentui-solid

Integrate OpenTUI with SolidJS for reactive terminal user interfaces.

Community
Advanced
vallafedericovallafederico

solid-core-primitives

Explain SolidJS reactivity primitives including signals, effects, stores, and memos.

Community
Basic
yuhle-qugyuhle-qug

vue-expert

Diagnose Vue 3 Composition API, reactivity, and Nuxt.js integration issues.

Community
Advanced