dev-pack

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 hooks/skills/agents", "publish a Claude Code config to GitHub", or assemble enforced standards for a stack (e.g. Next.js + Supabase, Django, etc.). This skill is the methodology that produced github.com/m-binimran/dev-pack; reuse it instead of re-deriving the process. Run it BEFORE writing any pack files — it sequences research, clarification, building, verification, and safe publishing.

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.

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.

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.

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.

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.

Safely back up and restore a Postgres/Supabase database — pg_dump/pg_restore, Supabase backups/PITR, and a no-data-loss restore runbook. Use before risky migrations, for disaster recovery, or when cloning prod to staging.

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.

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.

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).

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.

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.

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.

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.

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.

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.

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.

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.

Generate realistic seed data and reset scripts for local Postgres/Supabase development and tests. Use when setting up a dev database, needing test fixtures, or making a reproducible local data state.

Add on-page SEO to a Next.js site — title/meta, Open Graph, canonical, structured data (schema.org JSON-LD), and sitemap/robots. Use when building or auditing pages for search visibility and link previews.

Decide where each piece of state lives — server, client, URL, or form — and avoid duplicating server state into client stores. Use when wiring data flow, adding a store, or when state feels tangled.

Handle file uploads with Supabase Storage in Next.js — buckets, RLS on objects, signed URLs, image handling, and size/type validation. Use when adding avatars, portfolio images, document uploads, or any user file.

Integrate Stripe payments in Next.js — Checkout/Payment Intents, webhooks with signature verification and idempotency, and reconciling state to the database. Use when adding payments, subscriptions, or one-off charges.

Set up Supabase Auth in Next.js App Router — email/OAuth sign-in, server-side sessions, middleware refresh, and protected routes. Use when adding login, sign-up, OAuth, or gating pages behind auth.

Write tests first (RED→GREEN→REFACTOR) with Vitest, Testing Library, and Playwright for a Next.js + Supabase app. Use when adding a feature, fixing a bug, or raising coverage.

Define a design system as Tailwind v4 @theme tokens (color, type scale, spacing, radius, shadow) with intentional light + dark themes. Use when setting up a project's visual system or making theming consistent.

Verify claims against real command output before reporting status. Use before saying a task is done, a build passes, tests are green, or a bug is fixed.