solidjs-patterns

Name: solidjs-patterns
Availability: InStock
Author: TrollHeap

Apply SolidJS patterns for per-action pending signals and createMemo derived state.

Updated Aug 23, 2026

Search Tags:#patterns #signals #reactivity #memo #ui-state #solidjs #openwork

Ready to run

npx skills add https://github.com/TrollHeap/dotfiles --skill solidjs-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: solidjs-patterns
Source: https://github.com/TrollHeap/dotfiles/tree/main/ai-config/.claude/templates/tauri-solidjs/.claude/skills/solidjs-patterns
Command: npx skills add https://github.com/TrollHeap/dotfiles --skill solidjs-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SolidJS UI patterns help manage reactivity and UI state in OpenWork, addressing issues where signals, derived state, and per-action flags become tangled, causing inconsistent UI behavior and race conditions.

Core Features & Use Cases

Fine-grained signals with separate pending states per action
Use createMemo to derive UI state and avoid duplicated booleans
Safe async handlers that snapshot signals before awaiting
Clear guidelines for mutable updates and immutable patterns
Real-world usage: scalable SolidJS components in OpenWork dashboards

Quick Start

Describe a SolidJS UI component and apply per-action pending states, derived state with createMemo, and safe signal handling.

Frequently Asked Questions about solidjs-patterns

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

FAQPage Schema

How do I manage separate pending states for overlapping async actions in SolidJS?▼

To manage overlapping async actions in SolidJS, use distinct per-action pending signals instead of a single boolean flag. This prevents race conditions and ensures accurate UI feedback when multiple requests are in flight simultaneously.

What is the best way to derive UI state in SolidJS without duplicating booleans?▼

The best way to derive UI state in SolidJS without duplicating booleans is using createMemo. It automatically tracks signal dependencies and recalculates only when underlying values change, ensuring consistent reactive state.

Why do my SolidJS signal values change unexpectedly after awaiting an async operation?▼

SolidJS signal values change after awaiting because signals are mutable and can update during async gaps. You must snapshot signal values before calling await to ensure safe async handlers and prevent inconsistent UI behavior.

How do I structure scalable SolidJS components for interactive dashboards?▼

To structure scalable SolidJS components for interactive dashboards, apply fine-grained signals, createMemo for derived state, and immutable update patterns. This avoids mutability risks and keeps complex reactive UI state decoupled.

When should I use immutable update patterns with SolidJS signals?▼

You should use immutable update patterns with SolidJS signals whenever mutability risks affecting derived state. Immutable updates ensure createMemo correctly detects changes, preventing tangled state and inconsistent UI behavior.