How does this skill handle SolidJS lifecycles?

It provides standard patterns for using onMount to execute logic after DOM elements are created and onCleanup to handle resource disposal, preventing memory leaks.

Why shouldn't I destructure props in SolidJS?

Destructuring props in SolidJS breaks reactivity because it accesses the values eagerly. This skill teaches you to use the props object directly or use helpers like mergeProps and splitProps to maintain reactivity.

What is the difference between mergeProps and splitProps?

mergeProps is used to provide default values to props while maintaining reactivity, while splitProps is used to separate specific local props from those being forwarded to underlying elements.

Does it support TypeScript for SolidJS?

Yes, it includes specialized types for different component styles, including VoidComponent for elements without children and ParentComponent for elements that wrap other JSX.

SolidJS Component Architect

Name: SolidJS Component Architect
Author: IlyaGulya

byIlyaGulya

0•

Herramientas de Diseño

Generates high-performance SolidJS components with reactive-safe prop handling and optimized lifecycle management.

SolidJS Component Architect is a specialized Claude Code skill designed to help developers build efficient, reactive UI components using SolidJS best practices. It provides comprehensive guidance on avoiding common pitfalls like prop destructuring, utilizing reactive helpers like mergeProps and splitProps, and correctly implementing TypeScript types for various component patterns. Whether you are managing complex lifecycles with onMount and onCleanup or creating custom directives, this skill ensures your code adheres to SolidJS's unique 'run-once' execution model for maximum performance.

Características Principales

01Reactive-safe prop handling using mergeProps and splitProps

02Strict TypeScript definitions for Component, VoidComponent, and ParentComponent types

03Implementation patterns for custom directives and DOM ref management

04Optimized lifecycle management with onMount and onCleanup hooks

05Advanced child element resolution using the children() helper utility

060 GitHub stars

Casos de Uso

01Migrating React components to SolidJS while preserving reactivity and performance

02Building a library of reusable, type-safe UI components for a SolidJS web application

03Developing complex interactive elements that require precise DOM manipulation and event delegation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ilyagulya/claude-marketplace solidjs-components

For use in Claude.ai and ChatGPT

Download Skill