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 coding pattern for starting and shaping any TypeScript application — single app vs pnpm monorepo, package boundaries, folder structure, Drizzle/Postgres schema design, the backend route shape (auth wrapper, Zod parsing, services, response and error helpers), env handling, tooling (Biome or ESLint, Knip, tsconfig), tests, CI and an AGENTS.md rulebook. Use when initializing a repo, scaffolding a new project or app, adding a package or workspace, designing database tables, deciding where code should live, or before any coding task in a repo that has no written conventions yet.

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.