xstate-solidjs

Covers XState v5 integration with SolidJS via @xstate/solid and @xstate/store-solid. Use when connecting XState machines or stores to Solid components, using useActor/useActorRef/fromActorRef hooks, or subscribing to store state as Solid signals.

Aller à l'installation

Dépôt: IlyaGulya/claude-marketplace
Dernière activité de la source: 14 février 2026 à 09:41
Langue détectée de SKILL.md: anglais
Étoiles: 0
Forks: 0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/IlyaGulya/claude-marketplace --skill xstate-solidjs

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

frontend-design-v2

Build frontend interfaces with externally randomized style direction. Use when the user asks to build web components, pages, or applications with high design diversity. Produces distinctive, production-grade UI that avoids repetitive AI aesthetics.

2026-03-16

context-file-lint

Analyzes CLAUDE.md, AGENTS.md, and similar repository context files for effectiveness based on peer-reviewed research. Identifies instructions that hurt agent performance, redundant content, and unnecessary requirements. Use when reviewing a CLAUDE.md, auditing an AGENTS.md, optimizing context files, or when the user says "lint my CLAUDE.md", "review my AGENTS.md", "is my context file good", "optimize my context file", or "check my CLAUDE.md".

2026-03-15

skill-creator-frontmatter

Complete reference for Claude Code skill YAML frontmatter fields, their values, and best practices. Use when writing frontmatter for SKILL.md, configuring skill invocation, setting allowed-tools, or deciding on skill metadata fields.

2026-03-15

Tout voir dans ce dépôt

function UserProfile(props: { userId: string }) {
  const [snapshot, send] = useActor(
    userMachine.provide({
      actions: {
        notifyParent: () => props.onComplete?.(),
      },
    }),
    { input: { userId: props.userId } },
  );

  return <div>{snapshot.context.name}</div>;
}

import { useActorRef } from '@xstate/solid';

function Logger() {
  const actorRef = useActorRef(logMachine, {
    input: { level: 'debug' },
  });

  // No re-renders on state changes
  return <button onclick={() => actorRef.send({ type: 'LOG' })}>Log</button>;
}

import { useActorRef, useSelector } from '@xstate/solid';

function Counter() {
  const actorRef = useActorRef(counterMachine);
  const count = useSelector(actorRef, (s) => s.context.count);

  return <span>{count()}</span>;
}

import { fromActorRef } from '@xstate/solid';

function ChildView(props: { actorRef: AnyActorRef }) {
  const snapshot = fromActorRef(() => props.actorRef);

  return <div>Status: {snapshot().status}</div>;
}

import { Switch, Match } from 'solid-js';

function LoaderView() {
  const [snapshot, send] = useActor(loaderMachine);

  return (
    <Switch fallback={<p>Unknown state</p>}>
      <Match when={snapshot.matches('idle')}>
        <button onclick={() => send({ type: 'FETCH' })}>Load</button>
      </Match>
      <Match when={snapshot.matches('loading')}>
        <p>Loading...</p>
      </Match>
      <Match when={snapshot.matches('success')}>
        <p>Data: {JSON.stringify(snapshot.context.data)}</p>
      </Match>
      <Match when={snapshot.matches('error')}>
        <p>Error! <button onclick={() => send({ type: 'RETRY' })}>Retry</button></p>
      </Match>
    </Switch>
  );
}

<Match when={snapshot.matches({ loading: 'user' })}>
  <UserSkeleton />
</Match>

function App() {
  const persisted = JSON.parse(localStorage.getItem('state') ?? 'null');

  const [snapshot, send] = useActor(someMachine, {
    snapshot: persisted ?? undefined,
  });

  // Persist on changes
  createEffect(() => {
    localStorage.setItem('state', JSON.stringify(snapshot));
  });

  return <div>...</div>;
}

import { createEffect, onCleanup } from 'solid-js';

function ActorLogger() {
  const [snapshot, send, actorRef] = useActor(someMachine);

  createEffect(() => {
    const sub = actorRef.subscribe((s) => {
      console.log('State:', s.value);
    });
    onCleanup(() => sub.unsubscribe());
  });

  return <div>...</div>;
}

import { createStore, useSelector } from '@xstate/store-solid';

const store = createStore({
  context: { count: 0 },
  on: {
    inc: (context, event: { by?: number }) => ({
      ...context,
      count: context.count + (event.by ?? 1),
    }),
  },
});

