Guide reactive component props in SolidJS to prevent reactivity bugs.
npx skills add https://github.com/adamhjk/mvtt --skill solid-props
Please help me install this Agent Skill. Skill: solid-props Source: https://github.com/adamhjk/mvtt/tree/main/.claude/skills/solid-props Command: npx skills add https://github.com/adamhjk/mvtt --skill solid-props
It addresses common pitfalls in handling component props within SolidJS, preventing reactivity issues caused by destructuring or aliasing props at component initialization.
props as a reactive proxy in SolidJS components.mergeProps, splitProps, and children to preserve reactivity.Use the solid-props skill to implement a component that merges default properties with incoming props and forwards relevant attributes to a DOM element.
High-intent search queries and answers about installing and using this skill.
Destructuring SolidJS props breaks reactivity because it removes access to the underlying reactive proxy. You must access properties directly on the props object to ensure consistent reactive updates.
To merge default props with incoming props in SolidJS, use the mergeProps utility. This preserves reactivity while applying fallback values for properties not provided by the parent component.
The splitProps utility is the best way to separate props in SolidJS. It splits the reactive props object into distinct parts, allowing you to forward specific attributes to DOM elements while retaining others.
Use the children helper utility to handle complex children props in SolidJS. It ensures that nested children remain reactive and properly memoized during component composition and rendering.
Yes, this guidance targets developers building complex UI component libraries in SolidJS. It enforces best practices for reactive prop patterns, default handling, and forwarding to maintain bug-free components.
You should avoid aliasing props at component initialization in SolidJS. Aliasing breaks the reactive proxy connection, which causes stale state and prevents consistent UI updates when prop values change.
vosslabGuide SolidJS development covering reactivity, components, routing, and React migration.
wafflebytesWire React UI primitives with contextual state using Radix-style patterns.
OpenAEC-FoundationGuide SolidJS state pattern selection with a decision-tree for signals, stores, and context.
nexxelnGuides SolidJS development on reactive primitives and component design.