Skip to content
vibespell

.windsurf/rules/project.md

Windsurf rules for React

Windsurf rules tell the Cascade agent how this repo is built and tested. The current location is `.windsurf/rules`. Older setups still read a root `.windsurfrules` file. This copy is written for a React project. This repository is a React app built from function components and hooks. Keep the bundler, router, and state library the repo already has.

The example uses a balanced, readable style, pragmatic tests, and comments only where the intent is not obvious. Open the generator to make the agent stricter, switch to test-first, quiet the comments, or pick a different file.

The example assumes function components and hooks, not class components. It does not assume Next.js, Redux, or a particular CSS system. Vite is a fine default only when the repo has not chosen a bundler yet.

Example file

Balanced strictness, readable style, pragmatic tests. Download name: project.md. Legacy path: .windsurfrules

# Windsurf rules

Rules for Windsurf Cascade in this React repository.
If the project still uses a root `.windsurfrules` file, keep the same rules there.

## Stack

This repository is a React app built from function components and hooks. Keep the bundler, router, and state library the repo already has.

## Layout

- Colocate a component with its styles and local helpers.
- Shared components live in one components directory. App state stays as low as it can.
- Do not invent a new folder taxonomy when the repo already has one.

## Commands

- Dev server: `npm run dev`
- Production build: `npm run build`
- Lint: `npm run lint`
- Tests: `npm test`

Use the script the repo already defines when it differs from the command above.

## Conventions

- Write function components and hooks. Do not add class components.
- Effects synchronize with an external system. They are not a data-loading layer if the app already has one.
- Give every control a label. Buttons do something; links go somewhere.
- Do not add a state library, router, or CSS framework that is not already a dependency.
- Lift state only when two siblings need it. Otherwise keep it local.
- Keys must be stable. Do not use the array index when the list can reorder.

## Testing

Add or update tests when behavior changes.

Prefer React Testing Library and test what the user can see and do. Mock network boundaries, not child components.

## Style

- Optimize for the next reader over the shortest diff.
- Comment only when the why is non-obvious.
- Name things the way neighboring files already do.
- Do not reformat code you did not change.

## Errors

- Fail at the boundary. Do not swallow errors.
- Show a recoverable error in the UI. An error boundary is appropriate for a subtree that can fail on its own.

## Scope

- Do the requested task. Do not refactor unrelated code.
- Match the rigor already in the repo. Fix what you touch.
- Ask one clarifying question only when the task cannot be finished without it. Otherwise state the assumption and continue.

## Avoid

- Do not disable a lint rule to hide a hooks dependency bug.
- Do not store derived data in state when a render can compute it.
- Do not fetch in an effect and forget a cancelled-request guard.
- Do not break keyboard access to make a click handler shorter.

## Done when

- The requested behavior works.
- The dev server still renders the screen you touched, and `npm test` passes if the repo has tests.
- The diff stays inside the task.
- You list anything you could not run.

Add it to the project

  1. 01

    Copy a starting file

    Copy the example Windsurf rules on this page, or open the generator if you want different testing, strictness, or comment rules.

  2. 02

    Save it at .windsurf/rules/project.md

    Save it at `.windsurf/rules/project.md` in the React repo. If the project still uses a single root file, save the same body as `.windsurfrules`.

  3. 03

    Start a fresh agent session

    Rules files are read when a session starts. A chat that is already open may still be using the old instructions.

  4. 04

    Give it one small task

    Ask for one change a React agent often gets wrong, such as a form control with a real label and keyboard support. If it ignores the file, confirm the path and start a new session.

Questions about this file

Where do I put Windsurf rules in a React repo?

Save it at `.windsurf/rules/project.md` in the React repo. If the project still uses a single root file, save the same body as `.windsurfrules`.

Which tools read this Windsurf rules?

Windsurf reads `.windsurf/rules/*.md` and, on older projects, `.windsurfrules`. Cursor and Claude Code do not load this path.

What does the React example assume?

The example assumes function components and hooks, not class components. It does not assume Next.js, Redux, or a particular CSS system. Vite is a fine default only when the repo has not chosen a bundler yet.

Does VibeSpell upload my repository?

No. Recipe pages are static, and the generator builds the file in your browser from the options you pick. Your source code never leaves the machine.

Other files for React

Windsurf rules for other stacks