🎯

real-time-collaboration-engine

🎯Skill

from erichowens/some_claude_skills

What it does

real-time-collaboration-engine skill from erichowens/some_claude_skills

📦

Part of

erichowens/some_claude_skills(148 items)

real-time-collaboration-engine

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add erichowens/some_claude_skills

Install PluginInstall plugin from marketplace

/plugin install adhd-design-expert@some-claude-skills

Install PluginInstall plugin from marketplace

/plugin install some-claude-skills@some-claude-skills

git cloneClone repository

git clone https://github.com/erichowens/some_claude_skills.git

Claude Desktop ConfigurationAdd this to your claude_desktop_config.json

{
  "mcpServers": {
    "prompt-learning": {
      "command": "npx",
      "args...

📖 Extracted from docs: erichowens/some_claude_skills

Need more details? View full documentation on GitHub →

12Installs

Last UpdatedJan 23, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Build real-time collaborative editing with WebSockets, OT/CRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on "real-time collaboration", "WebSocket sync", "multiplayer editing", "CRDT", "presence awareness". NOT for simple chat, request-response APIs, or single-user apps.

Overview

# Real-Time Collaboration Engine

Expert in building Google Docs-style collaborative editing with WebSockets, conflict resolution, and presence awareness.

When to Use

✅ Use for:

Collaborative text/code editors
Shared whiteboards and design tools
Multi-user video editing timelines
Real-time data dashboards
Multiplayer game state sync

❌ NOT for:

Simple chat applications (use basic WebSocket)
Request-response APIs (use REST/GraphQL)
Single-user applications
Read-only data streaming (use Server-Sent Events)

Quick Decision Tree

```

Need real-time collaboration?

├── Text editing? → Operational Transform (OT)

├── JSON data structures? → CRDTs

├── Cursor tracking only? → Simple WebSocket + presence

├── Offline-first? → CRDTs (better offline merge)

└── No conflicts possible? → Basic broadcast

```

---

Technology Selection

Conflict Resolution Strategies (2024)

|----------|----------|------------|-----------------|

Timeline:

2010: Google Wave uses OT
2014: Figma adopts CRDTs
2019: Yjs (CRDT library) released
2022: Automerge 2.0 (CRDT library) released
2024: PartyKit simplifies real-time infrastructure

---

Common Anti-Patterns

Anti-Pattern 1: Broadcasting Every Keystroke

Novice thinking: "Send every change immediately for real-time feel"

Problem: Network floods with tiny messages, poor performance.

Wrong approach:

```typescript

// ❌ Sends message on every keystroke

function Editor() {

const handleChange = (text: string) => {

socket.emit('text-change', { text }); // Every keystroke!

};

return handleChange(e.target.value)} />;}```Why wrong: 100 WPM typing = 500 messages/minute = network congestion.Correct approach:```typescript// ✅ Batches changes every 200msfunction Editor() { const [pendingChanges, setPendingChanges] = useState<Change[]>([]); useEffect(() => { const interval = setInterval(() => { if (pendingChanges.length > 0) { socket.emit('text-batch', { changes: pendingChanges }); setPendingChanges([]); } }, 200); return () => clearInterval(interval); }, [pendingChanges]); const handleChange = (change: Change) => { setPendingChanges(prev => [...prev, change]); }; return <textarea onChange={handleChange} />;}```Impact: 500 messages/minute → 5 messages/second (90% reduction).---<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Anti-Pattern 2: No Conflict Resolution Strategy</h4>Problem: Concurrent edits cause data loss or corruption.Symptom: Users see their changes disappear, documents become inconsistent.Wrong approach:```typescript// ❌ Last write wins, overwrites concurrent changessocket.on('text-change', ({ userId, text }) => { setDocument(text); // Loses concurrent edits!});```Why wrong: If User A and B edit simultaneously, one change is lost.Correct approach (OT):```typescript// ✅ Operational Transform for textimport { TextOperation } from 'ot.js';socket.on('operation', ({ userId, operation, revision }) => { const transformed = transformOperation( operation, pendingOperations, revision ); applyOperation(transformed); incrementRevision();});function transformOperation( incoming: Operation, pending: Operation[], baseRevision: number): Operation { // Transform incoming against pending operations let transformed = incoming; for (const op of pending) { transformed = TextOperation.transform(transformed, op)[0]; } return transformed;}```Correct approach (CRDT):```typescript// ✅ CRDT for JSON objectsimport * as Y from 'yjs';const ydoc = new Y.Doc();const ytext = ydoc.getText('document');// Automatically handles conflictsytext.insert(0, 'Hello');// Sync with peersconst provider = new WebsocketProvider('ws://localhost:1234', 'room', ydoc);```Impact: Concurrent edits merge correctly, no data loss.---<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Anti-Pattern 3: Not Handling Disconnections</h4>Problem: User goes offline, loses work or sees stale state.Wrong approach:```typescript// ❌ No offline handlingsocket.on('disconnect', () => { console.log('Disconnected'); // That's it?!});```Why wrong: Pending changes lost, no reconnection strategy, bad UX.Correct approach:```typescript// ✅ Queue changes offline, sync on reconnectconst [isOnline, setIsOnline] = useState(true);const [offlineQueue, setOfflineQueue] = useState<Change[]>([]);socket.on('disconnect', () => { setIsOnline(false); showToast('Offline - changes will sync when reconnected');});socket.on('connect', () => { setIsOnline(true); // Send queued changes if (offlineQueue.length > 0) { socket.emit('sync-offline-changes', { changes: offlineQueue }); setOfflineQueue([]); }});const handleChange = (change: Change) => { if (isOnline) { socket.emit('change', change); } else { setOfflineQueue(prev => [...prev, change]); }};```Timeline context:<ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400">2015: Offline-first apps rare</li><li class="text-zinc-600 dark:text-zinc-400">2020: PWAs make offline UX standard</li><li class="text-zinc-600 dark:text-zinc-400">2024: Users expect seamless offline editing</li></ul>---<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Anti-Pattern 4: Client-Only State Sync</h4>Problem: No server authority, clients get out of sync.Wrong approach:```typescript// ❌ Clients broadcast to each other directlysocket.on('peer-change', ({ userId, change }) => { applyChange(change); // No validation, no server state});```Why wrong: Malicious client can send invalid data, no recovery from desync.Correct approach:```typescript// ✅ Server is source of truth// Clientsocket.emit('operation', { operation, clientRevision });socket.on('ack', ({ serverRevision }) => { if (serverRevision !== expectedRevision) { // Desync detected, request full state socket.emit('request-full-state'); }});// Serverio.on('connection', (socket) => { socket.on('operation', ({ operation, clientRevision }) => { // Validate operation if (!isValid(operation)) { socket.emit('error', { message: 'Invalid operation' }); return; } // Apply to server state const serverRevision = applyOperation(operation); // Broadcast to all clients io.emit('operation', { operation, serverRevision }); });});```Impact: Data integrity guaranteed, can recover from client bugs.---<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Anti-Pattern 5: No Presence Awareness</h4>Problem: Users can't see who's editing what, causing edit conflicts.Symptom: Two people editing same section unknowingly.Wrong approach:```typescript// ❌ No awareness of other usersfunction Editor() { return <textarea />; // Flying blind!}```Correct approach:```typescript// ✅ Show active users and cursorsimport { usePresence } from './usePresence';function Editor() { const { users, updateCursor } = usePresence(); const handleCursorMove = (position: number) => { socket.emit('cursor-move', { userId: myId, position }); }; return ( <div> {/ Show who's online /} <UserList users={users} /> {/ Show remote cursors /} <EditorWithCursors content={content} cursors={users.map(u => u.cursor)} onCursorMove={handleCursorMove} /> </div> );}```Features:<ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400">Active user list with avatars</li><li class="text-zinc-600 dark:text-zinc-400">Cursor positions color-coded by user</li><li class="text-zinc-600 dark:text-zinc-400">Selection ranges highlighted</li><li class="text-zinc-600 dark:text-zinc-400">"User X is typing..." indicators</li></ul>---</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Implementation Patterns</h3><div><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pattern 1: WebSocket Setup with Reconnection</h4>```typescriptimport { io } from 'socket.io-client';const socket = io('ws://localhost:3000', { reconnection: true, reconnectionDelay: 1000, reconnectionDelayMax: 5000, reconnectionAttempts: Infinity, transports: ['websocket', 'polling'] // Fallback});socket.on('connect', () => { console.log('Connected:', socket.id);});socket.on('disconnect', (reason) => { if (reason === 'io server disconnect') { // Server disconnected, manually reconnect socket.connect(); }});socket.on('connect_error', (error) => { console.error('Connection error:', error);});```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pattern 2: Operational Transform (Text)</h4>```typescriptimport { TextOperation } from 'ot.js';class OTEditor { private revision = 0; private pendingOperations: TextOperation[] = []; applyLocalOperation(op: TextOperation): void { // Apply immediately (optimistic update) this.applyToEditor(op); // Send to server this.sendOperation(op); // Store as pending this.pendingOperations.push(op); } receiveRemoteOperation(op: TextOperation, serverRevision: number): void { // Transform against pending operations let transformed = op; for (const pending of this.pendingOperations) { [transformed, pending] = TextOperation.transform(transformed, pending); } // Apply transformed operation this.applyToEditor(transformed); this.revision = serverRevision; } acknowledgeOperation(serverRevision: number): void { // Remove acknowledged operation from pending this.pendingOperations.shift(); this.revision = serverRevision; }}```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pattern 3: CRDT with Yjs</h4>```typescriptimport * as Y from 'yjs';import { WebsocketProvider } from 'y-websocket';// Create shared documentconst ydoc = new Y.Doc();// Define shared typesconst ytext = ydoc.getText('content');const ymap = ydoc.getMap('metadata');const yarray = ydoc.getArray('users');// Connect to sync serverconst provider = new WebsocketProvider( 'ws://localhost:1234', 'room-name', ydoc);// Listen to changesytext.observe(event => { console.log('Text changed:', event.changes);});// Make changes (automatically synced)ytext.insert(0, 'Hello ');ytext.insert(6, 'World!');// Undo/redo supportconst undoManager = new Y.UndoManager(ytext);undoManager.undo();undoManager.redo();```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pattern 4: Presence Awareness</h4>```typescriptimport { Awareness } from 'y-protocols/awareness';const awareness = provider.awareness;// Set local stateawareness.setLocalState({ user: { name: 'Alice', color: '#ff0000', cursor: { line: 10, ch: 5 } }});// Listen to changesawareness.on('change', ({ added, updated, removed }) => { // Update UI with user cursors/selections const states = awareness.getStates(); states.forEach((state, clientId) => { if (clientId !== awareness.clientID) { renderCursor(state.user.cursor, state.user.color); } });});```<h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pattern 5: Optimistic Updates with Rollback</h4>```typescriptclass OptimisticEditor { private optimisticChanges = new Map<string, Change>(); async applyChange(change: Change): Promise<void> { const changeId = generateId(); // Apply immediately (optimistic) this.applyToUI(change); this.optimisticChanges.set(changeId, change); try { // Send to server const result = await this.sendToServer(change); // Success - remove from optimistic this.optimisticChanges.delete(changeId); } catch (error) { // Failed - rollback this.rollback(changeId); this.showError('Could not apply change'); } } private rollback(changeId: string): void { const change = this.optimisticChanges.get(changeId); if (change) { this.revertInUI(change); this.optimisticChanges.delete(changeId); } }}```---</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Production Checklist</h3><div>```□ WebSocket connection with auto-reconnect□ Offline queue for pending changes□ Conflict resolution strategy (OT or CRDT)□ Server authority (clients can't desync)□ Presence awareness (cursors, active users)□ Optimistic updates with rollback□ Change batching (not per-keystroke)□ Message compression for large payloads□ Authentication and authorization□ Rate limiting (prevent spam)□ Heartbeat/ping-pong to detect dead connections□ Graceful degradation (falls back to polling if WebSocket fails)```---</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">When to Use vs Avoid</h3><div>| Scenario | Strategy ||----------|----------|| Text editing (Google Docs) | ✅ Operational Transform || JSON objects (Figma) | ✅ CRDTs (Yjs, Automerge) || Simple cursor sharing | ✅ Basic WebSocket + presence || Chat messages | ✅ Simple append-only (no OT/CRDT) || Video timeline editing | ✅ CRDTs for timeline, OT for text || Read-only dashboards | ❌ Use Server-Sent Events instead |---</div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">References</h3><div><ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400"><code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">/references/ot-vs-crdt.md</code> - Deep comparison of conflict resolution strategies</li><li class="text-zinc-600 dark:text-zinc-400"><code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">/references/websocket-scaling.md</code> - Scaling to millions of concurrent connections</li><li class="text-zinc-600 dark:text-zinc-400"><code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">/references/presence-patterns.md</code> - Cursor tracking, user awareness, activity indicators</li></ul></div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Scripts</h3><div><ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400"><code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">scripts/collaboration_tester.ts</code> - Simulate concurrent edits, test conflict resolution</li><li class="text-zinc-600 dark:text-zinc-400"><code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">scripts/latency_simulator.ts</code> - Test behavior under high latency/packet loss</li></ul>---This skill guides: Real-time collaboration | WebSocket architecture | Operational Transform | CRDTs | Presence awareness | Conflict resolution</div></div></div></div></div><div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800"><h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white">More from this repository10</h2><div class="grid gap-3 sm:grid-cols-2"><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/cv-creator">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">cv-creator🎯Skill</div>cv-creator skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/metal-shader-expert">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">metal-shader-expert🎯Skill</div>metal-shader-expert skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/video-processing-editing">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">video-processing-editing🎯Skill</div>video-processing-editing skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/ai-video-production-master">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">ai-video-production-master🎯Skill</div>ai-video-production-master skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/pwa-expert">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">pwa-expert🎯Skill</div>pwa-expert skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/sound-engineer">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">sound-engineer🎯Skill</div>sound-engineer skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/mdx-sanitizer">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">mdx-sanitizer🎯Skill</div>Sanitizes MDX content by escaping angle brackets, generics, and JSX-conflicting patterns to prevent build failures and parsing errors.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/indie-monetization-strategist">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">indie-monetization-strategist🎯Skill</div>indie-monetization-strategist skill from erichowens/some_claude_skills</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/mobile-ux-optimizer">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">mobile-ux-optimizer🎯Skill</div>Optimizes mobile user interfaces by implementing touch-friendly, responsive design patterns with proper viewport handling and performance considerations.</div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/erichowens/some_claude_skills/job-application-optimizer">🎯<div class="min-w-0 flex-1"><div class="flex items-center gap-2">job-application-optimizer🎯Skill</div>job-application-optimizer skill from erichowens/some_claude_skills</div></a></div></div></div></main><footer class="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="md:col-span-1"><a class="flex items-center" href="/"><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="h-8 w-auto dark:hidden" style="color:transparent" src="/logo.png?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw"/><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="hidden h-8 w-auto dark:block" style="color:transparent" src="/logo-dark.png?v=3&dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw"/></a>Everything you need for vibe coding. Real-time updates on skills, plugins, MCP servers, and marketplaces.</div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Resources</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/skills">Skills</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/mcp">MCP Servers</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/marketplaces">Marketplaces</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/plugins">Plugins</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Support</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/about">About Us</a></li><li><a href="mailto:admin@vibeindex.ai" class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">Contact Us</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/feedback">Feedback</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/activity">Sync Activity</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Legal</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-8 border-t border-zinc-200 pt-8 dark:border-zinc-800">© 2026 Vibe Index. All rights reserved. Operated by <a href="https://jolab.ai" target="_blank" rel="noopener noreferrer" class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">JoLab</a></div></div></footer><script src="/_next/static/chunks/a8c74b565bd8a7a9.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[26817,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n3:I[44636,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"Providers\"]\n4:I[3374,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"\"]\n8:I[58234,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"ViewportBoundary\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"MetadataBoundary\"]\n11:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"style\"]\n:HL[\"/_next/static/chunks/d89442aebcb29b1f.css?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"0Md9lNOjw6uQt2vtsrKCJ\",\"c\":[\"\",\"skills\",\"erichowens\",\"some_claude_skills\",\"real-time-collaboration-engine\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"owner\",\"erichowens\",\"d\"],{\"children\":[[\"repo\",\"some_claude_skills\",\"d\"],{\"children\":[[\"skill\",\"real-time-collaboration-engine\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/d89442aebcb29b1f.css?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-[60vh] flex-col items-center justify-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-6xl font-bold text-zinc-900 dark:text-white\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-500 dark:text-zinc-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"mt-8 inline-flex items-center rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":\"Go Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"real-time-collaboration-engine | Vibe Index\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"real-time-collaboration-engine skill from erichowens/some_claude_skills\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Vibe Index Team\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"vibe coding, vibecoding, AI coding, Claude Code, MCP servers, AI skills, AI plugins, AI development, AI assistants, Claude, cursor, windsurf, aider, cline\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Vibe Index - The Ultimate Vibe Coding Directory\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"512\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"512\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Vibe Index Logo\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Vibe Index - Vibe Coding Directory\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"28\",{}]]\n"])</script><script>self.__next_f.push([1,"13:I[74533,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"FavoriteButton\"]\n14:I[54371,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n15:I[38848,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-2 text-sm\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\"children\":\"Skills\"}]}],[\"$\",\"li\",null,{\"className\":\"text-zinc-400\",\"children\":\"/\"}],[\"$\",\"li\",null,{\"className\":\"text-zinc-900 dark:text-white\",\"children\":\"real-time-collaboration-engine\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-5xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 flex-wrap\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold text-zinc-900 dark:text-white\",\"children\":\"real-time-collaboration-engine\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2.5 py-1 text-sm \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}],[\"$\",\"$L13\",null,{\"resourceId\":\"58476c96-bd4e-4c37-a36a-7d89e5416f77\",\"size\":\"sm\"}],false]}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-600 dark:text-zinc-400\",\"children\":[\"from \",\"erichowens\",\"/\",\"some_claude_skills\"]}]]}]]}],[\"$\",\"$L14\",null,{\"description\":\"real-time-collaboration-engine skill from erichowens/some_claude_skills\",\"descriptionKo\":\"실시간 협업 엔진 스킬은 다중 사용자 환경에서 동시 작업과 실시간 데이터 동기화를 지원하는 고성능 협업 도구입니다. WebSocket 및 분산 상태 관리 기술을 활용하여 팀 멤버 간의 원활하고 지연 시간이 짧은 상호작용을 가능하게 합니다.\",\"resourceId\":\"58476c96-bd4e-4c37-a36a-7d89e5416f77\",\"resourceName\":\"real-time-collaboration-engine\",\"resourceType\":\"skill\",\"descriptionType\":\"ai\"}],null,null,[\"$\",\"$L7\",null,{\"href\":\"/collection/erichowens/some_claude_skills\",\"className\":\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-2xl\",\"children\":\"📦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Part of\"}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-zinc-900 dark:text-white\",\"children\":[\"erichowens\",\"/\",\"some_claude_skills\",[\"$\",\"span\",null,{\"className\":\"ml-2 text-sm font-normal text-zinc-500 dark:text-zinc-400\",\"children\":[\"(\",148,\" \",\"items\",\")\"]}]]}]]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5 text-zinc-400\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M9 5l7 7-7 7\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"real-time-collaboration-engine\",{\"onClick\":\"$undefined\",\"className\":\"inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 \",\"children\":\"real-time-collaboration-engine\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L15\",null,{\"installGuide\":{\"found\":true,\"commands\":[{\"label\":\"Add Marketplace\",\"command\":\"/plugin marketplace add erichowens/some_claude_skills\",\"description\":\"Add marketplace to Claude Code\",\"type\":\"plugin\"},{\"label\":\"Install Plugin\",\"command\":\"/plugin install adhd-design-expert@some-claude-skills\",\"description\":\"Install plugin from marketplace\",\"type\":\"plugin\"},{\"label\":\"Install Plugin\",\"command\":\"/plugin install some-claude-skills@some-claude-skills\",\"description\":\"Install plugin from marketplace\",\"type\":\"plugin\"},{\"label\":\"git clone\",\"command\":\"git clone https://github.com/erichowens/some_claude_skills.git\",\"description\":\"Clone repository\",\"type\":\"git-clone\"}],\"jsonConfig\":{\"label\":\"Claude Desktop Configuration\",\"config\":\"{\\n \\\"mcpServers\\\": {\\n \\\"prompt-learning\\\": {\\n \\\"command\\\": \\\"npx\\\",\\n \\\"args\\\": [\\\"-y\\\", \\\"github:erichowens/prompt-learning-mcp\\\"],\\n \\\"env\\\": {\\n \\\"OPENAI_API_KEY\\\": \\\"your-openai-api-key\\\"\\n }\\n }\\n }\\n}\",\"description\":\"Add this to your claude_desktop_config.json\"},\"rawSection\":\"## Quick Start\"},\"githubUrl\":\"https://github.com/erichowens/some_claude_skills\",\"owner\":\"erichowens\",\"repo\":\"some_claude_skills\",\"resourceType\":\"skill\",\"resourceName\":\"real-time-collaboration-engine\"}]]}],\"$L16\",\"$L17\",\"$L18\",\"$L19\"]}]\n"])</script><script>self.__next_f.push([1,"1a:I[74533,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"FavoriteCount\"]\n1b:I[13428,[\"/_next/static/chunks/f12dc041feb06d3e.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/3bfaf7037bc146f6.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\",\"/_next/static/chunks/9b78c3343a8c2975.js?dpl=dpl_HYATsj2QXwDk65k5Na2XkUafwmhw\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"mb-8 flex gap-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"Installs\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-4 w-4\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"12\"}],[\"$\",\"span\",null,{\"className\":\"text-zinc-400 dark:text-zinc-500\",\"children\":\"Installs\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"GitHub Stars\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-yellow-500\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"d\":\"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"21\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-violet-500\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":0.5,\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":[\"$\",\"$L1a\",null,{\"resourceId\":\"58476c96-bd4e-4c37-a36a-7d89e5416f77\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Last Updated\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"Jan 23, 2026\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/erichowens/some_claude_skills\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}],\"View on GitHub\"]}],[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M10 19l-7-7m0 0l7-7m-7 7h18\"}]}],\"Back to Skills\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1c:T35c7,"])</script><script>self.__next_f.push([1,"---\nname: real-time-collaboration-engine\ndescription: Build real-time collaborative editing with WebSockets, OT/CRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.\nallowed-tools: Read,Write,Edit,Bash(npm:*,websocket:*)\n---\n\n# Real-Time Collaboration Engine\n\nExpert in building Google Docs-style collaborative editing with WebSockets, conflict resolution, and presence awareness.\n\n## When to Use\n\n✅ **Use for**:\n- Collaborative text/code editors\n- Shared whiteboards and design tools\n- Multi-user video editing timelines\n- Real-time data dashboards\n- Multiplayer game state sync\n\n❌ **NOT for**:\n- Simple chat applications (use basic WebSocket)\n- Request-response APIs (use REST/GraphQL)\n- Single-user applications\n- Read-only data streaming (use Server-Sent Events)\n\n## Quick Decision Tree\n\n```\nNeed real-time collaboration?\n├── Text editing? → Operational Transform (OT)\n├── JSON data structures? → CRDTs\n├── Cursor tracking only? → Simple WebSocket + presence\n├── Offline-first? → CRDTs (better offline merge)\n└── No conflicts possible? → Basic broadcast\n```\n\n---\n\n## Technology Selection\n\n### Conflict Resolution Strategies (2024)\n\n| Strategy | Best For | Complexity | Offline Support |\n|----------|----------|------------|-----------------|\n| Operational Transform (OT) | Text, ordered sequences | High | Limited |\n| CRDTs | JSON objects, sets | Medium | Excellent |\n| Last-Write-Wins | Simple state | Low | Basic |\n| Three-Way Merge | Git-style editing | High | Good |\n\n**Timeline**:\n- 2010: Google Wave uses OT\n- 2014: Figma adopts CRDTs\n- 2019: Yjs (CRDT library) released\n- 2022: Automerge 2.0 (CRDT library) released\n- 2024: PartyKit simplifies real-time infrastructure\n\n---\n\n## Common Anti-Patterns\n\n### Anti-Pattern 1: Broadcasting Every Keystroke\n\n**Novice thinking**: \"Send every change immediately for real-time feel\"\n\n**Problem**: Network floods with tiny messages, poor performance.\n\n**Wrong approach**:\n```typescript\n// ❌ Sends message on every keystroke\nfunction Editor() {\n const handleChange = (text: string) =\u003e {\n socket.emit('text-change', { text }); // Every keystroke!\n };\n\n return \u003ctextarea onChange={(e) =\u003e handleChange(e.target.value)} /\u003e;\n}\n```\n\n**Why wrong**: 100 WPM typing = 500 messages/minute = network congestion.\n\n**Correct approach**:\n```typescript\n// ✅ Batches changes every 200ms\nfunction Editor() {\n const [pendingChanges, setPendingChanges] = useState\u003cChange[]\u003e([]);\n\n useEffect(() =\u003e {\n const interval = setInterval(() =\u003e {\n if (pendingChanges.length \u003e 0) {\n socket.emit('text-batch', { changes: pendingChanges });\n setPendingChanges([]);\n }\n }, 200);\n\n return () =\u003e clearInterval(interval);\n }, [pendingChanges]);\n\n const handleChange = (change: Change) =\u003e {\n setPendingChanges(prev =\u003e [...prev, change]);\n };\n\n return \u003ctextarea onChange={handleChange} /\u003e;\n}\n```\n\n**Impact**: 500 messages/minute → 5 messages/second (90% reduction).\n\n---\n\n### Anti-Pattern 2: No Conflict Resolution Strategy\n\n**Problem**: Concurrent edits cause data loss or corruption.\n\n**Symptom**: Users see their changes disappear, documents become inconsistent.\n\n**Wrong approach**:\n```typescript\n// ❌ Last write wins, overwrites concurrent changes\nsocket.on('text-change', ({ userId, text }) =\u003e {\n setDocument(text); // Loses concurrent edits!\n});\n```\n\n**Why wrong**: If User A and B edit simultaneously, one change is lost.\n\n**Correct approach (OT)**:\n```typescript\n// ✅ Operational Transform for text\nimport { TextOperation } from 'ot.js';\n\nsocket.on('operation', ({ userId, operation, revision }) =\u003e {\n const transformed = transformOperation(\n operation,\n pendingOperations,\n revision\n );\n\n applyOperation(transformed);\n incrementRevision();\n});\n\nfunction transformOperation(\n incoming: Operation,\n pending: Operation[],\n baseRevision: number\n): Operation {\n // Transform incoming against pending operations\n let transformed = incoming;\n for (const op of pending) {\n transformed = TextOperation.transform(transformed, op)[0];\n }\n return transformed;\n}\n```\n\n**Correct approach (CRDT)**:\n```typescript\n// ✅ CRDT for JSON objects\nimport * as Y from 'yjs';\n\nconst ydoc = new Y.Doc();\nconst ytext = ydoc.getText('document');\n\n// Automatically handles conflicts\nytext.insert(0, 'Hello');\n\n// Sync with peers\nconst provider = new WebsocketProvider('ws://localhost:1234', 'room', ydoc);\n```\n\n**Impact**: Concurrent edits merge correctly, no data loss.\n\n---\n\n### Anti-Pattern 3: Not Handling Disconnections\n\n**Problem**: User goes offline, loses work or sees stale state.\n\n**Wrong approach**:\n```typescript\n// ❌ No offline handling\nsocket.on('disconnect', () =\u003e {\n console.log('Disconnected'); // That's it?!\n});\n```\n\n**Why wrong**: Pending changes lost, no reconnection strategy, bad UX.\n\n**Correct approach**:\n```typescript\n// ✅ Queue changes offline, sync on reconnect\nconst [isOnline, setIsOnline] = useState(true);\nconst [offlineQueue, setOfflineQueue] = useState\u003cChange[]\u003e([]);\n\nsocket.on('disconnect', () =\u003e {\n setIsOnline(false);\n showToast('Offline - changes will sync when reconnected');\n});\n\nsocket.on('connect', () =\u003e {\n setIsOnline(true);\n\n // Send queued changes\n if (offlineQueue.length \u003e 0) {\n socket.emit('sync-offline-changes', { changes: offlineQueue });\n setOfflineQueue([]);\n }\n});\n\nconst handleChange = (change: Change) =\u003e {\n if (isOnline) {\n socket.emit('change', change);\n } else {\n setOfflineQueue(prev =\u003e [...prev, change]);\n }\n};\n```\n\n**Timeline context**:\n- 2015: Offline-first apps rare\n- 2020: PWAs make offline UX standard\n- 2024: Users expect seamless offline editing\n\n---\n\n### Anti-Pattern 4: Client-Only State Sync\n\n**Problem**: No server authority, clients get out of sync.\n\n**Wrong approach**:\n```typescript\n// ❌ Clients broadcast to each other directly\nsocket.on('peer-change', ({ userId, change }) =\u003e {\n applyChange(change); // No validation, no server state\n});\n```\n\n**Why wrong**: Malicious client can send invalid data, no recovery from desync.\n\n**Correct approach**:\n```typescript\n// ✅ Server is source of truth\n// Client\nsocket.emit('operation', { operation, clientRevision });\n\nsocket.on('ack', ({ serverRevision }) =\u003e {\n if (serverRevision !== expectedRevision) {\n // Desync detected, request full state\n socket.emit('request-full-state');\n }\n});\n\n// Server\nio.on('connection', (socket) =\u003e {\n socket.on('operation', ({ operation, clientRevision }) =\u003e {\n // Validate operation\n if (!isValid(operation)) {\n socket.emit('error', { message: 'Invalid operation' });\n return;\n }\n\n // Apply to server state\n const serverRevision = applyOperation(operation);\n\n // Broadcast to all clients\n io.emit('operation', { operation, serverRevision });\n });\n});\n```\n\n**Impact**: Data integrity guaranteed, can recover from client bugs.\n\n---\n\n### Anti-Pattern 5: No Presence Awareness\n\n**Problem**: Users can't see who's editing what, causing edit conflicts.\n\n**Symptom**: Two people editing same section unknowingly.\n\n**Wrong approach**:\n```typescript\n// ❌ No awareness of other users\nfunction Editor() {\n return \u003ctextarea /\u003e; // Flying blind!\n}\n```\n\n**Correct approach**:\n```typescript\n// ✅ Show active users and cursors\nimport { usePresence } from './usePresence';\n\nfunction Editor() {\n const { users, updateCursor } = usePresence();\n\n const handleCursorMove = (position: number) =\u003e {\n socket.emit('cursor-move', { userId: myId, position });\n };\n\n return (\n \u003cdiv\u003e\n {/* Show who's online */}\n \u003cUserList users={users} /\u003e\n\n {/* Show remote cursors */}\n \u003cEditorWithCursors\n content={content}\n cursors={users.map(u =\u003e u.cursor)}\n onCursorMove={handleCursorMove}\n /\u003e\n \u003c/div\u003e\n );\n}\n```\n\n**Features**:\n- Active user list with avatars\n- Cursor positions color-coded by user\n- Selection ranges highlighted\n- \"User X is typing...\" indicators\n\n---\n\n## Implementation Patterns\n\n### Pattern 1: WebSocket Setup with Reconnection\n\n```typescript\nimport { io } from 'socket.io-client';\n\nconst socket = io('ws://localhost:3000', {\n reconnection: true,\n reconnectionDelay: 1000,\n reconnectionDelayMax: 5000,\n reconnectionAttempts: Infinity,\n transports: ['websocket', 'polling'] // Fallback\n});\n\nsocket.on('connect', () =\u003e {\n console.log('Connected:', socket.id);\n});\n\nsocket.on('disconnect', (reason) =\u003e {\n if (reason === 'io server disconnect') {\n // Server disconnected, manually reconnect\n socket.connect();\n }\n});\n\nsocket.on('connect_error', (error) =\u003e {\n console.error('Connection error:', error);\n});\n```\n\n### Pattern 2: Operational Transform (Text)\n\n```typescript\nimport { TextOperation } from 'ot.js';\n\nclass OTEditor {\n private revision = 0;\n private pendingOperations: TextOperation[] = [];\n\n applyLocalOperation(op: TextOperation): void {\n // Apply immediately (optimistic update)\n this.applyToEditor(op);\n\n // Send to server\n this.sendOperation(op);\n\n // Store as pending\n this.pendingOperations.push(op);\n }\n\n receiveRemoteOperation(op: TextOperation, serverRevision: number): void {\n // Transform against pending operations\n let transformed = op;\n for (const pending of this.pendingOperations) {\n [transformed, pending] = TextOperation.transform(transformed, pending);\n }\n\n // Apply transformed operation\n this.applyToEditor(transformed);\n this.revision = serverRevision;\n }\n\n acknowledgeOperation(serverRevision: number): void {\n // Remove acknowledged operation from pending\n this.pendingOperations.shift();\n this.revision = serverRevision;\n }\n}\n```\n\n### Pattern 3: CRDT with Yjs\n\n```typescript\nimport * as Y from 'yjs';\nimport { WebsocketProvider } from 'y-websocket';\n\n// Create shared document\nconst ydoc = new Y.Doc();\n\n// Define shared types\nconst ytext = ydoc.getText('content');\nconst ymap = ydoc.getMap('metadata');\nconst yarray = ydoc.getArray('users');\n\n// Connect to sync server\nconst provider = new WebsocketProvider(\n 'ws://localhost:1234',\n 'room-name',\n ydoc\n);\n\n// Listen to changes\nytext.observe(event =\u003e {\n console.log('Text changed:', event.changes);\n});\n\n// Make changes (automatically synced)\nytext.insert(0, 'Hello ');\nytext.insert(6, 'World!');\n\n// Undo/redo support\nconst undoManager = new Y.UndoManager(ytext);\nundoManager.undo();\nundoManager.redo();\n```\n\n### Pattern 4: Presence Awareness\n\n```typescript\nimport { Awareness } from 'y-protocols/awareness';\n\nconst awareness = provider.awareness;\n\n// Set local state\nawareness.setLocalState({\n user: {\n name: 'Alice',\n color: '#ff0000',\n cursor: { line: 10, ch: 5 }\n }\n});\n\n// Listen to changes\nawareness.on('change', ({ added, updated, removed }) =\u003e {\n // Update UI with user cursors/selections\n const states = awareness.getStates();\n states.forEach((state, clientId) =\u003e {\n if (clientId !== awareness.clientID) {\n renderCursor(state.user.cursor, state.user.color);\n }\n });\n});\n```\n\n### Pattern 5: Optimistic Updates with Rollback\n\n```typescript\nclass OptimisticEditor {\n private optimisticChanges = new Map\u003cstring, Change\u003e();\n\n async applyChange(change: Change): Promise\u003cvoid\u003e {\n const changeId = generateId();\n\n // Apply immediately (optimistic)\n this.applyToUI(change);\n this.optimisticChanges.set(changeId, change);\n\n try {\n // Send to server\n const result = await this.sendToServer(change);\n\n // Success - remove from optimistic\n this.optimisticChanges.delete(changeId);\n\n } catch (error) {\n // Failed - rollback\n this.rollback(changeId);\n this.showError('Could not apply change');\n }\n }\n\n private rollback(changeId: string): void {\n const change = this.optimisticChanges.get(changeId);\n if (change) {\n this.revertInUI(change);\n this.optimisticChanges.delete(changeId);\n }\n }\n}\n```\n\n---\n\n## Production Checklist\n\n```\n□ WebSocket connection with auto-reconnect\n□ Offline queue for pending changes\n□ Conflict resolution strategy (OT or CRDT)\n□ Server authority (clients can't desync)\n□ Presence awareness (cursors, active users)\n□ Optimistic updates with rollback\n□ Change batching (not per-keystroke)\n□ Message compression for large payloads\n□ Authentication and authorization\n□ Rate limiting (prevent spam)\n□ Heartbeat/ping-pong to detect dead connections\n□ Graceful degradation (falls back to polling if WebSocket fails)\n```\n\n---\n\n## When to Use vs Avoid\n\n| Scenario | Strategy |\n|----------|----------|\n| Text editing (Google Docs) | ✅ Operational Transform |\n| JSON objects (Figma) | ✅ CRDTs (Yjs, Automerge) |\n| Simple cursor sharing | ✅ Basic WebSocket + presence |\n| Chat messages | ✅ Simple append-only (no OT/CRDT) |\n| Video timeline editing | ✅ CRDTs for timeline, OT for text |\n| Read-only dashboards | ❌ Use Server-Sent Events instead |\n\n---\n\n## References\n\n- `/references/ot-vs-crdt.md` - Deep comparison of conflict resolution strategies\n- `/references/websocket-scaling.md` - Scaling to millions of concurrent connections\n- `/references/presence-patterns.md` - Cursor tracking, user awareness, activity indicators\n\n## Scripts\n\n- `scripts/collaboration_tester.ts` - Simulate concurrent edits, test conflict resolution\n- `scripts/latency_simulator.ts` - Test behavior under high latency/packet loss\n\n---\n\n**This skill guides**: Real-time collaboration | WebSocket architecture | Operational Transform | CRDTs | Presence awareness | Conflict resolution\n"])</script><script>self.__next_f.push([1,"18:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Skill Details\"}],[\"$\",\"$L1b\",null,{\"content\":\"$1c\"}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"More from this repository\"}],[\"$\",\"span\",null,{\"className\":\"rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300\",\"children\":10}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$L7\",\"26a35cb1-dafb-4f86-8a7c-3a3e3e70a973\",{\"href\":\"/skills/erichowens/some_claude_skills/cv-creator\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"cv-creator\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"cv-creator skill from erichowens/some_claude_skills\"}]]}]]}],[\"$\",\"$L7\",\"e5817a82-a62c-40a5-92a3-205a01151a5c\",{\"href\":\"/skills/erichowens/some_claude_skills/metal-shader-expert\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"metal-shader-expert\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"metal-shader-expert skill from erichowens/some_claude_skills\"}]]}]]}],[\"$\",\"$L7\",\"dab80a16-3e36-4444-8bde-21b6d6ebcb28\",{\"href\":\"/skills/erichowens/some_claude_skills/video-processing-editing\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"video-processing-editing\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"video-processing-editing skill from erichowens/some_claude_skills\"}]]}]]}],[\"$\",\"$L7\",\"49c99672-4177-4dd8-8f1f-e4227991abaf\",{\"href\":\"/skills/erichowens/some_claude_skills/ai-video-production-master\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[\"$L1d\",\"$L1e\"]}],\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}]\n1e:[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"ai-video-production-master\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"ai-video-production-master skill from erichowens/some_claude_skills\"}]]}]\n1f:[\"$\",\"$L7\",\"97fab592-ea5b-4c81-aeda-84338d30c787\",{\"href\":\"/skills/erichowens/some_claude_skills/pwa-expert\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"pwa-expert\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"pwa-expert skill from erichowens/some_claude_skills\"}]]}]]}]\n20:[\"$\",\"$L7\",\"5a38d00e-5bda-4080-a09e-a2ee1c02b0aa\",{\"href\":\"/skills/erichowens/some_claude_skills/sound-engineer\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"sound-engineer\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"sound-engineer skill from erichowens/some_claude_skills\"}]]}]]}]\n21:[\"$\",\"$L7\",\"45a1deed-256e-4b26-9d3f-28237d1bdb2b\",{\"href\":\"/skills/erichowens/some_claude_skills/mdx-sanitizer\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"mdx-sanitizer\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Sanitizes MDX content by escaping angle brackets, generics, and JSX-c"])</script><script>self.__next_f.push([1,"onflicting patterns to prevent build failures and parsing errors.\"}]]}]]}]\n22:[\"$\",\"$L7\",\"e7b13d7e-6cb3-4914-81b8-e1b71e02c37c\",{\"href\":\"/skills/erichowens/some_claude_skills/indie-monetization-strategist\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"indie-monetization-strategist\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"indie-monetization-strategist skill from erichowens/some_claude_skills\"}]]}]]}]\n23:[\"$\",\"$L7\",\"5fca10e6-9d5a-4287-8d1a-f3e506804aa0\",{\"href\":\"/skills/erichowens/some_claude_skills/mobile-ux-optimizer\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"mobile-ux-optimizer\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Optimizes mobile user interfaces by implementing touch-friendly, responsive design patterns with proper viewport handling and performance considerations.\"}]]}]]}]\n24:[\"$\",\"$L7\",\"1ab2e7c1-4131-4b2e-a06d-2094d650ac80\",{\"href\":\"/skills/erichowens/some_claude_skills/job-application-optimizer\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"job-application-optimizer\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"job-application-optimizer skill from erichowens/some_claude_skills\"}]]}]]}]\n"])</script></body></html>