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.

Ir a la instalación

Repositorio: IlyaGulya/claude-marketplace
Última actividad en el origen: 14 de febrero de 2026 a las 09:41
Idioma detectado de SKILL.md: inglés
Estrellas: 0
Forks: 0

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

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

Ver todos los de este repositorio

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

Opciones de instalación

Revisa los archivos de origen

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

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Más de este repositorio

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>`