AGENTS.md Generator

Generator / Templates / React SPA

AGENTS.md for React SPA

Client-side React with TypeScript, Tailwind and Vitest. This AGENTS.md template combines 117 rules from 14 packs and runs to 160 lines.

Open this template in the AGENTS.md generator

What is inside

The generated AGENTS.md

This is the file the generator produces for the React SPA preset, before you add your project name and commands.

# AGENTS.md

## Agent behavior

- For changes touching more than three files, outline the plan and wait for confirmation before editing.
- Ask a clarifying question when requirements are ambiguous instead of guessing.
- Keep diffs small and focused on the request; do not refactor unrelated code.
- Run the relevant tests, linter and type checker before reporting a task as done, and report failures honestly.
- Never delete, skip or loosen a failing test to make it pass; fix the cause.
- Do not add new dependencies without explicit approval; prefer the standard library and existing packages.
- Do not edit generated or vendored files; change the source and regenerate.
- Never read, print or commit secrets, .env files or credentials.
- Read the relevant code and tests before proposing a change; do not edit files you have not read.
- Fix the root cause rather than suppressing the symptom with a workaround or silenced warning.
- Do not add lint or type suppressions to get a clean run; fix the underlying issue.
- Report failing tests, skipped steps and unverified claims plainly; never claim success without evidence.
- Verify library APIs in the installed version or its docs before using them; do not invent functions.
- Do not change public behavior, file formats or APIs unless the task asks for it.
- Never hardcode values or special-case inputs to satisfy a test.
- If an approach fails twice, stop and ask instead of trying increasingly invasive workarounds.
- Before editing a directory, read the nearest AGENTS.md and follow it over the root file where they differ.
- Preserve unrelated working tree changes. Never revert or rewrite edits you did not make.

## Design system and UI

- Use design tokens for colors, spacing, typography and radii; never hardcode them.
- Reuse existing components before creating new ones; extend variants instead of duplicating.
- Meet WCAG 2.1 AA: semantic HTML, visible focus, keyboard operability, sufficient contrast, labelled controls.
- Design mobile-first and verify layouts at phone, tablet and desktop widths.
- Handle loading, empty, error and disabled states for every data-driven view.
- Use the spacing scale for margins and padding; no one-off pixel values.
- Use the typography scale for sizes and weights.
- Add a variant or prop to an existing component instead of copying it.
- Use semantic color tokens (text-primary, surface) instead of palette values in components.

## Testing

- Add or update tests for every behavior change and bug fix.
- For bug fixes, write a failing test that reproduces the bug before fixing it.
- Prefer many fast unit tests, fewer integration tests and a small number of end-to-end tests.
- Mock only external boundaries (network, clock, filesystem); use real collaborators otherwise.
- Keep tests deterministic: no real time, randomness or network without control.
- Keep tests independent; no shared mutable state or required execution order.
- Structure tests as arrange, act, assert with one behavior per test.
- Build test data with small factories instead of large shared fixtures.
- Treat a flaky test as a bug: find the cause instead of adding retries or sleeps.
- Use snapshot tests only for small stable outputs and review snapshot diffs carefully.
- Test public behavior rather than private functions or implementation details.
- Make assertions specific enough that the test fails if the behavior breaks.

## Git and pull requests

- Write commit messages in Conventional Commits format (feat:, fix:, docs:, refactor:, test:, chore:) and mark breaking changes with ! or a BREAKING CHANGE footer.
- Keep pull requests small and focused on one change.
- Write commit subjects in the imperative mood, 72 characters or fewer.
- Never force-push to shared branches and never rewrite published history.
- Run lint, type check and tests before committing.
- Never commit secrets, build output or large binaries.
- Describe motivation, approach and testing in the pull request description.
- Make each commit one logical change that builds and passes tests.
- Do not amend or rebase commits that are already pushed to a shared branch.
- Add build output, local env files and editor files to .gitignore instead of committing them.
- Open pull requests only when CI is green and the diff is self-reviewed.
- Never bypass commit hooks or signing with --no-verify unless explicitly instructed.

## Security

- Load secrets from environment variables or a secret manager; never hardcode them.
- Use parameterized queries and safe APIs; never build SQL, shell commands or HTML by string concatenation with user input.
- Enforce authentication and authorization on the server for every protected operation.
- Pin dependency versions, commit lockfiles and review new packages before adding them.
- Grant the minimum permissions needed for tokens, service accounts and containers.
- Use well-reviewed cryptographic libraries; never invent your own algorithms or store plain passwords.
- Encode output for its context and avoid injecting raw HTML; sanitize rich text with a vetted library.
- Protect state-changing browser requests with CSRF tokens or SameSite cookies.
- Configure CORS with explicit origins; never reflect arbitrary origins with credentials.
- Use HttpOnly, Secure, SameSite cookies and rotate session identifiers on login.
- Validate and allow-list URLs before fetching user-supplied addresses to prevent SSRF.
- Hash passwords with Argon2id, or scrypt or bcrypt where it is unavailable, with a unique salt; never use fast hashes such as SHA-256.
- Run secret scanning in CI and rotate any credential that has been exposed.
- Validate untrusted input against a schema. Never run eval, exec or unpickling on it.

