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
Decision gist · record as of 2025-12-11
Implementing Real-Time Sync lets you stream LLM responses progressively using SSE or WebSocket for live updates across chat, dashboards, and collaborative tools. 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.
Use it when
- Implementing-realtime-sync explains that SSE provides one-way server-to-client streaming ideal for progressive LLM responses and live.
- Implementing-realtime-sync teaches conflict-free collaborative editing using CRDTs (Conflict-free Replicated Data Types) with libraries.
Verify before relying
Read SKILL.md below before installing (13 files). Open directory: indexed for reading, not audited.
Install
ancoleman/ai-design-components/implementing-realtime-sync · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Stream LLM responses progressively to frontend using SSE or WebSocket”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through building multiplayer editing experiences like Google Docs, handling the full stack from WebSocket transport to conflict resolution strategies. It covers when to use Operational Transform versus CRDTs, how to batch updates efficiently, manage offline queues, and track user presence—plus common pitfalls like broadcasting every keystroke or losing concurrent edits.
Realtime Sync architects high-concurrency synchronization between distributed clients and servers with sub-50ms latency, using WebTransport bidirectional streams, CRDTs for conflict-free collaborative editing, and transactional outbox patterns for database consistency. Covers presence tracking, sequence-based message recovery, AI token stream batching, and backpressure management to prevent UI jitter.
Master real-time data pipelines and event streaming architectures using modern message brokers and processors. This skill covers Kafka, Pulsar, Redpanda, Flink, and Spark across TypeScript, Python, Go, and Java, with patterns for producer/consumer coordination, delivery guarantees, event sourcing, and change data capture.
Synchronization Algorithms equips developers with five core techniques for keeping multiplayer game states consistent across the network. Learn client prediction for responsive input, interpolation for smooth remote movement, rollback netcode for fighting games, and lockstep for deterministic RTS play, each tailored to different latency and precision demands.
Golang Pro equips you with production-grade patterns for concurrent programming, microservices architecture, and high-performance systems in Go 1.21+. Master goroutine lifecycle management, channel-based communication, interface composition, and generics while maintaining race-free code through systematic testing and profiling.
Select and implement the optimal API pattern for your backend needs. This skill guides you through REST, GraphQL, gRPC, and tRPC with framework recommendations for Python, TypeScript, Rust, and Go, plus pagination, caching, rate limiting, and OpenAPI documentation strategies.