solid-syntax-components

What problem does it solve?

SolidJS components can fall into React-inspired patterns like prop destructuring or repeated access to props, which can break reactivity. This Skill guides you to write components that preserve SolidJS reactivity by enforcing proper prop access, proper handling of children, and correct component typing patterns.

Core Features & Use Cases

• Covers Component, ParentComponent, VoidComponent, and FlowComponent types and their recommended usage.
• Demonstrates reactive props handling with splitProps and mergeProps, plus safe refs and event delegation.
• Provides guidance on children resolution via the children() helper and iteration with For, plus use: directives.

Quick Start

Create a SolidJS component that reads props reactively and resolves children safely using the correct component type.