Skip to content
vibespell

.cursor/rules/security.mdc

Cursor security rule for React

A focused Cursor `.mdc` rule for auth, secrets, and untrusted input. It attaches when those files change, instead of repeating security policy in every chat. 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.

Customize in the generatorBrowse the library

Example file

Balanced strictness, readable style, pragmatic tests. Download name: security.mdc

---
description: "Security rules for a React repository"
globs: "**/*{auth,Auth,secret,config,Config}*"
alwaysApply: false
---

# Security rules

Attach these rules when editing auth, config, or secret-handling code in this React repository.
This repository is a React app built from function components and hooks. Keep the bundler, router, and state library the repo already has.

## Secrets and trust

- Do not embed API keys in frontend source.
- Escape untrusted HTML. Do not pass it to dangerouslySetInnerHTML.
- Send authenticated mutations to the server. A hidden button is not a permission check.

## 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.

## Done when

- Untrusted input is validated before a side effect.
- No secret was added to source, logs, or a client bundle.
- The dev server still renders the screen you touched, and `npm test` passes if the repo has tests.

Add it to the project

  1. 01

    Copy a starting file

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

  2. 02

    Save it at .cursor/rules/security.mdc

    Save it at `.cursor/rules/security.mdc` in the React repo. Narrow the globs if your auth and config files live in a known folder.

  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 Cursor security rule in a React repo?

Save it at `.cursor/rules/security.mdc` in the React repo. Narrow the globs if your auth and config files live in a known folder.

Which tools read this Cursor security rule?

Cursor loads `.cursor/rules/security.mdc` for files that match its globs. Pair it with the always-on project rule. It is not a substitute for code review.

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

Cursor security rule for other stacks