solid-control-flow

Manage conditional rendering, list iteration, and lazy components in SolidJS.

2|2|Updated May 1, 2026

Search Tags:#suspense #portal #conditional rendering #solidjs #error boundary #list iteration #dynamic component

One-click install

npx skills add https://github.com/adamhjk/mvtt --skill solid-control-flow

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: solid-control-flow
Source: https://github.com/adamhjk/mvtt/tree/main/.claude/skills/solid-control-flow
Command: npx skills add https://github.com/adamhjk/mvtt --skill solid-control-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manages complex rendering logic in SolidJS by providing declarative primitives for conditionals, loops, and dynamic components, simplifying UI development.

Core Features & Use Cases

Conditional Rendering: Use <Show> and <Switch>/<Match> to display components based on state, enabling reactive interface adjustments.
List Rendering: Use <For> and <Index> to render collections efficiently, supporting list reordering and primitive data challenges.
Dynamic Components: Render components at runtime with <Dynamic> and createDynamic, allowing flexible UI composition.
Portals & Error Handling: Mount elements outside the DOM hierarchy with <Portal>, and handle runtime errors through <ErrorBoundary>.
Suspense & Lazy-loading: Manage async data with <Suspense>, <SuspenseList>, and code-splitting via lazy() for performance optimization.

Quick Start

Use the <Show> component to conditionally display content when a variable is true.

Frequently Asked Questions about solid-control-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I handle conditional rendering in SolidJS?▼

Conditional rendering in SolidJS uses declarative primitives like <Show> and <Switch>/<Match> to display components based on reactive state. This approach enables efficient UI adjustments without manual DOM manipulation.

How does Suspense work with lazy loading in SolidJS?▼

Suspense in SolidJS manages asynchronous content by wrapping lazy-loaded components. Using <Suspense> and <SuspenseList> with the lazy() function enables code splitting, optimizing performance by loading components on demand.

Can I use Error Boundaries and Portals in SolidJS for DOM management?▼

SolidJS supports <ErrorBoundary> to handle runtime errors and <Portal> to mount elements outside the normal DOM hierarchy. These primitives provide fine-grained control over rendering behavior and UI stability.

How do I render dynamic components at runtime in SolidJS?▼

Dynamic component rendering in SolidJS is achieved using <Dynamic> and createDynamic. These primitives allow flexible UI composition by rendering components at runtime, optimizing UI performance and maintainability.