# Realtime Subscriptions

> Add Supabase Realtime to a Next.js app — Postgres Changes, Broadcast, and Presence — with proper cleanup and RLS-aware channels. Use when building live updates, presence indicators, or collaborative features.

- **Type:** Skill
- **Install:** `agentstack add skill-m-binimran-dev-pack-realtime-subscriptions`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [m-binimran](https://agentstack.voostack.com/s/m-binimran)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [m-binimran](https://github.com/m-binimran)
- **Source:** https://github.com/m-binimran/dev-pack/tree/main/skills/realtime-subscriptions

## Install

```sh
agentstack add skill-m-binimran-dev-pack-realtime-subscriptions
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# realtime-subscriptions

Live data is a client concern (it needs a persistent connection). Wire it carefully and always clean up.

## Pick the mechanism
| Need | Use |
|------|-----|
| React to DB inserts/updates/deletes | **Postgres Changes** |
| Ephemeral messages (cursors, typing) | **Broadcast** |
| Who's online / shared state | **Presence** |

## Process
1. **Subscribe in a client component**, inside `useEffect`. Realtime can't live in a server component.
2. **Always unsubscribe** in the effect cleanup (`supabase.removeChannel(channel)`) — leaked channels pile up
   and cause duplicate handlers.
3. **RLS applies to Realtime.** A client only receives change events for rows it's allowed to read. Enable
   Realtime on the table and confirm the policies.
4. **Reconcile with your cache:** on an event, update the query cache (`state-architect`) rather than keeping a
   parallel copy. Handle reconnects (refetch on `SUBSCRIBED` after a drop).
5. **Don't over-subscribe:** scope channels narrowly (filter by id); a firehose channel is a performance and
   cost problem.

## Output
- The channel setup, the cleanup, the RLS/Realtime enablement note, and how events update the UI/cache.

## Guardrails
- Every subscription has a matching cleanup — no exceptions (memory + duplicate-event bugs).
- Realtime is not your security layer; RLS is. Don't broadcast data the user can't already read.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [m-binimran](https://github.com/m-binimran)
- **Source:** [m-binimran/dev-pack](https://github.com/m-binimran/dev-pack)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-m-binimran-dev-pack-realtime-subscriptions
- Seller: https://agentstack.voostack.com/s/m-binimran
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.