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

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.

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.