supabase-reference-architecture | supabase-pack | ClaudePluginHub

Skill

Community

supabase-reference-architecture

1.2K

Description

Implement Supabase reference architecture with best-practice project layout. Use when designing new Supabase integrations, reviewing project structure, or establishing architecture standards for Supabase applications. Trigger with phrases like "supabase architecture", "supabase best practices", "supabase project structure", "how to organize supabase", "supabase layout".

AI Summary

Implements Supabase reference architecture with best-practice project layout and client wrapper.

Install

Add the repository(one-time)

/plugin marketplace add jeremylongshore/claude-code-plugins-plus-skills

Install the plugin

/plugin install supabase-pack@claude-code-plugins-plus

Tool Access

This skill is limited to using the following tools:

ReadGrep

Supporting Assets

View in Repository

references/errors.md

references/examples.md

references/key-components.md

references/project-structure.md

Skill Content

Supabase Reference Architecture

Prerequisites

Understanding of layered architecture
Supabase SDK knowledge
TypeScript project setup
Testing framework configured

Instructions

Step 1: Create Directory Structure

Set up the project layout following the reference structure above.

Step 2: Implement Client Wrapper

Create the singleton client with caching and monitoring.

Step 3: Add Error Handling

Implement custom error classes for Supabase operations.

Step 4: Configure Health Checks

Add health check endpoint for Supabase connectivity.

Output

Structured project layout
Client wrapper with caching
Error boundary implemented
Health checks configured

Error Handling

See {baseDir}/references/errors.md for comprehensive error handling.

Examples

See {baseDir}/references/examples.md for detailed examples.

Resources

Links

GitHub Stats

154 forks

Updated 29 days ago

Similar Skills

cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

cache-components

137.4k

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

frontend-design

63.8k

Writing Hookify Rules

This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.

hookify

63.8k