Is innerHTML recommended in SolidJS?

innerHTML should be used sparingly and only with sanitized, trusted content to avoid security vulnerabilities like XSS. For simple text updates, textContent is the safer and preferred alternative.

When should I use prop:* instead of standard attributes?

You should use the prop:* prefix when you need to set a DOM property directly on an element (like scrollTop) rather than setting an HTML attribute, which is often required for specific browser APIs.

What is the @once directive in SolidJS used for?

The @once directive is a compiler optimization that prevents SolidJS from creating a reactive wrapper for a value, which is ideal for data that never changes and reduces runtime overhead.

How do I handle Web Components in SolidJS JSX?

SolidJS provides attr:*, bool:*, and prop:* prefixes to explicitly define how a value should be passed to a custom element, ensuring compatibility with Web Component attributes and properties.

SolidJS Advanced JSX Attributes

Name: SolidJS Advanced JSX Attributes
Author: vallafederico

byvallafederico

0•

Design Tools

Optimizes SolidJS performance and Web Component integration using specialized JSX attributes and compiler directives.

This skill provides Claude with the specialized knowledge required to implement advanced JSX patterns in SolidJS applications. It covers essential performance optimizations like the @once compiler directive to reduce reactive overhead, as well as critical integration patterns for Web Components using attr:*, bool:*, and prop:* prefixes. By utilizing this skill, developers can ensure their SolidJS code is highly performant, type-safe, and capable of handling complex DOM interactions and direct content manipulation through textContent or innerHTML with established best practices.

Key Features

01Provides patterns for Web Component attribute and property binding

02Ensures secure implementation of innerHTML for raw HTML rendering

03Guides the use of textContent for efficient text node replacement

04Facilitates TypeScript integration for custom JSX attributes

05Implements @once compiler directives for static value optimization

060 GitHub stars

Use Cases

01Optimizing rendering performance in large-scale SolidJS applications

02Integrating third-party Web Components into a SolidJS project

03Directly manipulating DOM properties like scrollTop or custom element states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vallafederico/solid-ai-rules solid-core-jsx-attributes

For use in Claude.ai and ChatGPT

Download Skill