<!--
Sitemap:
- [rxfy](/index): Typed, normalized, reactive state — built on RxJS
- [Comparison](/comparison): rxfy versus Redux Toolkit, MobX, Jotai, and TanStack Query
- [Agent Skills](/agent-skills): Accurate rxfy context for AI coding assistants
- [Examples](/examples): Runnable apps, from client-only to fully live
- [Changelog](/changelog)
- [Getting Started](/getting-started)
- [Store quickstart](/getting-started/store): Normalized reactive state in a client-only app
- [Framework quickstart](/getting-started/framework): The full stack for a live app
- [Core Concepts](/core-concepts): The ideas rxfy is built on
- [Normalization](/core-concepts/normalization): Store each entity once, reference it by id
- [Late Unwrapping](/core-concepts/late-unwrapping): Unwrap async state at the leaf, not the trunk
- [Server-Side Rendering](/core-concepts/ssr): Dehydrate on the server, hydrate with no refetch
- [rxfy](/rxfy): The core package: atoms, lenses, models, and states
- [createModel](/rxfy/create-model): Typed entities in normalized storage
- [defineState](/rxfy/define-state): Typed, normalized state shapes with fetching and mutations
- [createAtom](/rxfy/create-atom): A reactive cell with synchronous get, set, and modify
- [createLens](/rxfy/create-lens): A two-way view into part of an Atom
- [React Bindings](/react): Hooks and helpers for using rxfy in React
- [useStateData](/react/use-state-data): Fetch, normalize, and subscribe to a query
- [useStatePagedData](/react/use-state-paged-data): Paginated and infinite-scroll lists
- [useModelStore](/react/use-model-store): Subscribe to one normalized entity by id
- [useAtom](/react/use-atom): Two-way binding for any IAtom
- [Pending](/react/pending): Render pending, rejected, and fulfilled UI for any observable
- [usePending](/react/use-pending): The status value behind Pending
- [useObservable](/react/use-observable): Bind a raw Observable to React
- [Live client](/react/live-client): Wire a WebSocket transport into StoreProvider
- [rxfy-server](/framework/server): Bind Drizzle tables, write, and publish live updates
- [defineResource](/framework/server/define-resource): Tie a Drizzle table to an rxfy model
- [createServer](/framework/server/create-server): Wire db, resources, hub, and keyer into a Live object
- [Writes](/framework/server/writes): live.create / live.update / live.delete and touch
- [Live messages](/framework/server/messages): What travels between server and client
- [Grants & live hydration](/framework/server/grants): Hand off an SSR render to a live client
- [createTopicKeyer](/framework/server/create-topic-keyer): Time-windowed HMAC ids for topics
- [createInMemoryHub](/framework/server/hub): The pub/sub backbone
- [rxfy-ws](/framework/ws): The default WebSocket transport
- [createWsServer](/framework/ws/server): Attach a Hub to WebSocket connections
- [createWsClient](/framework/ws/client): The browser transport with reconnect and replay
- [Custom transports](/framework/ws/custom-transport): Bring your own ClientTransport
- [Guides](/guides): Task-focused walkthroughs of common rxfy patterns
- [Build a Todo app](/guides/todo-app): A guided, end-to-end first app
- [Pagination and infinite scroll](/guides/pagination): Load and append pages into one normalized list
- [Live blog](/guides/live-blog): Build a real-time blog: SSR, then live patches and stale badges
-->

# Agent Skills \[Accurate rxfy context for AI coding assistants]

rxfy ships two **agent skills** — structured reference files that AI coding assistants (Claude Code, GitHub Copilot Agent, Codex, and others) load on demand to get accurate, rxfy-specific guidance without hallucinating APIs.

Without a skill an agent has only its training data: it may invent hook signatures, confuse normalized ids with entity data, or silently omit the `name`/`key` fields that SSR requires. With a skill it has the real API surface and the common pitfalls already in context.

## Pick one — never both

The two skills mirror the two [getting-started paths](/getting-started). Each is fully self-contained; install the one matching your setup:

| Your setup | Install |
|---|---|
| Client-only store — `rxfy` + `rxfy-react`, with or without SSR | `rxfy` |
| Live app — the framework packages (`rxfy-server`, `rxfy-ws`) on top | `rxfy-framework` |

`rxfy-framework` already contains everything in `rxfy`, so installing both only duplicates context and confuses skill routing.

## Install

```bash
# store setup
npx skills add vanya2h/rxfy --skill rxfy

# framework (live-app) setup
npx skills add vanya2h/rxfy --skill rxfy-framework
```

## What the skills cover

**`rxfy`** — the store path:

* Models (`createModel`) and states (`defineState`), including [plain value fields](/rxfy/define-state#plain-value-fields)
* The normalized data flow: `useStateData` returns ids, `useModelStore` gives entities
* `useAtom`, `usePending`, `<Pending>` — async rendering patterns
* Mutations, `set` vs `setRaw`, pagination with `useStatePagedData`
* Lens composition with `createLens` / `keyLens`
* SSR: `name`/`key` requirements, buffered (`onAllReady`), streaming (`<HydrationStream />`), and two-pass (`collectStateData`) modes
* Common mistakes: inline observable creation, `store.entity()` guards, atom stability, missing-data-after-SSR

**`rxfy-framework`** — everything above, plus the real-time layer:

* Binding Drizzle tables with `defineResource` and writing through `live.create` / `live.update` / `live.delete`
* `patch` vs `stale`: which writes publish what, and why lists refresh instead of mutating in place
* The wire protocol and the `rxfy-ws` transports (`createWsServer`, `createWsClient`)
* `createLiveClient`, the `StoreProvider` `liveClient` prop, and `updatesAvailable$` / `applyUpdates`
* Grants and live hydration: `live.grant`, `readSsrGrants`, topic keyers, and state channels