Skip to content

Next.js + Supabase + shadcn rules for AI coding agents

Full stack: Next.js (App Router) + Tailwind CSS v4 + shadcn/ui + Supabase + Zod validation

Ready-to-commit rules for Next.js (App Router) + Tailwind CSS v4 + shadcn/ui + Supabase + Zod validation in every major format: AGENTS.md (Codex, Cursor, Copilot), CLAUDE.md (Claude Code), Cursor .mdc project rules, legacy .cursorrules, Copilot instructions, Windsurf rules and GEMINI.md. The default vibe-coding SaaS stack: Next.js App Router, Supabase for auth and Postgres, Tailwind and shadcn/ui for the interface.

Last reviewed 2026-10-21 · Customise in the generator · Raw: AGENTS.md, CLAUDE.md

The mistake agents make most on this stack

Agents often ship Supabase tables without Row Level Security or leak the service-role key into a client component.

Generated files

AGENTS.md
# AGENTS.md - this project

Instructions for AI coding agents working in this repository.

## Project

A Next.js (App Router) + Tailwind CSS v4 + shadcn/ui + Supabase + Zod validation project.

Stack: Next.js (App Router), Tailwind CSS v4, shadcn/ui, Supabase, Zod validation.

## Commands

- Dev server: `npm run dev`
- Production build (also type-checks): `npm run build`
- Lint: `npm run lint`
- Add a component: `npx shadcn@latest add <component>`
- New migration: `npx supabase migration new <name>`
- Generate TS types: `npx supabase gen types typescript --local > types/supabase.ts`

## Project structure

- `app/` holds routes: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, `route.ts` for API handlers.
- Shared UI in `components/`, server-only helpers in `lib/` (mark them with `import "server-only"`).

## How to work in this repo

- Read the relevant files before editing. Follow the patterns already in the codebase over these generic rules.
- Make the smallest change that solves the task. Do not refactor or reformat unrelated code.
- Before saying a task is done, run the type-check, lint and tests listed under Commands and fix what you broke.
- If requirements are ambiguous, ask one clear question instead of guessing.
- Never commit secrets, API keys or `.env` files. Use env vars and keep `.env.example` up to date.
- Do not add a new dependency when the standard library or an existing dependency already covers it.
- Ask before adding, removing or upgrading any dependency.
- Ask before changing database schemas, auth, payments or CI configuration.
- Never delete files, drop data or run destructive commands (`rm -rf`, `git push --force`, `DROP TABLE`) without explicit approval.
- Keep each change under ~200 changed lines where possible; split larger work into steps.

## Next.js (App Router)

- Check the Next.js major version in `package.json` before using an API; follow the docs for that version.
- Components are Server Components by default. Add `"use client"` only to the smallest leaf component that needs state, effects, or browser APIs.
- Fetch data in Server Components or Server Actions, not in `useEffect`.
- In Next.js 15+, `params`, `searchParams`, `cookies()` and `headers()` are async: always `await` them.
- Mutations go through Server Actions (`"use server"`) or `route.ts` handlers. Validate every input on the server and re-check auth inside the action.
- After a mutation, call `revalidatePath()` or `revalidateTag()` instead of forcing the whole route dynamic.
- Use `next/image` for images, `next/font` for fonts and `next/link` for internal links.
- Export `metadata` or `generateMetadata` from every page for title, description and Open Graph tags.
- Only variables prefixed `NEXT_PUBLIC_` reach the browser. Never put secrets in them.
- In Next.js 16, `middleware.ts` is renamed `proxy.ts`. Use whichever file the project already has.

## Tailwind CSS v4

- Tailwind v4 is configured in CSS: `@import "tailwindcss";` plus `@theme { ... }` for design tokens. Do not create a `tailwind.config.js` unless the project already has one.
- Use theme tokens (colors, spacing) instead of arbitrary values like `w-[37px]`.
- Build responsive layouts mobile-first with `sm:`, `md:`, `lg:` prefixes.
- Extract repeated class lists into components, not `@apply` chains.
- Support dark mode with the `dark:` variant when the project uses it.

## shadcn/ui

- Before building a UI primitive, check whether a shadcn/ui component exists and add it with `npx shadcn@latest add <component>`.
- Components live in `components/ui/` and are owned code: customize them there rather than wrapping them in more layers.
- Merge class names with the `cn()` helper from `lib/utils`.
- Keep accessibility props from Radix (labels, `aria-*`, focus handling) intact.

## Supabase

- Enable Row Level Security on every table and write explicit policies. No table ships without RLS.
- The anon/publishable key is public. The `service_role`/secret key bypasses RLS: use it only in trusted server code, never in the client.
- Change the schema with migration files in `supabase/migrations/`, not by clicking in the dashboard.
- On the server, verify the user with `supabase.auth.getUser()` (or `getClaims()`); do not trust `getSession()` alone for authorization.
- In SSR frameworks use `@supabase/ssr` (`createServerClient` / `createBrowserClient`), not the deprecated auth-helpers packages.
- Regenerate database types after each migration and type the client with them.

## Zod validation

- Validate all untrusted input (request bodies, form data, env vars, third-party API responses) with a Zod schema at the boundary.
- Derive TypeScript types from schemas with `z.infer<typeof schema>`; do not hand-write duplicate types.
- Use `safeParse` where you need to return validation errors to the user.

## Avoid

- Do not add `"use client"` to layouts or pages just to silence an error; move the interactive part into a child component.
- Do not use the Pages Router (`pages/`) APIs such as `getServerSideProps` in an App Router project.

## Reference docs

