implementing-realtime-sync
Build live-updating applications with progressive token streaming for LLM responses, bidirectional chat, and multi-user collaboration. This skill covers protocol selection (SSE for one-way streams, WebSocket for two-way communication, WebRTC for peer-to-peer), conflict-free editing with CRDTs, presence awareness, and offline-first synchronization patterns across Python, Rust, Go, and TypeScript.
Implementing Real-Time Sync lets you stream LLM responses progressively using SSE or WebSocket for live updates across chat, dashboards, and collaborative tools.
AI-generated summary based on this skill's SKILL.md
Install
ancoleman/ai-design-components/implementing-realtime-sync · repository language: Python
git clone https://github.com/ancoleman/ai-design-components
cp -r ai-design-components/skills/implementing-realtime-sync ~/.claude/skills/implementing-realtime-syncnpx skillfed install ancoleman/ai-design-components/implementing-realtime-syncFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to stream LLM responses in real time?
Implementing-realtime-sync covers streaming LLM responses progressively using SSE (Server-Sent Events) for one-way server-to-client streams or WebSocket for bidirectional communication. SSE works well for simple token-by-token LLM output, while WebSocket enables interactive follow-ups. The skill teaches protocol selection, chunking strategies, and frontend consumption patterns across Python, Rust, Go, and TypeScript backends.
What's the difference between server sent events vs websocket?
Implementing-realtime-sync explains that SSE provides one-way server-to-client streaming ideal for progressive LLM responses and live dashboards, using simpler HTTP infrastructure. WebSocket enables true bidirectional communication for chat, multiplayer games, and collaborative editing. The skill guides choosing based on your use case: SSE for simpler streaming, WebSocket when clients must send real-time updates back to the server.
How do you build real time collaboration editing like Google Docs?
Implementing-realtime-sync teaches conflict-free collaborative editing using CRDTs (Conflict-free Replicated Data Types) with libraries like Yjs and Automerge. The skill covers operational transformation, presence awareness for cursor tracking, WebSocket synchronization, and offline-first sync so edits merge correctly when users reconnect. You'll learn to handle concurrent edits without server arbitration.
What does implementing-realtime-sync cover for mobile apps?
Implementing-realtime-sync includes offline-first synchronization patterns for mobile and PWA applications, enabling users to work without connectivity and automatically sync when reconnected. The skill covers reconnection strategies, conflict resolution, and state reconciliation—essential for unreliable mobile networks. It teaches both client-side caching and server-side merge logic across multiple platforms.
How is presence awareness and cursor tracking implemented?
Implementing-realtime-sync covers adding presence awareness—showing which users are active—and cursor tracking for multi-user interactions. The skill teaches broadcasting user positions, handling join/leave events, and managing stale presence data. You'll learn to implement typing indicators and live cursor positions using WebSocket broadcasts or pub/sub systems like Redis for horizontal scaling.
What authentication and scaling patterns does this skill teach?
Implementing-realtime-sync covers WebSocket authentication (JWT tokens, session validation), security best practices, and horizontal scaling with Redis pub/sub for multi-server deployments. The skill addresses connection pooling, message routing, and handling thousands of concurrent connections. It includes examples in Python, Rust, Go, and TypeScript for production-grade real-time systems.
SKILL.md
rendered from the published skill — quoted content, verbatim
Real-Time Sync
Implement real-time communication for live updates, collaboration, and presence awareness across applications.
When to Use
Use this skill when building:
- LLM streaming interfaces - Stream tokens progressively (ai-chat integration)
- Live dashboards - Push metrics and updates to clients
- Collaborative editing - Multi-user document/spreadsheet editing with CRDTs
- Chat applications - Real-time messaging with presence
- Multiplayer features - Cursor tracking, live updates, presence awareness
- Offline-first apps - Mobile/PWA with sync-on-reconnect
Protocol Selection Framework
Choose the
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 13 files
skills/implementing-realtime-sync/SKILL.md
skills/implementing-realtime-sync/examples/llm-streaming-sse/.env.example
skills/implementing-realtime-sync/examples/llm-streaming-sse/README.md
skills/implementing-realtime-sync/examples/llm-streaming-sse/backend.py
skills/implementing-realtime-sync/examples/llm-streaming-sse/frontend.html
skills/implementing-realtime-sync/examples/llm-streaming-sse/requirements.txt
skills/implementing-realtime-sync/outputs.yaml
skills/implementing-realtime-sync/references/crdts.md
skills/implementing-realtime-sync/references/offline-sync.md
skills/implementing-realtime-sync/references/presence-patterns.md
skills/implementing-realtime-sync/references/sse.md
skills/implementing-realtime-sync/references/websockets.md
skills/implementing-realtime-sync/scripts/test_websocket_connection.py