Stop Explaining Your Stack to AI. Start Shipping.

You've been here before.

You open Cursor on a new Next.js project and ask it to create a data fetching function. It generates useEffect with useState. You correct it. Next component, same mistake.

You ask it to set up Tailwind. It creates tailwind.config.js. You deleted that file six months ago when you moved to v4.

You ask for a form with server-side validation. It uses the old useFormState. You correct it again — it's useActionState now.

Every session. Every project. The same corrections.

This isn't an AI problem. It's a context problem. AI writes generic code because it doesn't know your conventions. Give it your conventions and it writes your code.

That's what this pack does.

─────────────────────────────────────────────────────────────────

15+ Rules. One Command. Zero Repetition.

This Rules Pack is a set of .mdc files for Cursor, a CLAUDE.md for Claude Code and an AGENTS.md for OpenAI Codex — written specifically for cutting edge Front-End development, especially for SaaS.

No generic React advice. No outdated tutorials. It uses patterns from real production codebases, covering the exact stack you're already using.

─────────────────────────────────────────────────────────────────

What's Covered

Next.js 16 App Router

The correct file structure. When to use Server vs Client Components (and how to push the boundary down the tree). How caching actually works — static, ISR, tag-based, no-store. Parallel fetching with Promise.all. Suspense streaming. generateMetadata. Middleware on the Edge. Cache components and other Next.js 16 features. No Pages Router. No getServerSideProps.

React 19

Server Actions that return structured results instead of throwing. useActionState for form state tied to actions. useOptimistic for instant UI feedback. The use() hook for unwrapping server-fetched promises in client components. Error boundaries. Provider patterns that don't break Server Components.

Tailwind v4

The new CSS-first configuration using @theme. Why tailwind.config.js is gone and what replaces it. @import "tailwindcss" instead of three separate directives. @theme inline for multi-theme support. What changed from v3 and what stayed the same.

shadcn/ui

The rule everyone forgets: never edit src/components/ui/ directly. How to extend components by wrapping. The cn() utility setup. Composition patterns that scale as the app grows.

TypeScript + Zod

strict: true, always. Infer types from Zod schemas — never duplicate them. safeParse() in Server Actions. The satisfies operator. No any, use unknown and narrow.

SaaS Patterns

Dashboard shell layout with sidebar. API route handlers for webhooks. Environment variable validation at startup. Structured error handling that logs internally but protects the client. Loading states and skeleton components. URL state with nuqs. Feature flags. Image optimisation. Naming conventions for every layer of the stack.

─────────────────────────────────────────────────────────────────

Pick Your Stack

The setup script asks four questions and installs exactly what you need — nothing else.

Auth — choose one:

• Clerk — hosted, best DX, fastest to ship
• Better Auth — self-hosted, TypeScript-first, modern API
• Auth.js v5 — battle-tested, maximum provider coverage
• Supabase Auth — built-in auth if you're already on Supabase

Data Fetching — choose one:

• Server Components + native fetch (recommended)
• TanStack Query for client-side data and optimistic updates
• Both — for complex dashboards with real-time needs

Database — choose one:

• Drizzle ORM — TypeScript-first, closest to SQL, preferred for new projects
• Prisma — mature ecosystem, excellent GUI tooling

─────────────────────────────────────────────────────────────────

Install in 60 Seconds

No npm install. No configuration files to edit. No account to create.

node setup.mjs

Follow four prompts. The script copies the right files into .cursor/rules/ and generates a CLAUDE.md and AGENTS.md at your project root.

Works with Cursor — rules are picked up automatically on every request. Works with Claude Code — reads CLAUDE.md at the start of every session. Works with OpenAI Codex — reads AGENTS.md at the start of every session.

From that point on, the AI knows your stack.

─────────────────────────────────────────────────────────────────

What You're Actually Buying

The rules themselves are very straight-forward markdown files.

What you're buying is the 50+ hours of figuring out which patterns actually matter in production — not in tutorials. Knowing that Tailwind v4 dropped tailwind.config.js. Knowing that useFormState became useActionState in React 19. Knowing how Better Auth's session refresh middleware works in Next.js 16 and why the Supabase one is different. Knowing which Cursor frontmatter fields actually do what the docs say.

One purchase. Yours forever. Updates included when the stack evolves.

Requirements: Node.js 18+.