skills.rest
hkcm91
hkcm91COMMUNITY
Explore all skills by this author →
GitHub

implementing-realtime-features

Implement real-time data synchronization with Supabase Realtime subscriptions and an EventBus.

Updated Jan 19, 2026
Search Tags:#collaboration#supabase#presence#sync#realtime#websockets#eventbus
One-click install
npx skills add https://github.com/hkcm91/StickerNestV4 --skill implementing-realtime-features-hkcm91
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-realtime-features
Source: https://github.com/hkcm91/StickerNestV4/tree/main/.claude/skills/implementing-realtime-features
Command: npx skills add https://github.com/hkcm91/StickerNestV4 --skill implementing-realtime-features-hkcm91

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables seamless, live data synchronization across multiple browser tabs and devices, ensuring all users see the most up-to-date information without manual refreshes.

Core Features & Use Cases

  • Supabase Realtime: Leverages postgres_changes for persistent data and broadcast for ephemeral events.
  • EventBus Integration: Normalizes Supabase events into a standardized social:* event stream for widgets.
  • Presence Management: Tracks user cursors, selections, and custom status across sessions.
  • Cross-Tab Sync: Utilizes BroadcastChannel, SharedWorker, or WebSocket for robust synchronization.
  • Use Case: Imagine a collaborative whiteboard application where multiple users are editing simultaneously. This Skill ensures that cursor movements, typing indicators, and drawing updates appear instantly for everyone, creating a fluid, real-time collaborative experience.

Quick Start

Use the implementing-realtime-features skill to subscribe to new chat messages for the current canvas.

Frequently Asked Questions about implementing-realtime-features

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync data in real-time across multiple browser tabs and devices?▼

Live data synchronization across multiple tabs and devices is implemented using Supabase Realtime subscriptions and an EventBus. This approach leverages `postgres_changes` and `broadcast` events to maintain synchronized user states instantly across all active clients.

What is the best way to track user presence and cursors for live collaboration?▼

Tracking user presence for live collaboration involves utilizing Supabase's presence management features alongside an EventBus. This combination monitors user cursors, selections, and custom statuses, broadcasting ephemeral updates instantly across all connected sessions.

How does Supabase broadcast integrate with an EventBus for ephemeral events?▼

Supabase broadcast integrates with an EventBus by normalizing incoming ephemeral events into a standardized event stream for application widgets. This architecture cleanly separates persistent `postgres_changes` data from transient sync signals like typing indicators.

Can I use BroadcastChannel and SharedWorker for cross-tab communication?▼

Yes, cross-tab communication can be managed using `BroadcastChannel`, `SharedWorker`, or WebSocket connections. These mechanisms ensure robust synchronization of realtime data and user states across multiple browser tabs on the same device.

When should I use broadcast instead of postgres_changes for realtime updates?▼

Use `broadcast` for ephemeral events like cursor movements or typing indicators that do not need database persistence, whereas `postgres_changes` is for synchronizing persistent data. This division optimizes live collaboration performance and storage.

Related Skills

Explore More Software Engineering Skills→
marvinbissmarvinbiss

supabase-audit-realtime

Test Supabase Realtime WebSocket channels for unauthorized subscriptions and data exposure.

Community
Advanced
ali-masterali-master
8

oRPC Client Event Iterator

Manage oRPC client event streams with an asynchronous iterator.

Community
Intermediate
lDuanglDuang

vercel-composition-patterns

Refactor React component libraries into explicit variants and compound components.

Community
Intermediate
TitusLee2000TitusLee2000

phone-client-build

Build a mobile WebRTC camera client streaming video to a dashboard.

Community
Advanced