Featured

AI Rules Pack for Production-Ready Front-End Development (Next.js 16, React 19, and more)

Stop repeating yourself to AI. Get 15+ opinionated rules for Next.js 16 App Router, React 19, Tailwind v4, shadcn/ui, testing, and production readiness. Compatible with Cursor, Claude Code, and OpenAI Codex. Ready in 60 seconds.

lifetime-accessai-toolsprompt-engineering

$9.99one-time · yours forever · updates included

Launch discount, use codeSAASTELAUNCH30for 30% off

Get Instant Access Buy on LemonSqueezy

Instant downloadNode.js 18+ requiredWorks on Windows, Mac & LinuxFree updates forever

What's Included

Multiple base rules (always active): Next.js 16 core, Cache Components, React 19, TypeScript + Tailwind + shadcn, SaaS patterns, testing (Vitest, React Testing Library, Playwright for critical flows), and production readiness (accessibility, performance, SEO, security)
4 auth rules (pick one): Clerk, Better Auth, Auth.js v5 (maintenance mode), Supabase Auth
2 data fetching rules: Server Components, TanStack Query
2 database rules: Drizzle ORM, Prisma
Interactive CLI setup script
Cursor, Claude Code, and OpenAI Codex compatibility
Git commit conventions
Complementary Cursor Memories guide
Full user manual

Get Instant Access

$9.99 · Code SAASTELAUNCH30 for 30% off

Same prompt, different output

This is what happens when Cursor knows your stack.

app/users/page.tsx

'use client'
import { useEffect, useState } from 'react'

export default function UsersPage() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])

  if (loading) return <div>Loading...</div>
  return <ul>{users.map(u => <li>{u.name}</li>)}</ul>
}

Reaches for useEffect, tailwind.config.js, and Pages Router habits. Cursor's defaults, not yours.

The same three corrections, every session

You open Cursor on a new Next.js project and ask for a data-fetching function. It reaches for useEffect and useState. You fix it. Next component, same fix.

You ask it to set up Tailwind. It writes a tailwind.config.js. You deleted that file the day you moved to v4.

You ask for a form with server-side validation. It's still calling useFormState. In React 19 that's useActionState.

None of this is an AI problem. The model doesn't know your stack until you tell it. Right now, you're telling it every single session.

What's covered

15+ rules distilled from real production codebases, not generic tutorials.

Next.js 16 App Router

File structure, Server vs Client Components, caching (static, ISR, tag-based, no-store), parallel fetching, Suspense streaming, generateMetadata, Cache Components, the stable React Compiler, Turbopack's Rust port, and Instant Navigations.

React 19

Server Actions with structured results, useActionState, useOptimistic, the use() hook, error boundaries, provider patterns that don't break Server Components.

Tailwind v4

CSS-first @theme configuration, why tailwind.config.js is gone, @import "tailwindcss", multi-theme support with @theme inline, current through v4.3.

shadcn/ui

Never edit components/ui directly. How to extend by wrapping, the cn() setup, composition patterns that scale, the v4 CLI, and Base UI as the default for new projects.

TypeScript + Zod

strict: true always, types inferred from Zod schemas, safeParse() in Server Actions, satisfies over any, Zod v4's top-level z.email() and z.uuid().

SaaS patterns

Dashboard shells, webhook route handlers, env validation at startup, structured error handling, loading states, URL state, feature flags.

Testing

Vitest and React Testing Library for unit and component tests, Playwright reserved for critical flows only, real-database integration tests over mocked ORMs.

Production Readiness

WCAG 2.2 AA baseline, a Core Web Vitals budget, SEO essentials, security headers, observability, and a design polish bar benchmarked against Linear, Stripe, and Vercel.

Pick your stack

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

Auth

ClerkBetter AuthAuth.js v5 (maintenance mode)Supabase Auth

Data fetching

Server Components + fetchTanStack Query v5Both

Database

Drizzle ORM (1.0 beta)Prisma (Rust-free engine)

One command: node setup.mjs. Works with Cursor, Claude Code, and OpenAI Codex.

Using This Product

The rules themselves are plain markdown files. What you're buying is the 50+ hours spent figuring out which patterns hold up in production, not in tutorials. Knowing that Tailwind v4 dropped its config file. Knowing that useFormState became useActionState. Knowing how Better Auth's session refresh differs from Supabase's, in Next.js 16.

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

Requirements: Node.js 18+.

Ready to stop repeating yourself?

One purchase. Your AI coding tool knows your stack forever.

$9.99 · Use code SAASTELAUNCH30 for 30% off