- [Next.js docs](https://nextjs.org/docs)
- [Tailwind CSS docs](https://tailwindcss.com/docs)
- [shadcn/ui docs](https://ui.shadcn.com/docs)
- [Supabase docs](https://supabase.com/docs)
- [Zod docs](https://zod.dev)

Commands your agent should run

TaskCommand
Dev servernpm run dev
Production build (also type-checks)npm run build
Lintnpm run lint
Add a componentnpx shadcn@latest add <component>
New migrationnpx supabase migration new <name>
Generate TS typesnpx supabase gen types typescript --local > types/supabase.ts

What the rules cover

Next.js (App Router)

Next.js App Router with React Server Components and TypeScript. Scoped to app/**/*.tsx, app/**/*.ts, src/**/*.tsx, src/**/*.ts in Cursor, Copilot and Windsurf.

  • Check the Next.js major version in package.json before using an API; follow the docs for that version.
  • Components are Server Components by default. Add "use client" only to the smallest leaf component that needs state, effects, or browser APIs.
  • Fetch data in Server Components or Server Actions, not in useEffect.
  • In Next.js 15+, params, searchParams, cookies() and headers() are async: always await them.
  • Mutations go through Server Actions ("use server") or route.ts handlers. Validate every input on the server and re-check auth inside the action.
  • After a mutation, call revalidatePath() or revalidateTag() instead of forcing the whole route dynamic.
  • Use next/image for images, next/font for fonts and next/link for internal links.
  • Export metadata or generateMetadata from every page for title, description and Open Graph tags.
  • Only variables prefixed NEXT_PUBLIC_ reach the browser. Never put secrets in them.
  • In Next.js 16, middleware.ts is renamed proxy.ts. Use whichever file the project already has.

Source docs: Next.js docs

Tailwind CSS v4

Utility-first styling with Tailwind CSS v4. Scoped to **/*.css, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.html, **/*.blade.php, **/*.erb in Cursor, Copilot and Windsurf.

  • Tailwind v4 is configured in CSS: @import "tailwindcss"; plus @theme { ... } for design tokens. Do not create a tailwind.config.js unless the project already has one.
  • Use theme tokens (colors, spacing) instead of arbitrary values like w-[37px].
  • Build responsive layouts mobile-first with sm:, md:, lg: prefixes.
  • Extract repeated class lists into components, not @apply chains.
  • Support dark mode with the dark: variant when the project uses it.

Source docs: Tailwind CSS docs

shadcn/ui

Copy-in React components built on Radix and Tailwind. Scoped to components/ui/**/*.tsx, src/components/ui/**/*.tsx in Cursor, Copilot and Windsurf.

  • Before building a UI primitive, check whether a shadcn/ui component exists and add it with npx shadcn@latest add <component>.
  • Components live in components/ui/ and are owned code: customize them there rather than wrapping them in more layers.
  • Merge class names with the cn() helper from lib/utils.
  • Keep accessibility props from Radix (labels, aria-*, focus handling) intact.

Source docs: shadcn/ui docs

Supabase

Postgres, auth and storage from Supabase. Scoped to supabase/**, **/supabase/**/*.ts, lib/supabase/** in Cursor, Copilot and Windsurf.

  • Enable Row Level Security on every table and write explicit policies. No table ships without RLS.
  • The anon/publishable key is public. The service_role/secret key bypasses RLS: use it only in trusted server code, never in the client.
  • Change the schema with migration files in supabase/migrations/, not by clicking in the dashboard.
  • On the server, verify the user with supabase.auth.getUser() (or getClaims()); do not trust getSession() alone for authorization.
  • In SSR frameworks use @supabase/ssr (createServerClient / createBrowserClient), not the deprecated auth-helpers packages.
  • Regenerate database types after each migration and type the client with them.

Source docs: Supabase docs

Zod validation

Runtime schema validation with Zod. Scoped to **/*.ts, **/*.tsx in Cursor, Copilot and Windsurf.

  • Validate all untrusted input (request bodies, form data, env vars, third-party API responses) with a Zod schema at the boundary.
  • Derive TypeScript types from schemas with z.infer<typeof schema>; do not hand-write duplicate types.
  • Use safeParse where you need to return validation errors to the user.

Source docs: Zod docs

How to install

  1. Copy AGENTS.md to your repo root. That covers Codex, Cursor, GitHub Copilot and most other agents.
  2. Using Claude Code? Add a CLAUDE.md with the single line @AGENTS.md, or use the standalone CLAUDE.md tab above.
  3. Want rules that only load for certain files in Cursor? Add the .cursor/rules/*.mdc files.
  4. Commit the files so your whole team (and every agent) shares them.

FAQ

Where do I put the AGENTS.md for Next.js (App Router) + Tailwind CSS v4 + shadcn/ui + Supabase + Zod validation?

Save it as AGENTS.md in the root of your repository, next to your main config file. Codex, Cursor and GitHub Copilot pick it up automatically. For Claude Code, add a CLAUDE.md containing @AGENTS.md (or use the standalone CLAUDE.md on this page).

What is the most common mistake AI agents make with Next.js (App Router)?

Agents often ship Supabase tables without Row Level Security or leak the service-role key into a client component.

Which commands should the agent run to check its work?

For this stack: npm run dev, npm run build, npm run lint, npx shadcn@latest add <component>. They are listed in the generated files so the agent runs them before finishing a task.

Do these Next.js (App Router) + Tailwind CSS v4 + shadcn/ui + Supabase + Zod validation rules work with Cursor and Claude Code?

Yes. This page includes the same rules as AGENTS.md, CLAUDE.md, Cursor .mdc project rules, a legacy .cursorrules file, GitHub Copilot instructions, Windsurf rules and GEMINI.md.

Can I customise these rules?

Yes. Open this stack in the generator to add or remove libraries, set your project name and package manager, switch beginner explanations on, and download everything as a zip.

Related stacks