Is this suitable for production scaling?

Yes, it includes specific guidance on scaling real-time services horizontally using Redis Pub/Sub to broadcast messages across multiple server instances.

When should I use SSE instead of WebSockets?

Use SSE (Server-Sent Events) for one-way server-to-client communication like LLM token streaming or notifications, as it handles reconnection automatically. Use WebSockets for bidirectional data like chat or real-time games.

Does this skill support multi-user collaboration?

Yes, it includes implementation patterns for CRDTs (Conflict-free Replicated Data Types) using Yjs and Automerge to enable seamless, conflict-free multi-user editing.

How do I handle offline synchronization?

The skill covers offline-first patterns using IndexedDB and CRDTs to queue local changes and synchronize them automatically once a network connection is restored.

Can I use this with different backend languages?

Absolutely. The skill provides implementation examples and library recommendations for Python (FastAPI/Flask), Rust (Axum), Go, and TypeScript/Node.js.

Real-Time Sync & Collaboration

Name: Real-Time Sync & Collaboration
Author: ancoleman

byancoleman

•

158

•

API開発

Implements real-time communication patterns for live updates, collaborative editing, and streaming data across modern web applications.

This skill provides a comprehensive framework for building responsive, real-time applications using SSE, WebSockets, and WebRTC. It guides developers through protocol selection—from simple LLM token streaming to complex multi-user collaborative environments using CRDTs like Yjs. With support for Python, Rust, Go, and TypeScript, it offers production-ready patterns for presence awareness, offline synchronization, and horizontal scaling with Redis, making it essential for building modern interactive AI interfaces and collaboration tools.

主な機能

01Multi-user collaborative editing using conflict-free replicated data types (CRDTs)

02LLM token streaming patterns for responsive AI chat interfaces

03Scaling strategies for real-time services using Redis Pub/Sub

04Presence awareness implementation for cursor tracking and status updates

05Protocol selection framework for SSE, WebSockets, and WebRTC

06158 GitHub stars

ユースケース

01Developing collaborative document editors with multi-user cursor tracking

02Building streaming LLM chat interfaces with progressive token delivery

03Implementing live dashboards and real-time metric tracking for monitoring tools

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ancoleman/ai-design-components implementing-realtime-sync

For use in Claude.ai and ChatGPT

Download Skill