all skills

Authentication and authorization architecture for Next.js product apps. Better Auth as the default self-hosted option (email/password, OAuth, roles, admin plugin) with Drizzle, plus a Clerk fast-path. Covers server/session resolution, the protectedApi boundary from product-stack, route protection, and role-based access. Use when adding sign-in/sign-up, sessions, OAuth, protected routes, user management, or role checks to an app.

Build a ⌘K command palette with cmdk and shadcn/ui. Apply when adding global search, quick actions, navigation, or a Linear/Vercel/Raycast-style command menu to a Next.js app. Covers the global keyboard listener, dialog structure, fuzzy filtering, nested pages, async/dynamic results, recent items, and the accessibility details that make it feel native.

Git workflow using Conventional Commits and small focused PRs — type(scope) format, imperative summaries ≤72 chars, bullet-body PRs with verification notes, branch naming type/scope-summary, and surgical staging (never git add -A). Use when committing, writing commit messages, opening PRs, creating branches, or reviewing git hygiene in any repo.

Production data tables with TanStack Table v8, shadcn/ui, URL-synced state, and server-side operations. Use when building admin dashboards, list views, CRM tables, or any sortable/filterable/paginated data grid. Integrates with product-stack API shapes and React Query hooks.

Lightweight spec-driven development for product engineers and AI agents. Write executable feature specs before code, map them to product-stack layers, and verify implementation against acceptance criteria. Use when planning features, delegating to agents, or ensuring consistent CRUD implementation.

Type-safe form architecture for Next.js product engineers. React Hook Form + Zod + shadcn/ui Form primitives, with one Zod schema driving validation, types, and the API contract. Apply when building any create/edit form, multi-step wizard, onboarding flow, or form that submits via Server Action or React Query mutation. Covers field wiring, server-error mapping, field arrays, async validation, form draft persistence, dirty checking, and the loading/disabled states most forms get wrong.

Audits and optimizes Next.js App Router APIs using measured request timing, cookie-first authentication, Server Component prefetching, PostgreSQL query tuning, Drizzle transaction patterns, caching, and durable background work. Use when API routes, server rendering, database queries, authentication, mutations, or loading UX are slow.

Instant UI with background data resolution using React Query cache layers. Apply when building CRUD UIs, edit forms, detail views, or any flow where partial data is already available and full data needs fetching. Eliminates perceived latency by showing what you have immediately and resolving the rest in the background.

Embed AI features in Next.js product apps using Vercel AI SDK (v5+). Covers streaming chat, tool calling with Zod, rate limiting, and auth — integrated into the product-stack 9-layer architecture. Use when adding chat, chatbots, copilots, AI search, or agent features to a SaaS product, or when working with useChat, streamText, generateObject, or AI tools.

Full-stack Next.js architecture for product engineers. A strict 9-layer pattern covering database schemas (Drizzle), API routes, Axios services, React Query hooks, Zod validation, and shadcn/ui components. Every new feature follows the same flow so the codebase stays consistent as it scales. Use when adding CRUD resources, API routes, React Query hooks, Drizzle schemas, or any full-stack feature to a Next.js app.

A comprehensive design system for exposed grid/rail layouts used by Linear, Vercel, and Resend. Covers CSS foundation, section patterns, component recipes, and common pitfalls. Use when building a landing page, marketing site, pricing page, or any SaaS page with visible rail lines, section dividers, or a Linear/Vercel/Resend-style aesthetic. Dark-first; includes light-theme adaptation notes.

Testing architecture for Next.js product apps — Vitest as the runner, a four-layer pyramid (Zod schemas, services with mocked DB, route handlers via direct invocation or Supertest, components via Testing Library), plus React Query hook testing and transactional database tests. Use when adding tests to a product-stack app, setting up Vitest, testing API routes, hooks, forms, or deciding what to test and how.