skills.rest
RockwallJMC
RockwallJMCCOMMUNITY
Explore all skills by this author →
GitHub

wiring-framework

Enforce Supabase-authenticated API routes and reusable SWR hooks for client-to-server data flows.

Updated Aug 23, 2026
Search Tags:#api#rls#supabase#swr#auth#wiring#api-hooks
One-click install
npx skills add https://github.com/RockwallJMC/Threadbilt-v0 --skill wiring-framework
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wiring-framework
Source: https://github.com/RockwallJMC/Threadbilt-v0/tree/main/.claude/skills/wiring-framework
Command: npx skills add https://github.com/RockwallJMC/Threadbilt-v0 --skill wiring-framework

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about wiring-framework

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

FAQPage Schema
How do I secure Next.js API routes with Supabase auth and SWR?▼

To secure Next.js API routes with Supabase auth, route client SWR calls through API routes that use the Supabase server client for server-side session validation, ensuring UI components never call Supabase directly.

Why should I avoid calling Supabase directly from UI components?▼

Calling Supabase directly from UI components bypasses the enforced Supabase auth flow. Routing through Next.js API routes ensures server-side session validation and consistent RLS enforcement by scoping queries with auth.uid().

What is the best way to handle large datasets in SWR hooks with Supabase?▼

The best way to handle large datasets in SWR hooks is applying server-side filtering, pagination, and specific select lists in API routes, returning grouped or aggregated data to the UI instead of using select('*').

How do I optimize high-frequency data updates using SWR?▼

Optimize high-frequency SWR data updates by thoughtfully configuring dedupingInterval, refreshInterval, and revalidateOnFocus, while using mutate with optimistic updates for drag/drop UI state changes to avoid redundant API calls.

Can I use ad-hoc fetches instead of reusable SWR hooks for API routing?▼

Ad-hoc fetches are discouraged. You should reuse established SWR hooks in the api-hooks directory to maintain consistent API routing and data access patterns, rather than creating custom fetch logic in UI components.

Do I need server-side session validation for Supabase RLS enforcement?▼

Yes, server-side session validation is required. Next.js API routes must use the Supabase server client via @supabase/ssr to authenticate the session before scoping data queries by auth.uid() and relying on RLS enforcement.

Related Skills

Explore More Software Engineering Skills→
BaraArdiwinataBaraArdiwinata

create-api-route

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

Community
Advanced
yutnayutna
2

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

Community
Advanced
futureteafuturetea

SWR Data Fetching

Fetch API data in React with caching, revalidation, and optimistic updates.

Community
Intermediate
vuralserhat86vuralserhat86
43

supabase_patterns

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

Community
Intermediate