Does this skill support Server-Side Rendering (SSR)?

Yes, it includes rules for guarding browser-specific APIs with isServer or onMount, ensuring your code doesn't crash in environments where 'window' or 'document' are unavailable.

Why can't I destructure props in SolidJS?

Destructuring props in SolidJS breaks reactivity because the framework tracks access through property getters. Once you destructure a value, it becomes a static reference that no longer responds to changes in the source.

How does this skill help with performance?

It ensures you use stable keys in loops and avoids expensive re-computations by enforcing the use of createMemo and keeping render bodies pure, preventing unnecessary DOM operations.

What are the recommended alternatives to spreading props?

The skill recommends using mergeProps for providing default values and splitProps when you need to separate specific properties from the rest of the prop object without losing reactivity.

SolidJS Reactivity Safety

Name: SolidJS Reactivity Safety
Author: vallafederico

byvallafederico

0•

개발자 도구

Enforces best practices for SolidJS reactivity to prevent broken tracking and ensure performant component updates.

This skill equips Claude with specialized knowledge for building robust SolidJS applications by focusing on the framework's unique reactivity model. It prevents common bugs like reactivity loss caused by destructuring props or signals, and enforces the use of dedicated utilities like splitProps and mergeProps. By guiding the developer toward pure render bodies, stable list keys, and proper SSR guards, this skill ensures that SolidJS projects remain performant, predictable, and maintainable.

주요 기능

01Prevents reactivity loss by enforcing signal and store access through getters

02Ensures render functions remain pure and free of side effects

03Guides the correct implementation of splitProps and mergeProps for reactive prop handling

04Provides guards for browser-only APIs to ensure server-side rendering compatibility

050 GitHub stars

06Enforces the use of stable keys in list rendering to optimize DOM performance

사용 사례

01Debugging UI components that fail to update when props or signals change

02Converting existing React codebases to SolidJS while preserving reactive behavior

03Optimizing application performance through correct memoization and list handling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vallafederico/solid-ai-rules solid-reactivity-safety

For use in Claude.ai and ChatGPT

Download Skill