Guardrails, skills, loops, hooks & review agents for database + website builders on Claude Code (Next.js + Supabase).
Skill Claude CodeCodex
Design, build, verify, and publish a curated Claude Code pack — a reusable collection of rules, skills, hooks, loops, and review agents — to GitHub. Trigger this skill whenever the user wants to "create a Claude Code pack", "build a rules/hooks/skills collection", "make a guardrail pack", "package my…
Skill Claude CodeCodex
Audit a web page/component against WCAG 2.2 AA — semantics, keyboard, contrast, labels, focus, alt text. Use when reviewing UI for accessibility or before shipping a page.
Skill Claude CodeCodex
Implement web animations with the right engine (Motion, GSAP, Anime.js, React Spring, tailwindcss-motion) and a mandatory prefers-reduced-motion fallback at 60fps. Use when adding any motion to a site.
Skill Claude CodeCodex
Design Next.js route handlers and server actions with input validation, correct status codes, error handling, and rate limiting. Use when building an API endpoint, server action, or webhook receiver.
Skill Claude CodeCodex
Get Next.js App Router caching right — static vs dynamic rendering, fetch cache, revalidatePath/revalidateTag, and ISR. Use when data is stale, a page won't update, or you're tuning performance vs freshness.
Skill Claude CodeCodex
Build a production React component on shadcn/ui + Tailwind — variants, compound pattern, accessible states, and a clean prop API. Use when creating a new UI component or refactoring a messy one.
Skill Claude CodeCodex
Safely back up and restore a Postgres/Supabase database — pgdump/pgrestore, Supabase backups/PITR, and a no-data-loss restore runbook. Use before risky migrations, for disaster recovery, or when cloning prod to staging.
Skill Claude CodeCodex
Choose an intentional, non-template visual direction (style, palette, type, motion) BEFORE writing any UI. Use at the start of a new site/page or when output looks generic. Enforces the anti-template policy.
Skill Claude CodeCodex
Design the non-happy-path UI in Next.js — loading, error, not-found, and empty states with Suspense, error boundaries, and user-facing feedback. Use when a page fetches data, can fail, or can be empty.
Skill Claude CodeCodex
Build accessible, validated forms with React Hook Form + Zod + shadcn Form, wired to a Next.js server action. Use when adding any form (contact, signup, checkout, settings).
Skill Claude CodeCodex
Generate safe, reversible Postgres/Supabase migrations using the expand→backfill→contract pattern, avoiding locks and data loss. Use when altering schema, adding/removing columns, or changing types on tables that already hold data.
Skill Claude CodeCodex
Add error monitoring and structured logging to a Next.js + Supabase app — Sentry for errors, request-scoped logs, and useful context without leaking PII. Use when setting up monitoring or debugging production issues.
Skill Claude CodeCodex
Enforce a Core Web Vitals / Lighthouse performance budget on a Next.js site — LCP, CLS, INP, bundle size, images. Use before shipping a page or when a page feels slow.
Skill Claude CodeCodex
Diagnose and fix slow Postgres queries using EXPLAIN ANALYZE, index suggestions, and N+1 detection. Use when a query is slow, a page is slow because of the DB, or before shipping a query that touches a large table.
Skill Claude CodeCodex
Add Supabase Realtime to a Next.js app — Postgres Changes, Broadcast, and Presence — with proper cleanup and RLS-aware channels. Use when building live updates, presence indicators, or collaborative features.
Skill Claude CodeCodex
Build mobile-first responsive layouts (≥375px) with fluid type, container queries, and grid/bento composition that doesn't break. Use when laying out a page or fixing responsive issues.
Skill Claude CodeCodex
Write and test Supabase/Postgres Row-Level Security policies so users can only access their own rows. Use when a table holds user data, when enabling RLS, or when auditing access control on Supabase.
Skill Claude CodeCodex
Design normalized Postgres/Supabase schemas — tables, columns, types, keys, indexes, and constraints with consistent naming. Use when creating a new database schema, adding tables, or reviewing a data model.