skills.rest
yw662
yw662COMMUNITY
Explore all skills by this author →
WebsiteGitHub

control-flow

Render reactive lists and conditional branches in rikka-dom.

6|1|Updated May 31, 2026
Search Tags:#typescript#signals#reactive ui#conditional rendering#list rendering#dom updates
One-click install
npx skills add https://github.com/yw662/rikka --skill control-flow-yw662
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: control-flow
Source: https://github.com/yw662/rikka/tree/main/skills/control-flow
Command: npx skills add https://github.com/yw662/rikka --skill control-flow-yw662

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build UI that updates predictably when state changes, especially when you need to repeat items, hide or show content, or swap between alternate views without rebuilding the DOM every time.

Core Features & Use Cases

  • Reactive Lists: Use For to render collections from changing signal data, with optional keys for stable item identity.
  • Conditional Rendering: Use Show for visibility toggles, When for two-way branching, and Switch or Match for multi-way decisions.
  • Cached DOM Composition: Reuse existing elements across toggles and updates so interfaces stay fast and stateful.
  • Use Case: A task dashboard can render tickets from a live list, show completed items only when enabled, and switch between editor, preview, and admin views from one state source.

Quick Start

Ask the Skill to build a reactive list or conditional view with For, Show, When, or Switch based on your signal-driven state.

Frequently Asked Questions about control-flow

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

FAQPage Schema
How do I render reactive lists in TypeScript without rebuilding the DOM on every state change?▼

Reactive lists use keyed updates to maintain stable item identity during signal state changes, caching DOM ranges so unchanged elements are preserved without rebuilding the entire structure on every update.

What is the best way to handle conditional rendering for visibility toggles and multi-way view switching?▼

Conditional rendering uses binary branching for visibility toggles and multi-way pattern matching for view switching, caching DOM composition to swap alternate views without destroying stateful elements.

Does TypeScript signal state work with nested UI composition and cached DOM ranges?▼

TypeScript signal state supports nested UI composition by applying cached DOM ranges, allowing interfaces to react to signal changes and pattern matches without rebuilding unchanged elements or losing local state.

How do I update a reactive UI task dashboard to switch between editor, preview, and admin views from one state source?▼

To switch between editor, preview, and admin views from one state source, apply multi-way pattern matching to signal state, caching each view's DOM composition to enable fast view swaps without rebuilding unchanged elements.

Why does my reactive UI rebuild unchanged DOM elements when repeating items from changing signal data?▼

Reactive UIs rebuild unchanged DOM elements when repeating items if stable identity is missing. Applying optional keys during list updates caches existing DOM ranges, preserving unchanged elements during signal data changes.

Related Skills

Explore More Software Engineering Skills→
brianwestphalbrianwestphal
1

kerf-app

Build kerf reactive UIs in TypeScript/JSX with mounts, morphs, stores, and delegated events.

Community
Intermediate
msichtermanmsichterman

use-dom

Embed web-only code in native Expo apps using DOM components.

Community
Intermediate
adamhjkadamhjk
2

solid-effects

Implements reactive side effects for SolidJS components.

Community
Basic
yw662yw662
6

rikka

Build reactive web components with TC39 Signals and native custom elements.

Community
Advanced