wiring-framework

What problem does it solve?

This Skill provides a standard wiring framework to connect the client UI to server APIs using SWR and Next.js API routes, enforcing a Supabase authentication flow and consistent data access patterns.

Core Features & Use Cases

• Supabase auth is the only auth system; always use the established Supabase auth flow.
• Client → API → Supabase: Client uses SWR/axios to call Next.js API routes; API routes use Supabase server client.
• Never call Supabase directly from UI components unless the existing pattern explicitly does so.
• Always scope by auth.uid() in API routes and rely on RLS enforcement.
• Reuse SWR hooks in src/services/swr/api-hooks/ instead of creating ad-hoc fetches.
• Efficiency rules: Large datasets: server-side filtering, pagination, and select lists (avoid select('*')). Use query params for filters in API routes (e.g., ?contact_id=...&type=...). Return grouped/aggregated data from API endpoints when UI expects grouped data.
• Efficiency rules: High-frequency updates: Use SWR dedupingInterval, refreshInterval, and revalidateOnFocus thoughtfully. Use mutate with optimistic updates for drag/drop or fast UI state changes. Avoid redundant API calls by caching or batching where possible.
• Supabase auth patterns: Server-side auth via @supabase/ssr in API routes. Root layout validates session; middleware can redirect authenticated users. Follow the documented auth/RLS decisions in docs/system.
• Required references (read before wiring work): references/system-docs-map.md and references/auth-patterns-map.md.

Quick Start

Set up the wiring framework by routing all client calls through Next.js API routes and SWR hooks using Supabase auth.