modules/claude-code: add FSM (xstate, robot3) to svelte skill

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: aster-void

modules/home/profile-dev/programs/claude-code/skills/svelte/SKILL.md

@@ -4,11 +4,10 @@ description: Build Svelte 5 apps with async svelte and remote functions. Always
 ---
 
 <rules>
-1. [Reactivity]: `$derived` not `$effect` — $effect is escape hatch for external systems (DOM APIs, timers)
-2. [Query refresh]: After mutation, call `relatedQuery.refresh()` to invalidate
-3. [Single-flight]: Same query + same args = one request (auto-deduplicated)
-4. [Auth at DAL]: Every `.remote.ts` validates auth before DB calls
-5. [DB layer]: Authorization-unaware, no `getRequestEvent()`
+1. [Reactivity]: `$derived` over `$effect` — $effect is escape hatch for external systems (DOM APIs, timers)
+2. [Single-flight]: Same query + same args = one request (auto-deduplicated)
+3. [Auth at DAL]: Every `.remote.ts` validates auth before DB calls
+4. [DB layer]: Authorization-unaware, no `getRequestEvent()`
 </rules>
 
 ## Type-safe Context
@@ -24,18 +23,18 @@ export const [useFoo, setupFoo] = createContext<Foo>();
 - top-level `await` - `{#snippet pending}` 不要。省略可
 - context は `await` より前に呼ぶ必要あり
 - `<slot />` は非推奨。`{#snippet}` と `{@render}` を使う:
-  ```svelte
-  <!-- 親: propsとしてsnippetを渡す -->
-  <Card>
-    {#snippet header()}<h1>Title</h1>{/snippet}
-    {#snippet children()}Content here{/snippet}
-  </Card>
-
-  <!-- 子: propsで受け取って@renderで描画 -->
-  <script>let { header, children } = $props()</script>
-  {@render header()}
-  {@render children()}
-  ```
+```svelte
+<!-- 親: propsとしてsnippetを渡す -->
+<Card>
+  {#snippet header()}<h1>Title</h1>{/snippet}
+  {#snippet children()}Content here{/snippet}
+</Card>
+
+<!-- 子: propsで受け取って@renderで描画 -->
+<script>let { header, children } = $props()</script>
+{@render header()}
+{@render children()}
+```
 </tips>
 
 <layers>
@@ -138,10 +137,12 @@ See context7 for library docs.
 - svelte-radix - Radix icons
 - svelte-heroes-v2 - hero-icons for svelte
 
-### Async & Data loading
+### State & Async
 
 - Remote Functions & Async Svelte - builtin to svelte and kit, very good
 - @tanstack/svelte-query - async state management
+- xstate + @xstate/svelte - statecharts, actor model FSM
+- robot3 - lightweight (1kb) functional FSM
 
 ### Utility
 
@@ -156,4 +157,6 @@ See context7 for library docs.
 - [Architecture](./references/architecture.md) - structures, auth helpers
 - [Advanced Patterns](./references/advanced-patterns.md) - batching, optimistic UI, advanced form
 - [File Uploads](./references/file-uploads.md) - form/command file upload patterns
