implementing-realtime-sync

Name: implementing-realtime-sync
Author: ancoleman

62installs59forks

How to install implementing-realtime-sync?

ancoleman/ai-design-components/implementing-realtime-sync

$npx -y skills add ancoleman/ai-design-components --skill implementing-realtime-sync

Installs into the current project.

Summary

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 (bidirection

Files · 1

View on GitHub

SKILL.md

1	# Real-Time Sync
2
3	Implement real-time communication for live updates, collaboration, and presence awareness across applications.
4
5	## When to Use
6
7	Use this skill when building:
8
9	- LLM streaming interfaces - Stream tokens progressively (ai-chat integration)
10	- Live dashboards - Push metrics and updates to clients
11	- Collaborative editing - Multi-user document/spreadsheet editing with CRDTs
12	- Chat applications - Real-time messaging with presence
13	- Multiplayer features - Cursor tracking, live updates, presence awareness
14	- Offline-first apps - Mobile/PWA with sync-on-reconnect
15
16	## Protocol Selection Framework
17
18	Choose the transport protocol based on communication pattern:
19
20	### Decision Tree
21
22	```
23	ONE-WAY (Server → Client only)
24	├─ LLM streaming, notifications, live feeds
25	└─ Use SSE (Server-Sent Events)
26	├─ Automatic reconnection (browser-native)
27	├─ Event IDs for resumption
28	└─ Simple HTTP implementation
29
30	BIDIRECTIONAL (Client ↔ Server)
31	├─ Chat, games, collaborative editing
32	└─ Use WebSocket
33	├─ Manual reconnection required
34	├─ Binary + text support
35	└─ Lower latency for two-way
36
37	COLLABORATIVE EDITING
38	├─ Multi-user documents/spreadsheets
39	└─ Use WebSocket + CRDT (Yjs or Automerge)
40	├─ CRDT handles conflict resolution
41	├─ WebSocket for transport
42	└─ Offline-first with sync
43
44	PEER-TO-PEER MEDIA
45	├─ Video, screen sharing, voice calls
46	└─ Use WebRTC
47	├─ WebSocket for signaling
48	├─ Direct P2P connection
49	└─ STUN/TURN for NAT traversal
50	```
51
52	### Protocol Comparison
53
54	\| Protocol \| Direction \| Reconnection \| Complexity \| Best For \|
55	\|----------\|-----------\|--------------\|------------\|----------\|
56	\| SSE \| Server → Client \| Automatic \| Low \| Live feeds, LLM streaming \|
57	\| WebSocket \| Bidirectional \| Manual \| Medium \| Chat, games, collaboration \|
58	\| WebRTC \| P2P \| Complex \| High \| Video, screen share, voice \|
59
60	## Implementation Patterns
61
62	### Pattern 1: LLM Streaming with SSE
63
64	Stream LLM tokens progressively to frontend (ai-chat integration).
65
66	Python (FastAPI):
67	```python
68	from sse_starlette.sse import EventSourceResponse
69
70	@app.post("/chat/stream")
71	async def stream_chat(prompt: str):
72	async def generate():
73	async for chunk in llm_stream:
74	yield {"event": "token", "data": chunk.content}
75	yield {"event": "done", "data": "[DONE]"}
76	return EventSourceResponse(generate())
77	```
78
79	Frontend:
80	```typescript
81	const es = new EventSource('/chat/stream')
82	es.addEventListener('token', (e) => appendToken(e.data))
83	```
84
85	Reference `references/sse.md` for full implementations, reconnection, and event ID resumption.
86
87	### Pattern 2: WebSocket Chat
88
89	Bidirectional communication for chat applications.
90
91	Python (FastAPI):
92	```python
93	connections: set[WebSocket] = set()
94
95	@app.websocket("/ws")
96	async def websocket_endpoint(websocket: WebSocket):
97	await websocket.accept()
98	connections.add(websocket)
99	try:
100	while True:
101	data = await websocket.receive_text()
102	for conn in connections:
103	await conn.send_text(data)
104	except WebSocketDisconnect:
105	connections.remove(websocket)
106	```
107
108	Reference `references/websockets.md` for multi-language examples, authentication, heartbeats, and scaling.
109
110	### Pattern 3: Collaborative Editing with CRDTs
111
112	Conflict-free multi-user editing using Yjs.
113
114	TypeScript (Yjs):
115	```typescript
116	import * as Y from 'yjs'
117	import { WebsocketProvider } from 'y-websocket'
118
119	const doc = new Y.Doc()
120	const provider = new WebsocketProvider('ws://localhost:1234', 'doc-id', doc)
121	const ytext = doc.getText('content')
122
123	ytext.observe(event => console.log('Changes:', event.changes))
124	ytext.insert(0, 'Hello collaborative world!')
125	```
126
127	Reference `references/crdts.md` for conflict resolution, Yjs vs Automerge, and advanced patterns.
128
129	### Pattern 4: Presence Awareness
130
131	Track online users, cursor positions, and typing indicators.
132
133	Yjs Awareness API:
134	```typescript
135	const awareness = provider.awareness
136	awareness.setLocalState({ user: { name: 'Alice' }, cursor: { x: 100, y: 200 } })
137	awareness.on('change', () => {
138	awareness.getStates().forEach((state, clientId) => {
139	renderCursor(state.cursor, state.user)
140	})
141	})
142	```
143
144	Reference `references/presence-patterns.md` for cursor tracking, typing indicators, and online status.
145
146	### Pattern 5: Offline Sync (Mobile/PWA)
147
148	Queue mutations locally and sync when connection restored.
149
150	TypeScript (Yjs + IndexedDB):
151	```typescript
152	import { IndexeddbPersistence } f

People who liked this also viewed

6 picks

Type

implementing-realtime-sync

62installs59forks

View on GitHub

How to install implementing-realtime-sync?

ancoleman/ai-design-components/implementing-realtime-sync

$npx -y skills add ancoleman/ai-design-components --skill implementing-realtime-sync

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Real-Time Sync
2
3	Implement real-time communication for live updates, collaboration, and presence awareness across applications.
4
5	## When to Use
6
7	Use this skill when building:
8
9	- LLM streaming interfaces - Stream tokens progressively (ai-chat integration)
10	- Live dashboards - Push metrics and updates to clients
11	- Collaborative editing - Multi-user document/spreadsheet editing with CRDTs
12	- Chat applications - Real-time messaging with presence
13	- Multiplayer features - Cursor tracking, live updates, presence awareness
14	- Offline-first apps - Mobile/PWA with sync-on-reconnect
15
16	## Protocol Selection Framework
17
18	Choose the transport protocol based on communication pattern:
19
20	### Decision Tree
21
22	```
23	ONE-WAY (Server → Client only)
24	├─ LLM streaming, notifications, live feeds
25	└─ Use SSE (Server-Sent Events)
26	├─ Automatic reconnection (browser-native)
27	├─ Event IDs for resumption
28	└─ Simple HTTP implementation
29
30	BIDIRECTIONAL (Client ↔ Server)
31	├─ Chat, games, collaborative editing
32	└─ Use WebSocket
33	├─ Manual reconnection required
34	├─ Binary + text support
35	└─ Lower latency for two-way
36
37	COLLABORATIVE EDITING
38	├─ Multi-user documents/spreadsheets
39	└─ Use WebSocket + CRDT (Yjs or Automerge)
40	├─ CRDT handles conflict resolution
41	├─ WebSocket for transport
42	└─ Offline-first with sync
43
44	PEER-TO-PEER MEDIA
45	├─ Video, screen sharing, voice calls
46	└─ Use WebRTC
47	├─ WebSocket for signaling
48	├─ Direct P2P connection
49	└─ STUN/TURN for NAT traversal
50	```
51
52	### Protocol Comparison
53
54	\| Protocol \| Direction \| Reconnection \| Complexity \| Best For \|
55	\|----------\|-----------\|--------------\|------------\|----------\|
56	\| SSE \| Server → Client \| Automatic \| Low \| Live feeds, LLM streaming \|
57	\| WebSocket \| Bidirectional \| Manual \| Medium \| Chat, games, collaboration \|
58	\| WebRTC \| P2P \| Complex \| High \| Video, screen share, voice \|
59
60	## Implementation Patterns
61
62	### Pattern 1: LLM Streaming with SSE
63
64	Stream LLM tokens progressively to frontend (ai-chat integration).
65
66	Python (FastAPI):
67	```python
68	from sse_starlette.sse import EventSourceResponse
69
70	@app.post("/chat/stream")
71	async def stream_chat(prompt: str):
72	async def generate():
73	async for chunk in llm_stream:
74	yield {"event": "token", "data": chunk.content}
75	yield {"event": "done", "data": "[DONE]"}
76	return EventSourceResponse(generate())
77	```
78
79	Frontend:
80	```typescript
81	const es = new EventSource('/chat/stream')
82	es.addEventListener('token', (e) => appendToken(e.data))
83	```
84
85	Reference `references/sse.md` for full implementations, reconnection, and event ID resumption.
86
87	### Pattern 2: WebSocket Chat
88
89	Bidirectional communication for chat applications.
90
91	Python (FastAPI):
92	```python
93	connections: set[WebSocket] = set()
94
95	@app.websocket("/ws")
96	async def websocket_endpoint(websocket: WebSocket):
97	await websocket.accept()
98	connections.add(websocket)
99	try:
100	while True:
101	data = await websocket.receive_text()
102	for conn in connections:
103	await conn.send_text(data)
104	except WebSocketDisconnect:
105	connections.remove(websocket)
106	```
107
108	Reference `references/websockets.md` for multi-language examples, authentication, heartbeats, and scaling.
109
110	### Pattern 3: Collaborative Editing with CRDTs
111
112	Conflict-free multi-user editing using Yjs.
113
114	TypeScript (Yjs):
115	```typescript
116	import * as Y from 'yjs'
117	import { WebsocketProvider } from 'y-websocket'
118
119	const doc = new Y.Doc()
120	const provider = new WebsocketProvider('ws://localhost:1234', 'doc-id', doc)
121	const ytext = doc.getText('content')
122
123	ytext.observe(event => console.log('Changes:', event.changes))
124	ytext.insert(0, 'Hello collaborative world!')
125	```
126
127	Reference `references/crdts.md` for conflict resolution, Yjs vs Automerge, and advanced patterns.
128
129	### Pattern 4: Presence Awareness
130
131	Track online users, cursor positions, and typing indicators.
132
133	Yjs Awareness API:
134	```typescript
135	const awareness = provider.awareness
136	awareness.setLocalState({ user: { name: 'Alice' }, cursor: { x: 100, y: 200 } })
137	awareness.on('change', () => {
138	awareness.getStates().forEach((state, clientId) => {
139	renderCursor(state.cursor, state.user)
140	})
141	})
142	```
143
144	Reference `references/presence-patterns.md` for cursor tracking, typing indicators, and online status.
145
146	### Pattern 5: Offline Sync (Mobile/PWA)
147
148	Queue mutations locally and sync when connection restored.
149
150	TypeScript (Yjs + IndexedDB):
151	```typescript
152	import { IndexeddbPersistence } f

People who liked this also viewed

6 picks

Type