## Workflow and tooling

- Run tools through the project scripts (npm run, make, task) instead of invoking underlying binaries directly, so flags and environments match CI.
- Run the single aggregate check command (for example pre-commit or a lint script) before finishing; fix every failure and re-run until it passes.
- Run the specific test files related to your change first, and run the full suite only before handing off.
- Before editing a directory, read the README and any nested AGENTS.md that applies to it.
- Put throwaway scripts and experiment output in a gitignored scratch directory and delete them when done.
- After switching branches or pulling dependency changes, reinstall and rebuild before running tests.
- When CI fails, find the exact failing job and command, reproduce it locally, then fix the cause instead of re-running blindly.
- Stop any dev servers or watchers you started once you are done.
- Ask before running destructive or irreversible commands such as dropping databases, deleting branches, rm -rf or force operations.
- Prefer existing scripts, generators and templates in the repo over writing new ad hoc tooling.
- When the repository documents skills or runbooks for a task (migrations, releases, dependency bumps), follow them instead of improvising.
- Never start long-running dev servers or watchers in the foreground. Use targeted one-shot commands.

## Verification and CI feedback

- Run the narrowest relevant test first, then widen to the package and workspace checks as confidence grows.
- Run the project formatter and linter on changed files before committing, using the repo scripts or hooks.
- For a bug fix, reproduce the failure first, then show the regression test failing without the fix and passing with it.
- Report a task as done only after running the checks that prove it. If you could not run them, say so.
- Before finishing, re-read the full diff as a reviewer with no knowledge of this session and fix what would confuse them.

## TypeScript conventions

- Enable "strict" in tsconfig and keep it on.
- Do not use any; use unknown and narrow, or model the type properly.
- Validate untrusted data at runtime with a schema library instead of casting.
- Avoid non-null assertions (!) and unchecked type assertions (as).
- Model variants with discriminated unions and exhaustive switch checks.
- Do not use @ts-ignore; use @ts-expect-error with a reason only when unavoidable.

## React conventions

- Use function components and hooks; do not write class components.
- Follow the Rules of Hooks and keep effect dependency arrays exhaustive.
- Derive values during render instead of duplicating them in state or syncing them with effects.
- Use stable unique keys for lists, never array indexes for dynamic lists.
- Test components through user-visible behavior with React Testing Library, not implementation details.
- Do not add useMemo, useCallback or memo by default; rely on React Compiler where enabled and memoize by hand only for measured cost or stable effect dependencies.
- Prefer composition (children, slots) over long prop lists and boolean flags.
- Keep each input either controlled or uncontrolled, never switching between them.
- Use effects only to synchronize with external systems, not for data transformation.

## Tailwind CSS conventions

- Style with utility classes; extract components rather than long @apply blocks.
- Define colors, spacing and fonts in the Tailwind theme and use them instead of arbitrary values.
- Use responsive, dark and state variants instead of custom media queries.
- Do not build class names by interpolation such as text-${color}-600; map values to complete class names so Tailwind can detect them.
- Extract repeated utility groups into components, not into custom CSS.

## Vitest, Jest and Playwright conventions

- Colocate unit tests as *.test.ts next to the code they cover.
- Write end-to-end tests with Playwright, using role and text locators rather than CSS selectors.
- Never use fixed sleeps in tests; wait on conditions or web-first assertions.

## TanStack Query conventions

- Use structured query keys from a central factory and include every input that affects the result.
- Invalidate or update affected queries after a mutation.
- Do not copy query data into local state; read it from the query.
- Render loading, error and empty states for every query.

## ESLint and Prettier conventions

- Configure ESLint with the flat config and keep rules in version control.
- Let Prettier own formatting and keep ESLint to code-quality rules.
- Do not add eslint-disable comments; fix the code or change the rule in config with a reason.
- Run lint with zero warnings allowed in CI.
- Set linterOptions.reportUnusedDisableDirectives so disable comments that no longer suppress anything are reported.

## Vite and webpack conventions

- Expose only prefixed variables (VITE_) to client code and never put secrets in them.
- Split routes and heavy modules with dynamic import.
- Emit content-hashed asset filenames for long-term caching.

How to use it

Related guides

More AGENTS.md templates