framework-solidjs

Build SolidJS 1.8+ apps with SolidStart routing and reactive primitives.

8|Updated Mar 28, 2024
One-click install
npx skills add https://github.com/joncrangle/.dotfiles --skill framework-solidjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: framework-solidjs
Source: https://github.com/joncrangle/.dotfiles/tree/main/dot_config/opencode/skills/framework-solidjs
Command: npx skills add https://github.com/joncrangle/.dotfiles --skill framework-solidjs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

SolidJS development often requires careful orchestration of fine-grained reactivity, scalable patterns, and reliable routing to deliver fast, maintainable UIs. This skill provides a structured approach to building SolidJS 1.8+ apps with SolidStart, emphasizing best practices and clear component boundaries.

Core Features & Use Cases

  • Fine-grained reactivity primitives (createSignal, createMemo, createStore) for high-performance UI updates.
  • SolidStart-based routing and server integration for modular, scalable apps.
  • Clear guidance on pitfalls to avoid (no Virtual DOM mentions, no React hooks, proper props access, and ergonomic component design).

Quick Start

Generate a minimal SolidJS 1.8+ app with SolidStart routing and a reactive component structure.

Frequently Asked Questions about framework-solidjs

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

FAQPage Schema
How do I build SolidJS applications with fine-grained reactivity?

Building SolidJS applications with fine-grained reactivity involves using primitives like createSignal, createStore, and createMemo for high-performance UI updates. This approach enables modular component design without relying on a Virtual DOM.

What is the best way to set up SolidStart routing for a modular web UI?

SolidStart routing for a modular web UI is best set up by leveraging SolidStart's built-in server integration and routing capabilities. This provides a scalable foundation for real-world SolidJS 1.8+ applications.

Can I use React hooks and Virtual DOM patterns in SolidJS component design?

React hooks and Virtual DOM patterns cannot be used in SolidJS component design. SolidJS relies on fine-grained reactivity and direct DOM updates, requiring strict adherence to its specific primitives for proper state management.

Does this SolidStart setup require specific tooling for deterministic scripts?

Yes, this SolidStart setup requires alignment with Bun or Just tooling to execute deterministic scripts. This ensures consistent build processes and reliable development environments for SolidJS 1.8+ projects.

Why does my SolidJS component break when accessing props destructured outside the JSX?

SolidJS components break when props are destructured outside the JSX because it loses reactive tracking. Proper props access must be maintained to preserve the fine-grained reactivity updates within the component.

When do I need createStore versus createSignal for SolidJS state management?

You need createStore for managing complex, nested state objects in SolidJS state management, whereas createSignal is suited for primitive values. Using createStore enables deep reactivity within object properties without triggering unnecessary updates.