#601

Global Rank · of 601 Skills

realtime-sync AI Agent Skill

View Source: oakoss/agent-skills

Medium

Installation

npx skills add oakoss/agent-skills --skill realtime-sync

32

Installs

Realtime Sync

Overview

Architects high-concurrency, sub-50ms latency synchronization between distributed clients and servers. Covers WebTransport (HTTP/3) bidirectional streaming, transactional outbox patterns for database-to-sync consistency, CRDTs for collaborative editing, and AI token stream orchestration.

Core principles: the database is the source of truth (real-time channels notify, not persist), CRDTs eliminate locking for concurrent edits, and backpressure management prevents UI jitter from high-frequency streams.

When to use: Real-time collaborative UIs, pub/sub messaging, WebTransport/WebSocket connections, live AI token streams, presence tracking, conflict resolution with CRDTs, multiplayer applications.

When NOT to use: Batch processing pipelines, static content delivery, request-response APIs without real-time requirements, offline-only applications.

Quick Reference

Pattern Approach Key Points
WebTransport new WebTransport(url) + await ready HTTP/3 multiplexed; replaces WebSockets for new projects
Bidirectional stream transport.createBidirectionalStream() Returns { readable, writable } for request-response
Unidirectional stream transport.createUnidirectionalStream() Returns a WritableStream directly for one-way pushes
Datagrams transport.datagrams.writable UDP-like unreliable delivery for high-frequency state
Connection stats transport.getStats() Returns smoothedRtt, bytesSent, packetsLost
Transactional outbox DB write + outbox insert in one transaction CDC worker pushes to channel; prevents state drift
Sequence tracking Sequence IDs on every message Rewind on reconnect to fetch missed messages
CRDT collaboration Yjs (text) or Automerge (JSON state) Conflict-free concurrent editing without locks
CRDT awareness y-protocols/awareness module Tracks cursors, selections, and user presence
CRDT undo/redo Y.UndoManager with trackedOrigins Tracks only local user operations for selective undo
Presence Heartbeat-based user tracking Epidemic broadcast for reliable zombie cleanup
AI stream batching requestAnimationFrame for token rendering Prevents UI jitter from high-frequency updates
Buffer-and-batch useTransition for sync-triggered updates Defers non-urgent re-renders during sync bursts
Backpressure Buffer size limit with forced flush Prevents memory buildup when tokens outpace rendering
WebSocket fallback Detect WebTransport support first Enterprise firewalls may block UDP/HTTP/3
Serialization Protocol Buffers or MessagePack Avoid JSON.stringify on 100Hz+ streams
Web Worker transport Handle WebTransport in a Web Worker Prevents blocking the UI thread
Channel multiplexing Subscribe to multiple channels on one socket All subscriptions share a single transport connection

Common Mistakes

Mistake Correct Pattern
Using real-time messages as the primary source of truth State lives in the database; real-time is the notification of change
Using JSON.stringify on high-frequency streams (100Hz+) Use Protocol Buffers or MessagePack for serialization
Ignoring sequence drift when a client misses messages Implement Sequence IDs and a rewind mechanism on the client
Implementing global locks for concurrent access Use Optimistic UI and CRDTs for conflict-free collaboration
Sticking with WebSockets for new projects needing multiplexing Use WebTransport (HTTP/3) for bidirectional, multiplexed streams
CRDT document bloat from unbounded history Use snapshotting (LWW) for fields that do not need history
Failing to close WebTransport streams on unmount Explicitly close streams to prevent transport crashes
Importing Awareness from yjs instead of y-protocols Use import { Awareness } from 'y-protocols/awareness'
Using ydoc.clientID as UndoManager tracked origin Use custom transaction origins passed to doc.transact()
One React re-render per AI token received Batch tokens with requestAnimationFrame and flush once per frame
Not handling WebTransport closed promise Monitor transport.closed to detect unexpected disconnections

Delegation

If the local-first skill is available, delegate local-first architecture decisions, sync engine comparison, and client storage selection to it.
If the electricsql skill is available, delegate ElectricSQL shape-based Postgres sync patterns to it.

  • Explore transport protocol options and latency benchmarks: Use Explore agent to compare WebTransport, SSE, and WebSocket tradeoffs
  • Implement transactional outbox pattern with CDC pipeline: Use Task agent to set up database triggers, outbox table, and background worker
  • Design real-time architecture for collaborative editing: Use Plan agent to map CRDT strategy, presence management, and conflict resolution flow
  • Build multi-stream AI orchestration component: Use Task agent to implement parallel token stream rendering with backpressure
  • Audit real-time connection lifecycle management: Use Review agent to check for stream leaks, missing cleanup, and reconnection handling

References

Installs

Installs 32
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Medium
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install realtime-sync by running npx skills add oakoss/agent-skills --skill realtime-sync in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of realtime-sync, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support