+- [XState](./references/xstate.md) - full-featured statecharts, actors, parallel states
+- [Robot3](./references/robot3.md) - lightweight (1kb) functional FSM
 - [Svelte Docs](https://svelte.dev/llms-medium.txt) - full documentation

modules/home/profile-dev/programs/claude-code/skills/svelte/references/robot3.md

@@ -0,0 +1,89 @@
+# Robot3
+
+Lightweight (1kb) functional FSM. Simpler API than XState.
+
+## Basic Usage
+
+```ts
+import { createMachine, state, transition } from 'robot3';
+
+const toggleMachine = createMachine({
+  inactive: state(
+    transition('toggle', 'active')
+  ),
+  active: state(
+    transition('toggle', 'inactive')
+  )
+});
+```
+
+## Async Actions
+
+```ts
+import { createMachine, state, transition, invoke, reduce } from 'robot3';
+
+const fetchMachine = createMachine({
+  idle: state(
+    transition('fetch', 'loading')
+  ),
+  loading: invoke(
+    () => fetch('/api/data').then(r => r.json()),
+    transition('done', 'success', reduce((ctx, ev) => ({ ...ctx, data: ev.data }))),
+    transition('error', 'error')
+  ),
+  success: state(),
+  error: state(
+    transition('retry', 'loading')
+  )
+});
+```
+
+## Svelte 5 Integration
+
+```ts
+// $lib/useMachine.svelte.ts
+import { interpret } from 'robot3';
+
+export function useMachine<T>(machine: T, initialContext = {}) {
+  let current = $state(machine.current);
+  let context = $state(initialContext);
+
+  const service = interpret(machine, (service) => {
+    current = service.machine.current;
+    context = service.context;
+  }, initialContext);
+
+  return {
+    get current() { return current },
+    get context() { return context },
+    send: service.send
+  };
+}
+```
+
+```svelte
+<script>
+  import { useMachine } from '$lib/useMachine.svelte';
+  import { fetchMachine } from './machines';
+
+  const { current, context, send } = useMachine(fetchMachine);
+</script>
+
+<p>State: {current}</p>
+{#if current === 'idle'}
+  <button onclick={() => send('fetch')}>Fetch</button>
+{:else if current === 'loading'}
+  <p>Loading...</p>
+{:else if current === 'success'}
+  <pre>{JSON.stringify(context.data)}</pre>
+{:else if current === 'error'}
+  <button onclick={() => send('retry')}>Retry</button>
+{/if}
+```
+
+## When to Use
+
+- Simple state machines
+- Bundle size matters (1kb vs 13kb)
+- Prefer functional composition
+- Quick prototyping

modules/home/profile-dev/programs/claude-code/skills/svelte/references/xstate.md

@@ -0,0 +1,98 @@
+# XState (@xstate/svelte)
+
+Full-featured statecharts: actors, parallel states, visual editor (Stately).
+
+## Basic Usage
+
+```svelte
+<script>
+  import { useMachine } from '@xstate/svelte';
+  import { createMachine, assign } from 'xstate';
+
+  const toggleMachine = createMachine({
+    id: 'toggle',
+    initial: 'inactive',
+    context: { count: 0 },
+    states: {
+      inactive: {
+        on: { TOGGLE: 'active' }
+      },
+      active: {
+        entry: assign({ count: ({ context }) => context.count + 1 }),
+        on: { TOGGLE: 'inactive' }
+      }
+    }
+  });
+
+  const { state, send } = useMachine(toggleMachine);
+</script>
+
+<button onclick={() => send({ type: 'TOGGLE' })}>
+  {$state.value} (count: {$state.context.count})
+</button>
+```
+
+## Async Actions
+
+```ts
+import { createMachine, assign, fromPromise } from 'xstate';
+
+const fetchMachine = createMachine({
+  id: 'fetch',
+  initial: 'idle',
+  context: { data: null, error: null },
+  states: {
+    idle: {
+      on: { FETCH: 'loading' }
+    },
+    loading: {
+      invoke: {
+        src: 'fetchData',
+        onDone: { target: 'success', actions: assign({ data: ({ event }) => event.output }) },
+        onError: { target: 'error', actions: assign({ error: ({ event }) => event.error }) }
+      }
+    },
+    success: { on: { FETCH: 'loading' } },
+    error: { on: { FETCH: 'loading' } }
+  }
+}, {
+  actors: {
+    fetchData: fromPromise(async () => {
+      const res = await fetch('/api/data');
+      return res.json();
+    })
+  }
+});
+```
+
+## Parallel States
+
+```ts
+const editorMachine = createMachine({
+  id: 'editor',
+  type: 'parallel',
+  states: {
+    bold: {
+      initial: 'off',
+      states: {
+        off: { on: { TOGGLE_BOLD: 'on' } },
+        on: { on: { TOGGLE_BOLD: 'off' } }
+      }
+    },
+    italic: {
+      initial: 'off',
+      states: {
+        off: { on: { TOGGLE_ITALIC: 'on' } },
+        on: { on: { TOGGLE_ITALIC: 'off' } }
+      }
+    }
+  }
+});
+```
+
+## When to Use
+
+- Complex flows with nested/parallel states
+- Need visual state editor (Stately)
+- Actor model for spawning child machines
+- Large teams benefiting from formal statecharts