How does handle null values?

The component supports a render function (callback) that receives the truthy value as an accessor, providing built-in type narrowing for non-null types.

When is better than ?

Use for arrays of primitives like strings or numbers where the position is more stable than the value. Use for arrays of objects where each item has a unique identity.

Does this skill help with async data?

Yes, it provides implementation patterns for and to manage loading states and catch errors during resource fetching.

Why shouldn't I use .map() in SolidJS components?

In SolidJS, components only run once. Using .map() in the body creates a static list. The component is optimized to track individual items and update the DOM only where changes occur.

SolidJS Control Flow Guide

Name: SolidJS Control Flow Guide
Author: IlyaGulya

byIlyaGulya

0•

Design Tools

Implements reactive conditional and list rendering using SolidJS control flow components to ensure optimal performance and reactivity.

This skill equips Claude with specialized knowledge of SolidJS's unique reactive rendering engine, where components execute only once. It provides precise guidance on replacing standard JavaScript control flow—like if/else and .map()—with Solid's dedicated <Show>, <For>, and <Index> components to maintain fine-grained reactivity. Whether you are managing complex async boundaries with Suspense, handling runtime errors with ErrorBoundary, or choosing between referentially-keyed and index-keyed lists, this skill ensures your SolidJS code follows framework best practices for both performance and developer experience.

Key Features

01Optimizes list rendering by choosing correctly between <For> and <Index> components.

02Provides patterns for <Portal> and <Dynamic> to handle complex UI layouts.

030 GitHub stars

04Implements <Show> for reactive conditional rendering and safe type narrowing.

05Sets up <Suspense> and <ErrorBoundary> for robust async data and error management.

06Corrects common reactivity pitfalls like static if/else statements in component bodies.

Use Cases

01Refactoring React-style JSX logic to SolidJS's optimized reactive components.

02Building high-performance data tables with efficient list reconciliation.

03Implementing global or nested loading states using Suspense boundaries.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ilyagulya/claude-marketplace solidjs-control-flow

For use in Claude.ai and ChatGPT

Download Skill