backend-realtime

# Real-time Features Skill Implement live, collaborative features using WebSockets, Supabase Realtime, and Server-Sent Events. > Code examples assume a **Next.js App Router + Supabase** stack > (`@/lib/supabase/client`, `'use client'`). Adapt import paths and row types to > the detected stack. ## CRITICAL: Check Existing First **Before implementing ANY real-time feature, verify:** 1. **Check for existing real-time setup:** ```bash cat package.json | grep -i "socket\|realtime\|pusher\|ably" rg "supabase.*channel|useSubscription|WebSocket" --type ts --type tsx ``` 2. **Check for existing patterns:** ```bash rg "on\('INSERT'\|on\('UPDATE'\|subscribe\(" --type ts ls -la src/hooks/use*Realtime* src/lib/realtime* 2>/dev/null ``` 3. **Check Supabase config:** ```bash rg "createClient|supabaseUrl" --type ts -l cat .env* | grep -i SUPABASE ``` **Why:** Real-time connections are stateful. Don't create duplicate subscriptions. ## Supabase Realtime ### Subscribe to Database Changes The canonical `useRealtimeMessages` hook (initial fetch + INSERT/DELETE subscription with unmount cleanup) is in [`references/patterns.md`](references/patterns.md). ### Presence (Online Users) ```tsx 'use client' import { useEffect, useState } from 'react' import { createClient } from '@/lib/supabase/client' import type { RealtimePresenceState } from '@supabase/supabase-js' interface UserPresence { id: string name: string avatar: string online_at: string } export function usePresence(roomId: ...