real-time-collaboration-engine
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.
Real-Time Collaboration Engine builds Google Docs-style collaborative editing with WebSocket sync, conflict resolution, and presence awareness.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-14
Real-Time Collaboration Engine builds Google Docs-style collaborative editing with WebSocket sync, conflict resolution, and presence awareness. 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.
Use it when
- real-time-collaboration-engine explains that CRDTs (Conflict-free Replicated Data Types) guarantee convergence without a central.
- real-time-collaboration-engine covers WebSocket sync with presence awareness: each client sends edits to a server or peers.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
curiositech/some_claude_skills/real-time-collaboration-engine · repository language: TypeScript
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 do I build Google Docs style collaborative editing?
real-time-collaboration-engine guides you through the full stack: establish WebSocket connections for live sync, choose between Operational Transform (OT) and CRDTs based on your consistency needs, implement conflict resolution to merge concurrent edits, and add presence awareness for cursor tracking. The skill covers batching updates efficiently to avoid broadcasting every keystroke, which degrades performance, and handling offline queues so users can edit when disconnected then sync when reconnected.
What's the difference between CRDT and Operational Transform?
real-time-collaboration-engine explains that CRDTs (Conflict-free Replicated Data Types) guarantee convergence without a central server—each client can apply edits in any order and reach the same state. Operational Transform (OT) requires a central authority to transform concurrent operations into a consistent order. CRDTs suit peer-to-peer and offline-first apps; OT works well when you have a reliable server. The skill helps you evaluate trade-offs in complexity, latency, and architecture for your use case.
How do I sync edits between multiple users in real time?
real-time-collaboration-engine covers WebSocket sync with presence awareness: each client sends edits to a server or peers, which broadcasts changes back. Use optimistic updates—apply changes locally immediately, then reconcile if conflicts arise. Batch changes to reduce message overhead. For offline scenarios, queue edits locally and replay them when reconnected. The skill details conflict resolution strategies so concurrent edits don't overwrite each other, and how to track cursor positions and user presence.
What are best practices for handling concurrent edits?
real-time-collaboration-engine emphasizes choosing the right conflict resolution model upfront: OT transforms overlapping operations into a consistent sequence, while CRDTs assign unique identifiers so edits commute. Avoid broadcasting every keystroke—batch updates and send them periodically. Implement optimistic updates so the UI feels responsive. Handle reconnection gracefully by replaying queued changes. Test edge cases like simultaneous deletes, rapid insertions, and network partitions to catch lost edits before production.
How do I track cursor positions and presence awareness?
real-time-collaboration-engine shows how to send cursor metadata alongside edits: include user ID, position, and selection range in each message. Broadcast presence updates (join/leave/idle) over WebSocket so clients render remote cursors. Debounce cursor updates to reduce traffic. Store presence state on the server or use a CRDT to track it peer-to-peer. The skill covers rendering remote cursors with user colors and names, and cleaning up stale presence when users disconnect or timeout.
How should I handle offline sync and optimistic updates?
real-time-collaboration-engine advises queuing edits locally when offline, applying them optimistically to the UI immediately. When reconnected, replay the queue and let conflict resolution merge them with server changes. Use version vectors or timestamps to detect which edits succeeded. For CRDTs, offline edits naturally merge on reconnect. For OT, the server transforms queued ops against intervening changes. The skill warns against losing queued edits on page reload—persist them to localStorage or IndexedDB.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Real-Time Collaboration Engine
Expert in building Google Docs-style collaborative editing with WebSockets, conflict resolution, and
(truncated - see the full file via the links below)
File tree — 6 files
.claude/skills/real-time-collaboration-engine/SKILL.md
.claude/skills/real-time-collaboration-engine/references/ot-vs-crdt.md
.claude/skills/real-time-collaboration-engine/references/presence-patterns.md
.claude/skills/real-time-collaboration-engine/references/websocket-scaling.md
.claude/skills/real-time-collaboration-engine/scripts/collaboration_tester.ts
.claude/skills/real-time-collaboration-engine/scripts/latency_simulator.ts
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 › “Build real-time collaborative editing with conflict resolution”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
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.
Video Processing & Editing automates FFmpeg-based workflows for cutting, trimming, concatenating, and exporting video content. It handles audio mixing, subtitle management, and platform-specific optimization without requiring manual editing interfaces. Use it for production pipelines and batch processing; not for real-time UI editing or 3D compositing.
This skill enables you to write and run Playwright test scripts within Claude Code, automating verification of web application UI behavior and user interactions. Deploy comprehensive browser-based testing workflows without leaving your coding environment.
spline-interactive equips Claude Code with a professional design agency toolkit for crafting interactive 3D web experiences. Leverage integrated support for Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and modern web frameworks to build visually rich applications without manual code entry.
This skill equips you with post-processing capabilities for Three.js projects, letting you layer effects like bloom, depth of field, and color grading onto your 3D scenes. Whether you're building interactive visualizations or game-like environments, you'll learn to apply sophisticated visual enhancements that transform raw renders into production-ready graphics. Perfect for developers who want to elevate their WebGL output without rewriting core rendering logic.