Vite + Shadcn/UI Rules

This is a comprehensive Cursor Rules collection for Vite + React + TypeScript + Shadcn/UI stack. By transforming project conventions into AI-understandable rules, Cursor automatically follows your team’s technical standards and best practices during development.

Rules Overview

Rule File	Scope	Content	Purpose
Global Rules `global-rules.mdc`	Entire project `alwaysApply: true`	Tech stack definition, directory structure TypeScript standards, import conventions	Ensure consistency in project architecture and code style
Routing Rules `routing-rules.mdc`	`src/pages/**`	Page file structure, route protection User authentication	Standardize code organization and security practices at routing layer
UI Rules `ui-rules.mdc`	`*.tsx`	Shadcn/UI component usage Icon system, notification system	Unify UI component usage and interface style
API Rules `api-rules.mdc`	`src/clients/**`	API client architecture, SWR integration HTTP methods, error handling	Standardize API calling patterns and data fetching practices

How to Use

Add these rule files to your project’s .cursor/rules/ directory, and Cursor will automatically apply the corresponding rules based on file paths and globs configuration:

- - global-rules.mdc
  - routing-rules.mdc
  - ui-rules.mdc
  - api-rules.mdc

Key Features

Layered Design: Precise scope control through alwaysApply and globs
Stack-Specific: Optimized specifically for Vite + React + Shadcn/UI ecosystem
Best Practices: Includes TypeScript standards, code organization, and security authentication
Team Collaboration: Makes implicit knowledge explicit, reducing onboarding time for new members

Extension Suggestions

You can add more rule files based on project needs:

State Management Rules: Zustand store conventions for src/stores/**
Testing Rules: Test file writing standards
Style Rules: Tailwind CSS usage conventions
Form Rules: React Hook Form handling standards

This approach builds a complete, layered rule system that helps AI assistants better understand and follow project conventions.

Rules Extraction Template

If you want to extract conventions from an existing Vite + React project, you can use the following prompt template:


# Vite + React Project Conventions Extraction Task
 
You are now a highly experienced senior frontend architect, specializing in reverse-engineering and summarizing **project-specific mandatory conventions** from existing Vite + React + TypeScript project code.
 
## Task
 
Based on the project code snippets I provide (including directory structure, representative components, configuration files, dependency usage, etc.), summarize the high-level content for the following **4 convention documents** for this project, to be saved in the `.cursor/rules/` directory.
 
## Principles
 
Strictly adhere to the following principles:
 
1. Only write conventions that **actually exist and are repeatedly enforced** in this project. **Do not write** general LLM knowledge, textbook best practices, or generic online advice.
 
   - For example, don't write things like "components should have single responsibility", "use ESLint", "define types for Props" that everyone knows, unless the project has very specific, non-standard mandatory conventions or special approaches.
 
2. Keep each document under **300 lines**, with concise, clear, and actionable language.
 
3. **Only include** key import locations and representative code snippets (3-10 lines recommended) **when truly necessary to clarify usage, reduce ambiguity, or when the project's approach significantly deviates from standard practice**.
 
   - If the rule itself is already clear enough, or if the project's approach aligns with mainstream practices, don't include code.
   - Don't force code examples just to fill space.
 
4. The rule documents are intended for **Cursor Rules** to improve AI generation quality, so optimize for LLM attention.
 
## 4 Documents to Summarize
 
Only summarize high-level content, focusing on what the project actually enforces uniquely, without over-detailing implementation:
 
### 1. Global Development Conventions (`global-rules.mdc`)
 
- Focus on: Tech stack, directory structure and module boundaries, TypeScript configuration and type definition conventions, import path conventions (alias, relative path usage rules)
- Set `alwaysApply: true`
 
### 2. Routing Conventions (`routing-rules.mdc`)
 
- Focus on: Route file organization, page component naming and structure, route protection and permission control, navigation methods (Link vs useNavigate)
 
### 3. UI Component Conventions (`ui-rules.mdc`)
 
- Focus on: UI component library used in the project (Shadcn/UI, Ant Design, etc.), component import and usage patterns, icon system, global component usage conventions (notifications/modals, etc.), styling approach (CSS Modules, Tailwind, styled-components, etc.)
 
### 4. API and Data Fetching Conventions (`api-rules.mdc`)
 
- Focus on: API client architecture (axios, fetch, etc.), data fetching library (SWR, React Query, etc.), request/response interceptors, error handling and retry strategies, type definition approaches