function Counter() {
  // Returns a Solid signal — call as function to read
  const count = useSelector(store, (state) => state.context.count);

  return (
    <div>
      <p>Count: {count()}</p>
      <button onclick={() => store.trigger.inc()}>+1</button>
      <button onclick={() => store.trigger.inc({ by: 5 })}>+5</button>
    </div>
  );
}

const user = useSelector(
  store,
  (state) => state.context.user,
  (prev, next) => prev.id === next.id,
);

import { createContext, useContext } from 'solid-js';
import { useActorRef } from '@xstate/solid';

const MachineContext = createContext<ReturnType<typeof useActorRef>>();

function MachineProvider(props: { children: any }) {
  const actorRef = useActorRef(appMachine);
  return (
    <MachineContext.Provider value={actorRef}>
      {props.children}
    </MachineContext.Provider>
  );
}

function useAppMachine() {
  const ref = useContext(MachineContext);
  if (!ref) throw new Error('Missing MachineProvider');
  return ref;
}

// In a child component
function StatusBar() {
  const actorRef = useAppMachine();
  const status = useSelector(actorRef, (s) => s.value);
  return <span>{status()}</span>;
}

import { For } from 'solid-js';
import { fromActorRef } from '@xstate/solid';

function TodoList() {
  const [snapshot, send] = useActor(todosMachine);

  return (
    <For each={Object.values(snapshot.children)}>
      {(todoRef) => <TodoItem actorRef={todoRef} />}
    </For>
  );
}

function TodoItem(props: { actorRef: AnyActorRef }) {
  const todo = fromActorRef(() => props.actorRef);
  return <li>{todo().context.text}</li>;
}

// BAD — reads the signal accessor, not the value
<p>Count: {count}</p>   // Shows "[Function]"

// GOOD — call the signal
<p>Count: {count()}</p>

// BAD — actor not tied to component lifecycle, leaks
const [snapshot, send] = useActor(machine); // at module level

// GOOD — inside component or createRoot
function App() {
  const [snapshot, send] = useActor(machine);
  // ...
}

// BAD — useEffect/useState are React patterns
useEffect(() => { /* ... */ }, [dep]);

// GOOD — Solid uses createEffect/createSignal
createEffect(() => { /* tracked automatically */ });

Package	Purpose	Install
`@xstate/solid`	XState machines in Solid components	`npm i xstate @xstate/solid`
`@xstate/store-solid`	@xstate/store with Solid signals	`npm i @xstate/store-solid`

Package	Purpose	Install
`@xstate/solid`	XState machines in Solid components	`npm i xstate @xstate/solid`
`@xstate/store-solid`	@xstate/store with Solid signals	`npm i @xstate/store-solid`

xstate-solidjs

Options d'installation

Vérifiez les fichiers source

XState v5 + SolidJS Integration

Packages

@xstate/solid — Machines in Solid

useActor(logic, options?)

XState v5 + SolidJS Integration

Packages

@xstate/solid — Machines in Solid

useActor(logic, options?)

useActorRef(logic, options?)

fromActorRef(actorRef)

State Matching with Solid Control Flow

Persisted/Rehydrated State

Actor Subscriptions with Solid Lifecycle

@xstate/store-solid — Stores in Solid

useSelector(store, selector?, compare?)

Solid-Specific Patterns

Context Provider with XState

Spawned Actor Lists with `<For>`

Anti-Patterns

Forgetting to Call Signals

Creating Actors Outside Components

Using React Patterns in Solid

name	xstate-solidjs
description	Covers XState v5 integration with SolidJS via @xstate/solid and @xstate/store-solid. Use when connecting XState machines or stores to Solid components, using useActor/useActorRef/fromActorRef hooks, or subscribing to store state as Solid signals.

xstate-solidjs

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt

XState v5 + SolidJS Integration

Packages

@xstate/solid — Machines in Solid

useActor(logic, options?)

XState v5 + SolidJS Integration

Packages

@xstate/solid — Machines in Solid

useActor(logic, options?)

useActorRef(logic, options?)

fromActorRef(actorRef)

State Matching with Solid Control Flow

Persisted/Rehydrated State

Actor Subscriptions with Solid Lifecycle

@xstate/store-solid — Stores in Solid

useSelector(store, selector?, compare?)

Solid-Specific Patterns

Context Provider with XState

Spawned Actor Lists with <For>

Anti-Patterns

Forgetting to Call Signals

Creating Actors Outside Components

Using React Patterns in Solid

Spawned Actor Lists with `<For>`