How do I use XState with Solid's control flow?

You can use the snapshot.matches() method within Solid's and components to declaratively render UI based on the current machine state.

What is the difference between useActor and useActorRef?

useActor creates an actor and triggers component re-renders on every state change, while useActorRef provides the actor reference without automatic reactivity, allowing for manual selection with useSelector.

Does this skill support XState Store?

Yes, it includes patterns for @xstate/store-solid, specifically using the useSelector hook to subscribe to store state as a Solid signal.

Can I persist machine state using this skill?

Yes, the skill provides implementation patterns for rehydrating state from local storage and using createEffect to persist changes automatically.

Why should I use useSelector instead of just useActor?

useSelector allows for selective reactivity, meaning the component only re-renders when the specific part of the state you are watching changes, which significantly improves performance in complex applications.

XState SolidJS Integration

Name: XState SolidJS Integration
Author: IlyaGulya

byIlyaGulya

0•

개발자 도구

Integrates XState v5 state machines and stores seamlessly into SolidJS applications using reactive hooks and signals.

This skill provides specialized guidance for connecting XState v5 machines and stores to SolidJS components. It helps developers implement robust state management using @xstate/solid and @xstate/store-solid, offering best practices for useActor hooks, selective reactivity with useSelector, and idiomatic SolidJS patterns like Switch/Match control flow. Whether you are managing complex UI transitions, persisting state to local storage, or handling spawned actors in lists, this skill ensures type-safe and performant integration between XState's finite state machines and Solid's fine-grained reactivity.

주요 기능

01Selective reactivity and performance optimization using useSelector signals

02Patterns for rehydrating and persisting machine state to local storage

030 GitHub stars

04Comprehensive XState v5 and SolidJS hook integration including useActor and useActorRef

05Idiomatic state matching with SolidJS Switch and Match components

06Implementation guides for Context Providers and spawned actor lists using the For component

사용 사례

01Architecting real-time UI components that respond to external actor events and transitions

02Building complex multi-step forms with finite state logic in SolidJS

03Managing global application state via XState stores with fine-grained reactivity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ilyagulya/claude-marketplace xstate-solidjs

For use in Claude.ai and ChatGPT

Download Skill