Home › Next.js › Next.js Windsurf rules

Next.js Windsurf rules

Windsurf (Cascade) workspace rules for Next.js + shadcn/ui projects.

WindsurfNext.js

How to use

Save this as .windsurf/rules/nextjs.md in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.

.windsurf/rules/nextjs.mdDownload  
# Windsurf rules — Next.js + shadcn/ui

- Stack: Next.js App Router, TypeScript strict, Tailwind, shadcn/ui, pnpm.
- Add UI primitives with `pnpm dlx shadcn@latest add <component>`; never hand-copy shadcn source from memory.
- Compose from `components/ui/*`; app-specific components go in `components/`.
- Forms: react-hook-form + zod resolver + shadcn `<Form>`.
- Server Components by default; client components only when interactive.
- Keep accessible markup: labels on inputs, buttons are `<button>`, links are `<Link>`.
- When you change more than 3 files, list the plan first and wait for confirmation.
- After edits run `pnpm lint && pnpm build` and report the result.

Related rules

Phaser 3 browser game rules

Windsurf rules for 2D browser games with Phaser 3, TypeScript and Vite.

WindsurfPhaser (web games)

Next.js App Router (TypeScript) rules

Cursor project rules for Next.js 15 App Router apps with TypeScript, Server Components, and Tailwind.

CursorNext.js

Next.js CLAUDE.md

A CLAUDE.md for Claude Code working in a Next.js + Prisma + Tailwind codebase.

Claude Code (CLAUDE.md)Next.js

Tailwind CSS v4 rules

Windsurf rules for clean, consistent, accessible Tailwind CSS v4 styling.

WindsurfTailwind CSS

Get new rules weekly

One email a week: fresh rule files, agent tips, and what's changing in Cursor, Claude Code and Copilot. Free, unsubscribe anytime.

Opens the Rulestack Newsletter on beehiiv in a new tab. Or subscribe directly on beehiiv.