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

Web accessibility (WCAG 2.2) rules

Windsurf rules for building accessible web UIs to WCAG 2.2 AA: semantics, keyboard, focus, contrast, and testing.

WindsurfAccessibility

Django Windsurf rules

Windsurf rules for Django 5.2 LTS projects: apps, models and migrations, ORM performance, forms, and tests.

WindsurfDjango

Documentation writing rules

Windsurf rules for writing and updating READMEs, docstrings, ADRs, and changelogs alongside code changes.

WindsurfAgent workflows

Electron app Windsurf rules

Windsurf rules for secure Electron 44 apps: context isolation, preload bridges, typed IPC, and packaging.

WindsurfElectron

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.