skills.rest
rymqan
rymqanCOMMUNITY
Explore all skills by this author →
GitHub

supabase-realtime

Implements Supabase Realtime subscriptions for live UI updates in Next.js applications.

Updated Apr 13, 2026
Search Tags:#supabase#next.js#live updates#realtime#react hooks#websocket#subscription
One-click install
npx skills add https://github.com/rymqan/staple-tech --skill supabase-realtime-rymqan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: supabase-realtime
Source: https://github.com/rymqan/staple-tech/tree/main/.claude/skills/supabase-realtime
Command: npx skills add https://github.com/rymqan/staple-tech --skill supabase-realtime-rymqan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @supabase/supabase-js.

What problem does it solve? Building live-updating interfaces like an Activity Panel or status dashboards requires choosing between WebSocket subscriptions and polling, handling connection cleanup, and respecting row-level security — mistakes here cause leaked connections and stale data. ## Core Features & Use Cases - Decision Guidance: Clear rules for when to use Supabase Realtime versus polling based on latency tolerance. - Canonical Subscription Patterns: Typed Next.js hooks for subscribing to postgres_changes with proper cleanup via removeChannel. - RLS and Publication Setup: SQL migrations to add tables to the supabase_realtime publication so events respect row-level policies. - Testing and Fallback: Broadcast-based unit tests, service-role integration tests, and a useRealtimeWithFallback hook that degrades to 5-second polling on connection failure. - Use Case: When building an Activity Panel showing agent status changes (started, completed, failed), use this Skill to wire a typed subscription that updates the UI instantly and falls back to polling if the WebSocket drops. ## Quick Start Ask the AI to implement a Supabase Realtime subscription for live agent status updates in the Activity Panel following this skill's patterns.

Frequently Asked Questions about supabase-realtime

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

FAQPage Schema
How do I subscribe to Supabase database changes in Next.js?▼

Create a channel with supabase.channel(), attach a postgres_changes listener specifying the event, schema, table, and filter, then call subscribe(). Always return a cleanup function calling supabase.removeChannel(channel) from useEffect to prevent connection leaks.

When should I use Supabase Realtime vs polling?▼

Use Realtime when latency under 5 seconds matters, such as agent status updates or approval notifications. Use polling for analytics dashboards and list refreshes where delays over 5 seconds are acceptable.

Does Supabase Realtime respect row-level security policies?▼

Yes, channel subscriptions respect RLS policies, so users only receive events for rows their policies allow. However, the table must be added to the supabase_realtime publication via ALTER PUBLICATION for events to stream.

Why does my Supabase Realtime subscription leak connections in development?▼

Leaks happen when useEffect subscribes without returning a cleanup function, so hot reload creates new subscriptions without closing old ones. Fix it by returning () => supabase.removeChannel(channel) from the effect.

How do I test Supabase Realtime subscriptions?▼

For unit tests, use channel.send with type broadcast to simulate events without database changes. For integration tests, update a row with a service-role client and assert the subscription callback fires.

What happens when the Supabase Realtime WebSocket connection fails?▼

The recommended pattern is a fallback hook that detects CHANNEL_ERROR or TIMED_OUT subscription statuses and switches to 5-second polling on the same query until the connection recovers.

Related Skills

Explore More Software Engineering Skills→
kazdenckazdenc
42

supabase-setup

Automate Supabase initialization with schema, RLS, auth, and storage.

Community
Advanced
openaiopenai
5.3k

ai-elements

Implements AI-native React interfaces using the AI Elements component library built on shadcn/ui.

Official
Intermediate
AhmedAGadirAhmedAGadir

observability

Integrate Sentry error tracking and PostHog product analytics for the ArabyBuddy application.

Community
Intermediate
ryasrkryasrk

realtime-patterns

Provide real-time communication patterns using WebSockets, SSE, pub/sub, and message queues.

Community
Intermediate