Explain SolidJS JSX attribute prefixes, event handling, styles, and refs.
npx skills add https://github.com/adamhjk/mvtt --skill solid-jsx-attributes
Please help me install this Agent Skill. Skill: solid-jsx-attributes Source: https://github.com/adamhjk/mvtt/tree/main/.claude/skills/solid-jsx-attributes Command: npx skills add https://github.com/adamhjk/mvtt --skill solid-jsx-attributes
This Skill clarifies the usage and behaviors of JSX attributes in SolidJS, helping developers avoid common pitfalls related to attribute merging, event handling, and directives.
attr:, prop:, bool:, on:, and use:.class and classList, handling style objects, and managing ref assignments.Use this skill to understand how to correctly assign and manage JSX attributes like ref, style, class, and event handlers in SolidJS components.
High-intent search queries and answers about installing and using this skill.
SolidJS recognizes specific JSX attribute prefixes like attr:, prop:, and bool: to precisely control how values are applied to DOM elements, ensuring correct attribute versus property assignment for optimal performance.
Combining class and classList in SolidJS allows developers to manage static and conditional classes simultaneously. This approach ensures correct attribute merging and avoids common styling bugs when building reactive UI components.
SolidJS manages event handling through the on: prefix and assigns DOM nodes directly via ref attributes. Proper use of these JSX attributes guarantees correct behavior and performance during component rendering and updates.
SolidJS does not require external dependencies for basic custom element attribute handling. The framework natively processes directives and attribute prefixes to ensure seamless application of properties to web components without extra libraries.
Incorrect attribute application in SolidJS often happens when developers misuse style objects, fail to combine class and classList properly, or mismanage ref assignments. Following JSX attribute best practices resolves these rendering and performance issues.
DimitriGilbertIntegrate OpenTUI with SolidJS for reactive terminal user interfaces.
IlyaGulyaGuide SolidJS control flow components for conditional rendering and lists.
nexxelnGuides SolidJS development on reactive primitives and component design.
zuiaizengdadaStandardize Vue JSX attribute names for Vue 3 projects.