skills.rest
Levironexe
LevironexeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Supabase

Enforces Supabase @supabase/ssr separation, RLS policies, repository queries, and realtime cleanup for JavaScript frameworks.

1|Updated May 2, 2026
Search Tags:#typescript#security#rls#supabase#nextjs#repository pattern#realtime
One-click install
npx skills add https://github.com/Levironexe/architect --skill supabase-levironexe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Supabase
Source: https://github.com/Levironexe/architect/tree/main/skills/patterns/supabase
Command: npx skills add https://github.com/Levironexe/architect --skill supabase-levironexe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Supabase projects often end up with scattered client setup, unsafe direct queries, missing Row Level Security (RLS) policies, and brittle real-time subscriptions that leak connections, making refactors risky and data access unpredictable.

Core Features & Use Cases

  • Separation of server and browser clients: Use @supabase/ssr to create a server client that reads session cookies and a browser client for client components, avoiding session errors.
  • Repository-based data access layer: Route all supabase.from() queries through src/repositories files so services and UI never call Supabase directly.
  • RLS-first security model: Enable RLS on every table and define policies tied to auth.uid() for isolation.
  • Safe Realtime subscriptions: Subscribe in Client Components and always unsubscribe in useEffect cleanup to prevent WebSocket leaks.
  • Use Case: You’re onboarding an AI coding agent to refactor a Next.js app that uses Supabase; this skill enforces consistent client setup, typed repositories, RLS policies, and correct realtime lifecycle.

Quick Start

Run the Supabase skill to restructure your project so server/browser clients are separated, repositories own all queries, RLS policies cover every table, and realtime subscriptions are cleaned up correctly.

Frequently Asked Questions about Supabase

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

FAQPage Schema
How do I separate Supabase server and browser clients in Next.js to avoid session errors?▼

To separate Supabase clients in Next.js, use @supabase/ssr to create a server client that reads session cookies and a browser client for client components. This requires dedicated factories like src/lib/supabase-server.ts and src/lib/supabase-browser.ts to prevent session errors.

Why do I need a repository pattern for Supabase data access?▼

A repository pattern for Supabase data access routes all supabase.from() queries through src/repositories files. This ensures services and UI never call Supabase directly, making refactoring safer and data access predictable across Server Components and API routes.

What is the best way to implement Row Level Security policies in Supabase?▼

The best way to implement Row Level Security (RLS) policies in Supabase is to enable RLS on every table and define policies tied to auth.uid() for user isolation. This RLS-first security model ensures safe data access across the application.

How do I prevent WebSocket leaks with Supabase realtime subscriptions?▼

To prevent WebSocket leaks with Supabase realtime subscriptions, subscribe within Client Components and always unsubscribe in the useEffect cleanup phase using removeChannel. This ensures safe realtime updates without leaking connections.

Does this Supabase architecture work with JavaScript frameworks other than Next.js?▼

This Supabase architecture applies to JavaScript frameworks using @supabase/ssr where typed data access, safe realtime updates, and maintainable refactoring across Server Components, API routes, and Client Components are required. It is not strictly limited to Next.js.

Related Skills

Explore More Software Engineering Skills→
BaraArdiwinataBaraArdiwinata

create-api-route

Generate Next.js API routes for Supabase authentication and session management.

Community
Advanced
PlaneInABottlePlaneInABottle

supabase

Integrate Supabase authentication, database, storage, and realtime services.

Community
Intermediate
vuralserhat86vuralserhat86
43

supabase_patterns

Guide Next.js 15 App Router implementations with Supabase SSR and client selection.

Community
Intermediate
rdimasciordimascio

setup-rls

Configure Supabase Row Level Security policies for table data access.

Community
Advanced