New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Implementing Realtime Sync

by ancoleman in ancoleman/ai-design-components

Real-time communication patterns for live updates, collaboration, and presence.

MITAuto-check passedBackend & APIs

Install Implementing Realtime Sync

skills CLI
$ npx skills add ancoleman/ai-design-components --skill implementing-realtime-sync -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ancoleman/ai-design-components implementing-realtime-sync --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ancoleman/ai-design-components.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/implementing-realtime-sync .claude/skills/implementing-realtime-sync && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
implementing-realtime-sync
GitHub stars
526
Token cost
~2.3k tokens
SKILL.md length
508 words
Files
13 (incl. scripts, references)
Skills in repo
75
Repo updated
First seen
Licence
MIT

At a glance

Real-time communication patterns for live updates, collaboration, and presence.

  • Building chat applications
  • SKILL.md covers When to Use, Protocol Selection Framework, Implementation Patterns and Library Recommendations, plus 7 more sections
  • Runs Python scripts from its folder; calls fastapi
  • Collaborative tools

What it does

Implementing Realtime Sync is an agent skill from ancoleman/ai-design-components. Real-time communication patterns for live updates, collaboration, and presence. Use when building chat applications, collaborative tools, live dashboards, or streaming interfaces (LLM responses, metrics). Covers SSE (server-sent events for one-way streams), WebSocket (bidirectional communication), WebRTC (peer-to-peer video/audio), CRDTs (Yjs, Automerge for conflict-free collaboration), presence patterns, offline sync, and scaling strategies. Supports Python, Rust, Go, and TypeScript.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including scripts and reference files (for example `examples/llm-streaming-sse/README.md`, `examples/llm-streaming-sse/backend.py` and `outputs.yaml`).

It sits in Backend & APIs, covering Realtime and WebSockets. It works with Python, TypeScript, Rust and FastAPI. The repository describes itself as: Comprehensive UI/UX and Backend component design skills for AI-assisted development with Claude. The licence is MIT.

