SKILL.md file on disk.
Metadata
| Field | Value |
|---|---|
| Source group | User Skills |
| Source root | /Users/meganharrison/.agents/skills |
| Relative skill path | velt-live-state-sync-best-practices/SKILL.md |
| Actual file | /Users/meganharrison/.agents/skills/velt-live-state-sync-best-practices/SKILL.md |
| Description | Velt Live State Sync implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time shared state, syncing data across clients, Redux store synchronization, or live variables. Triggers on any task involving Velt live state, useLiveState, useSetLiveStateData, useLiveStateData, useLiveStateSyncUtils, createLiveStateMiddleware, getLiveStateSyncElement, live state broadcast API, real-time collaborative state, or building shared-state features — even if the user doesn’t explicitly say ‘live state sync’. |
| Docs overview | User Skills |
Why this exists
Use this page when you want to review the real instructions behind a skill without leaving the docs site. The content below is copied from the actualSKILL.md file, not rewritten by hand.
Raw SKILL.md
---
name: velt-live-state-sync-best-practices
description: Velt Live State Sync implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time shared state, syncing data across clients, Redux store synchronization, or live variables. Triggers on any task involving Velt live state, useLiveState, useSetLiveStateData, useLiveStateData, useLiveStateSyncUtils, createLiveStateMiddleware, getLiveStateSyncElement, live state broadcast API, real-time collaborative state, or building shared-state features — even if the user doesn't explicitly say 'live state sync'.
license: MIT
metadata:
author: velt
version: "1.0.0"
---
# Velt Live State Sync Best Practices
Comprehensive guide for implementing Velt's Live State Sync API — real-time shared state across clients with sub-10ms latency, offline support, and Redux middleware integration. Contains 14 rules across 6 categories.
## When to Apply
Reference these guidelines when:
- Adding real-time shared state (counters, selections, cursors, tool modes) to a collaborative app
- Using `useLiveState` for useState-like shared state
- Using `useSetLiveStateData` / `useLiveStateData` for separated read/write patterns
- Working with the `LiveStateSyncElement` for observable subscriptions or promise-based fetches
- Integrating Redux with `createLiveStateMiddleware` for full store sync
- Broadcasting state updates from your server via the REST API
- Monitoring connection state for offline/online indicators
## Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Core | CRITICAL | `core-` |
| 2 | Hooks | CRITICAL | `hooks-` |
| 3 | Element | HIGH | `element-` |
| 4 | Redux | HIGH | `redux-` |
| 5 | API | MEDIUM | `api-` |
| 6 | Patterns | MEDIUM | `patterns-` |
## Prerequisites
Live State Sync requires `VeltProvider` with `authProvider` wrapping your app and a `documentId` set to scope state. No additional packages beyond `@veltdev/react` are needed.
## Compiled Documents
- `AGENTS.md` — Compressed index of all rules with file paths (start here)
- `AGENTS.full.md` — Full verbose guide with all rules expanded inline