React 19 + Vite + TS + Tailwind Cursor Rules Template

Overview

The React 19 + Vite + TypeScript + Tailwind Cursor Rules Template provides a copyable Cursor Rules configuration designed for Cursor AI to guide frontend development. It covers framework role, code style, architecture, authentication, database/API patterns, testing, and anti-patterns for a safe and maintainable React stack. This page is a practical copyable source you can paste into your project root as .cursorrules.

When to Use These Cursor Rules

• When starting a React 19 project with Vite, TS, and Tailwind to enforce consistent patterns.
• When you want Cursor AI to guide coding decisions and guard against anti-patterns.
• When integrating frontend with an API backend and you need explicit security and testing guidelines.
• When you require a shared project structure and linting/CI expectations across teams.

Copyable .cursorrules Configuration

Framework: ReactVersion: 19Tooling: Vite, TypeScript, TailwindContext: Frontend SPA with API access; Cursor AI provides guardrailsRole: Frontend EngineerContextSummary: React 19 app with Cursor AI rules for safe, maintainable frontend codeCodeStyle: TypeScript strict, Prettier 2 spaces, ESLint with React pluginArchitecture: src/components, src/pages, src/hooks, src/utils, public, vite.config.ts, tailwind.config.tsAuthentication: Do not store secrets; Use Authorization header; Token in HttpOnly cookie from APIDatabaseAndORM: Frontend should not access DB; use API endpoints with REST/GraphQL; use cachingTestingAndLinting: Jest + RTL; Playwright for E2E; ESLint; Pre-commitAntiPatterns: Do not bypass TS; do not log secrets; do not mutate DOM directly; do not expose API keys

Recommended Project Structure

src/  app/  components/  pages/  hooks/  utils/  styles/public/index.htmlvite.config.tstailwind.config.jstsconfig.json

Core Engineering Principles

• Clear separation of concerns between UI, data, and API interactions
• Type safety and explicit contracts across components and services
• Deterministic builds and reproducible test results
• Guardrails for Cursor AI with explicit anti-patterns
• Accessible by default: keyboard navigation and visible focus states
• Minimal surface area: avoid global state leakage and over-fetching
• Documented decisions: keep design and API contracts discoverable
• Observability: structured logs for frontend interactions and errors

Code Construction Rules

• Use React 19 functional components with explicit props types
• All API data typed with TypeScript interfaces; avoid any
• Tailwind utility classes for styling; no custom CSS leaks
• Use absolute imports and a single alias root path
• Environment-specific API endpoints via .env files; never hard-code keys
• Keep components small and reusable with clear boundaries
• Consistent naming: components, hooks, and utils follow the same kebab/case rules
• Prefer small, testable units; mock API calls in tests
• Do not embed secrets or credentials in the client code
• Do not bypass TypeScript checks or lint rules

Security and Production Rules

• Do not expose API keys or secrets in the frontend code
• Use Authorization headers or HttpOnly cookies for API authentication
• Enable strict CORS and proper origin checks on the server; frontend should not bypass them
• Apply Content Security Policy (CSP) via server headers; avoid inline scripts
• Validate input on the server; frontend should perform basic validation only
• Use HTTPS in all environments; ensure secure transport
• Optimize bundle size; enable code splitting and lazy loading for routes

Testing Checklist

• Unit tests for components with React Testing Library
• Integration tests for API interactions with MSW or mocked fetch
• End-to-end tests with Playwright or Cypress for critical flows
• Linting and TypeScript type checks in CI
• Pre-commit hooks to run tests and linting before merges
• CI cache and parallel tests to speed up feedback

Common Mistakes to Avoid

• Bypassing TS type checks to quick-fix an integration
• Storing secrets in frontend code or environment files committed to repo
• Mutating DOM outside React lifecycle or bypassing React state
• Over-fetching data or leaking sensitive data to the client
• Ignoring accessibility and responsive design in early stages

FAQ

What is a Cursor Rules Template for React 19?

A copyable .cursorrules configuration for React 19 with Vite, TS, and Tailwind. It establishes guardrails, project structure, and patterns Cursor AI uses to guide development.

How do I paste the .cursorrules into my project?

Copy the block from the code sample in the page and paste it into the root as .cursorrules. Cursor AI will read it to enforce rules and style.

Does this template include security and testing guidance?

Yes. It covers authentication patterns, secure API usage, linting, unit/integration testing, and deployment readiness.

Can I adapt this to REST or GraphQL backends?

Yes. The rules outline API consumption patterns that work with REST or GraphQL backends and advise on token handling and error management.

What should I do with the provided project structure?

Use the recommended structure as a starting point; adapt folders to your app size while preserving the clear separation of concerns and Cursor AI guardrails.

SEO and Open Graph

This page is a Cursor Rules Template for a React stack and includes a copyable .cursorrules block you can paste into your project root, helping operators and developers implement Cursor AI guardrails in the frontend.