When your agent uses it

  • Building chat applications
  • Collaborative tools
  • Live dashboards
  • Streaming interfaces (LLM responses

Example prompts

  • “/implementing-realtime-sync”

Requirements

  • Python 3
  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 76551b7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • fastapi

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Implementing Realtime Sync loads about 2.3k tokens when it runs, and up to ~23k if it reads all its reference files. Until then it costs about 129 tokens; SKILL.md has 508 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~23k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from ancoleman/ai-design-components at commit 76551b7, republished under its MIT licence (© ancoleman). 508 words, ~2,266 tokens.

Download SKILL.mdSave it as .claude/skills/implementing-realtime-sync/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
implementing-realtime-sync
description
Real-time communication patterns for live updates, collaboration, and presence. Use when building chat applications, collaborative tools, live dashboards, or streaming interfaces (LLM responses, metrics). Covers SSE (server-sent events for one-way streams), WebSocket (bidirectional communication), WebRTC (peer-to-peer video/audio), CRDTs (Yjs, Automerge for conflict-free collaboration), presence patterns, offline sync, and scaling strategies. Supports Python, Rust, Go, and TypeScript.

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 transport protocol based on communication pattern:

Decision Tree
ONE-WAY (Server → Client only)
├─ LLM streaming, notifications, live feeds
└─ Use SSE (Server-Sent Events)
   ├─ Automatic reconnection (browser-native)
   ├─ Event IDs for resumption
   └─ Simple HTTP implementation

BIDIRECTIONAL (Client ↔ Server)
├─ Chat, games, collaborative editing
└─ Use WebSocket
   ├─ Manual reconnection required
   ├─ Binary + text support
   └─ Lower latency for two-way

COLLABORATIVE EDITING
├─ Multi-user documents/spreadsheets
└─ Use WebSocket + CRDT (Yjs or Automerge)
   ├─ CRDT handles conflict resolution
   ├─ WebSocket for transport
   └─ Offline-first with sync

PEER-TO-PEER MEDIA
├─ Video, screen sharing, voice calls
└─ Use WebRTC
   ├─ WebSocket for signaling
   ├─ Direct P2P connection
   └─ STUN/TURN for NAT traversal
Protocol Comparison
ProtocolDirectionReconnectionComplexityBest For
SSEServer → ClientAutomaticLowLive feeds, LLM streaming
WebSocketBidirectionalManualMediumChat, games, collaboration
WebRTCP2PComplexHighVideo, screen share, voice

Implementation Patterns

Pattern 1: LLM Streaming with SSE

Stream LLM tokens progressively to frontend (ai-chat integration).

Python (FastAPI):

python
from sse_starlette.sse import EventSourceResponse

@app.post("/chat/stream")
async def stream_chat(prompt: str):
    async def generate():
        async for chunk in llm_stream:
            yield {"event": "token", "data": chunk.content}
        yield {"event": "done", "data": "[DONE]"}
    return EventSourceResponse(generate())

Frontend:

typescript
const es = new EventSource('/chat/stream')
es.addEventListener('token', (e) => appendToken(e.data))

Reference references/sse.md for full implementations, reconnection, and event ID resumption.

Pattern 2: WebSocket Chat

Bidirectional communication for chat applications.

Python (FastAPI):

python
connections: set[WebSocket] = set()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    connections.add(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            for conn in connections:
                await conn.send_text(data)
    except WebSocketDisconnect:
        connections.remove(websocket)

Reference references/websockets.md for multi-language examples, authentication, heartbeats, and scaling.

Pattern 3: Collaborative Editing with CRDTs

Conflict-free multi-user editing using Yjs.

TypeScript (Yjs):

typescript
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const provider = new WebsocketProvider('ws://localhost:1234', 'doc-id', doc)
const ytext = doc.getText('content')

ytext.observe(event => console.log('Changes:', event.changes))
ytext.insert(0, 'Hello collaborative world!')

Reference references/crdts.md for conflict resolution, Yjs vs Automerge, and advanced patterns.

Pattern 4: Presence Awareness

Track online users, cursor positions, and typing indicators.

Yjs Awareness API:

typescript
const awareness = provider.awareness
awareness.setLocalState({ user: { name: 'Alice' }, cursor: { x: 100, y: 200 } })
awareness.on('change', () => {
  awareness.getStates().forEach((state, clientId) => {
    renderCursor(state.cursor, state.user)
  })
})

Reference references/presence-patterns.md for cursor tracking, typing indicators, and online status.

Pattern 5: Offline Sync (Mobile/PWA)

Queue mutations locally and sync when connection restored.

TypeScript (Yjs + IndexedDB):

typescript
import { IndexeddbPersistence } from 'y-indexeddb'
import { WebsocketProvider } from 'y-websocket'

const doc = new Y.Doc()
const indexeddbProvider = new IndexeddbPersistence('my-doc', doc)
const wsProvider = new WebsocketProvider('wss://api.example.com/sync', 'my-doc', doc)

wsProvider.on('status', (e) => {
  console.log(e.status === 'connected' ? 'Online' : 'Offline')
})

Reference references/offline-sync.md for conflict resolution and sync strategies.

Library Recommendations

Python

WebSocket:

  • websockets 13.x - AsyncIO-based, production-ready
  • FastAPI WebSocket - Built-in, dependency injection
  • Flask-SocketIO - Socket.IO protocol with fallbacks

SSE:

  • sse-starlette - FastAPI/Starlette, async, generator-based
  • Flask-SSE - Redis backend for pub/sub
Rust

WebSocket:

  • tokio-tungstenite 0.23 - Tokio integration, production-ready
  • axum WebSocket - Built-in extractors, tower middleware

SSE:

  • axum SSE - Native support, async streams
Go

WebSocket:

  • gorilla/websocket - Battle-tested, compression support
  • nhooyr/websocket - Modern API, context support

SSE:

  • net/http (native) - Flusher interface, no dependencies
Show full SKILL.md (211 more words)Show less
TypeScript

WebSocket:

  • ws - Native WebSocket server, lightweight
  • Socket.io 4.x - Auto-reconnect, fallbacks, rooms
  • Hono WebSocket - Edge runtime (Cloudflare Workers, Deno)

SSE:

  • EventSource (native) - Browser-native, automatic retry
  • Node.js http (native) - Server-side, no dependencies

CRDT:

  • Yjs - Mature, TypeScript/Rust, rich text editing
  • Automerge - Rust/JS, JSON-like data, time-travel

Reconnection Strategies

SSE: Browser's EventSource handles reconnection automatically with exponential backoff. WebSocket: Implement manual exponential backoff with jitter to prevent thundering herd.

Reference references/sse.md and references/websockets.md for complete implementation patterns.

Security Patterns

Authentication: Use cookie-based (same-origin) or token in Sec-WebSocket-Protocol header. Rate Limiting: Implement per-user message throttling with sliding window.

Reference references/websockets.md for authentication and rate limiting implementations.

Scaling with Redis Pub/Sub

For horizontal scaling, use Redis pub/sub to broadcast messages across multiple backend servers.

Reference references/websockets.md for complete Redis scaling implementation.

Frontend Integration

React Hooks Pattern

SSE for LLM Streaming (ai-chat):

typescript
useEffect(() => {
  const es = new EventSource(`/api/chat/stream?prompt=${prompt}`)
  es.addEventListener('token', (e) => setContent(prev => prev + e.data))
  return () => es.close()
}, [prompt])

WebSocket for Live Metrics (dashboards):

typescript
useEffect(() => {
  const ws = new WebSocket('ws://localhost:8000/metrics')
  ws.onmessage = (e) => setMetrics(JSON.parse(e.data))
  return () => ws.close()
}, [])

Yjs for Collaborative Tables:

typescript
useEffect(() => {
  const doc = new Y.Doc()
  const provider = new WebsocketProvider('ws://localhost:1234', docId, doc)
  const yarray = doc.getArray('rows')
  yarray.observe(() => setRows(yarray.toArray()))
  return () => provider.destroy()
}, [docId])

Reference Documentation

For detailed implementation patterns, consult:

  • references/sse.md - SSE protocol, reconnection, event IDs
  • references/websockets.md - WebSocket auth, heartbeats, scaling
  • references/crdts.md - Yjs vs Automerge, conflict resolution
  • references/presence-patterns.md - Cursor tracking, typing indicators
  • references/offline-sync.md - Mobile patterns, conflict strategies

Example Projects

Working implementations available in:

  • examples/llm-streaming-sse/ - FastAPI SSE for LLM streaming (RUNNABLE)
  • examples/chat-websocket/ - Python FastAPI + TypeScript chat
  • examples/collaborative-yjs/ - Yjs collaborative editor

Testing Tools

Use scripts to validate implementations:

  • scripts/test_websocket_connection.py - WebSocket connection testing

© ancoleman, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (scripts, references) in skills/implementing-realtime-sync of ancoleman/ai-design-components.

  • SKILL.md
  • examples/llm-streaming-sse/.env.example
  • examples/llm-streaming-sse/README.md
  • examples/llm-streaming-sse/backend.py
  • examples/llm-streaming-sse/frontend.html
  • examples/llm-streaming-sse/requirements.txt
  • outputs.yaml
  • references/crdts.md
  • references/offline-sync.md
  • references/presence-patterns.md
  • references/sse.md
  • references/websockets.md
  • scripts/test_websocket_connection.py

Open the folder on GitHubat commit 76551b7

Compare with similar skills

Implementing Realtime Sync next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Implementing Realtime Sync compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Implementing Realtime Sync this skillancoleman/ai-design-components526—~2.3kAutomated safety check: PassMIT
Kkrpc Interopkunkunsh/kkrpc174—~1.8kAutomated safety check: PassMIT
Gemini Live API Devgoogle-gemini/gemini-skills4.3k—~4.6kAutomated safety check: PassApache-2.0
Web3 PolymarketPolymarket/agent-skills1912 repos~2kAutomated safety check: PassNone
Temporal Developertemporalio/skill-temporal-developer230—~2.5kAutomated safety check: PassMIT
Media over QUICmoq-dev/moq1.6k—~460Automated safety check: PassApache-2.0

Similar skills

  • Kkrpc Interop

    kunkunsh/kkrpc

    A skill your agent uses when implementing kkrpc clients or servers in non-TypeScript languages, speaking the stable compact protocol, transports, and reference implementations in Go, Python, Rust…

    174 GitHub stars~1.8k tokensUpdated 26 days ago
    Backend & APIsAuto-check passed

  • Gemini Live API Dev

    google-gemini/gemini-skills

    Official

    A skill your agent uses when building real-time, bidirectional streaming applications with the Gemini Live API, or migrating legacy Live models (2.0/2.5/3.1) to Gemini 3.8 Live.

    4.3k GitHub stars~4.6k tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Web3 Polymarket

    Polymarket/agent-skills

    Polymarket integration for prediction market trading on Polygon.

    191 GitHub starsUsed in 2 repos~2k tokens
    Backend & APIsAuto-check passed

  • Temporal Developer

    temporalio/skill-temporal-developer

    Official

    Develop, debug, and manage Temporal applications across Python, TypeScript, Go, Java, .NET, Ruby, and Rust.

    230 GitHub stars~2.5k tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Media over QUIC

    moq-dev/moq

    Build live video, audio, and real-time data apps with Media over QUIC (MoQ). Use when adding live streaming, conferencing, voice AI, or real-time pub/sub to…

    1.6k GitHub stars~460 tokensUpdated today
    Backend & APIsAuto-check passed

  • Starlette

    simonw/research

    Build async web applications and APIs with Starlette 1.0, the lightweight ASGI framework for Python.

    783 GitHub stars~8.6k tokensUpdated 3 days ago
    Backend & APIsAuto-check: notes

More from ancoleman/ai-design-components

All 75 skills in this repo

  • Building AI Chat

    ancoleman/ai-design-components

    Builds AI chat interfaces and conversational UI with streaming responses, context management, and multi-modal support.

    526 GitHub starsUsed in 1 repo~3.4k tokens
    Auto-check passed

  • Building Forms

    ancoleman/ai-design-components

    Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages.

    526 GitHub stars~3.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Building Tables

    ancoleman/ai-design-components

    Builds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids.

    526 GitHub stars~1.8k tokensUpdated 10 mo ago
    Auto-check passed

  • Creating Dashboards

    ancoleman/ai-design-components

    Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts.

    526 GitHub stars~3.5k tokensUpdated 10 mo ago
    Auto-check passed

  • Designing Layouts

    ancoleman/ai-design-components

    Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints.

    526 GitHub stars~1.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Displaying Timelines

    ancoleman/ai-design-components

    Displays chronological events and activity through timelines, activity feeds, Gantt charts, and calendar interfaces.

    526 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Implementing Realtime Sync

What does Implementing Realtime Sync do?

Real-time communication patterns for live updates, collaboration, and presence. Implementing Realtime Sync is an agent skill from ancoleman/ai-design-components. Real-time communication patterns for live updates, collaboration, and presence.

When should I use Implementing Realtime Sync?

Implementing Realtime Sync fits situations like: building chat applications; collaborative tools; live dashboards; streaming interfaces (LLM responses.

How do I install Implementing Realtime Sync in Claude Code?

Run `npx skills add ancoleman/ai-design-components --skill implementing-realtime-sync -a claude-code`. Or copy the skill folder (skills/implementing-realtime-sync in ancoleman/ai-design-components) into .claude/skills/implementing-realtime-sync in your project. Claude Code loads it when a task matches its description.

How do I install Implementing Realtime Sync in Codex?

Run `npx skills add ancoleman/ai-design-components --skill implementing-realtime-sync -a codex`. Or copy the skill folder (skills/implementing-realtime-sync in ancoleman/ai-design-components) into .agents/skills/implementing-realtime-sync in your project. Codex loads it when a task matches its description.

Can I use Implementing Realtime Sync in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ancoleman/ai-design-components --skill implementing-realtime-sync -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/implementing-realtime-sync, .gemini/skills/implementing-realtime-sync, .github/skills/implementing-realtime-sync and .opencode/skills/implementing-realtime-sync in your project.

What does Implementing Realtime Sync need to run?

Going by SKILL.md and its folder, Implementing Realtime Sync needs Python for the scripts in its folder and the command-line tools its instructions call (fastapi). Our summary lists: Python 3; Node.js.

Does Implementing Realtime Sync access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Implementing Realtime Sync safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Implementing Realtime Sync use?

Implementing Realtime Sync is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Implementing Realtime Sync use?

About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 21k tokens, read only when the agent opens those files.

What are the alternatives to Implementing Realtime Sync?

Skills that share tags, products or a category with Implementing Realtime Sync: Kkrpc Interop (kunkunsh/kkrpc, 174 stars), Gemini Live API Dev (google-gemini/gemini-skills, 4.3k stars), Web3 Polymarket (Polymarket/agent-skills, 191 stars) and Temporal Developer (temporalio/skill-temporal-developer, 230 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Implementing Realtime Sync?

ancoleman (a GitHub user) maintains it in ancoleman/ai-design-components, which has 526 GitHub stars. The repository holds 75 skills in this directory. The repository was last updated on December 11, 2025.

Source: ancoleman/ai-design-components on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.