From b99093b1f4b23e0d16a542529342a2b32d4214b9 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Fri, 9 May 2025 23:54:45 +0800
Subject: [PATCH] feat: add 4 new rules and update other rules file pattern

---
 .cursor/rules/ai-sdk-best-practices.mdc       |  2 +-
 .cursor/rules/database-state-management.mdc   | 43 +++++++++++++++
 .cursor/rules/date-fns-best-practices.mdc     |  4 +-
 .cursor/rules/development-workflow.mdc        | 39 ++++++++++++++
 .cursor/rules/drizzle-orm-best-practices.mdc  |  3 +-
 .cursor/rules/nextjs-best-practices.mdc       |  2 +-
 .cursor/rules/project-structure.mdc           | 36 +++++++++++++
 .cursor/rules/radix-ui-best-practices.mdc     |  2 +-
 .cursor/rules/react-best-practices.mdc        |  2 +-
 .../rules/react-hook-form-best-practices.mdc  |  4 +-
 .cursor/rules/stripe-best-practices.mdc       |  2 +-
 .cursor/rules/tailwindcss-best-practices.mdc  |  2 +-
 .cursor/rules/typescript-best-practices.mdc   |  4 +-
 .cursor/rules/ui-components.mdc               | 54 +++++++++++++++++++
 .cursor/rules/zod-best-practices.mdc          |  3 +-
 .cursor/rules/zustand-best-practices.mdc      |  4 +-
 16 files changed, 190 insertions(+), 16 deletions(-)
 create mode 100644 .cursor/rules/database-state-management.mdc
 create mode 100644 .cursor/rules/development-workflow.mdc
 create mode 100644 .cursor/rules/project-structure.mdc
 create mode 100644 .cursor/rules/ui-components.mdc

diff --git a/.cursor/rules/ai-sdk-best-practices.mdc b/.cursor/rules/ai-sdk-best-practices.mdc
index 24e4219..7bc1bf1 100644
--- a/.cursor/rules/ai-sdk-best-practices.mdc
+++ b/.cursor/rules/ai-sdk-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for using Vercel AI SDK
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/database-state-management.mdc b/.cursor/rules/database-state-management.mdc
new file mode 100644
index 0000000..9ea11ba
--- /dev/null
+++ b/.cursor/rules/database-state-management.mdc
@@ -0,0 +1,43 @@
+---
+description:
+globs: *.tsx,*.ts
+alwaysApply: false
+---
+# Database and State Management Guide
+
+## Database (Drizzle ORM)
+- Schema definitions in `src/db/schema.ts`
+- Migrations in `drizzle/`
+- Use `db:generate` to create new migration files based on schema changes
+- Use `db:migrate` to apply pending migrations to the database
+- Use `db:push` to sync schema changes directly to the database (development only)
+- Use `db:studio` to view and manage database data through the Drizzle Studio UI
+- Follow naming conventions for tables and columns
+- Use proper data types and constraints
+- Implement proper indexes
+- Handle relationships properly
+- Use transactions when needed
+
+## State Management (Zustand)
+- Store definitions in `src/stores/`
+- Keep stores modular and focused
+- Use TypeScript for store types
+- Implement proper state updates
+- Handle async operations properly
+- Use selectors for derived state
+- Implement proper error handling
+- Use middleware when needed
+- Keep store logic pure
+- Document complex state logic
+
+## Data Flow
+1. Server-side data fetching in server components
+2. Client-side state in Zustand stores
+3. Form state in React Hook Form
+4. API calls through server actions
+5. Database operations through Drizzle
+6. File storage through AWS S3
+7. Proper error handling at each layer
+8. Type safety throughout
+9. Proper validation with Zod
+10. Proper caching strategies
diff --git a/.cursor/rules/date-fns-best-practices.mdc b/.cursor/rules/date-fns-best-practices.mdc
index 7aa470c..0e86174 100644
--- a/.cursor/rules/date-fns-best-practices.mdc
+++ b/.cursor/rules/date-fns-best-practices.mdc
@@ -1,10 +1,10 @@
 ---
 description: Best practices for date and time manipulation with date-fns
-globs: **/*.{ts,tsx,js,jsx}
+globs: *.ts,*.tsx
 alwaysApply: false
 ---
 
 - Use the `format` function for consistent date formatting across your application.
 - Implement proper timezone handling using the `utcToZonedTime` function.
 - Utilize the `intervalToDuration` function for calculating time differences.
-- Leverage the `isWithinInterval` function for date range checks.
\ No newline at end of file
+- Leverage the `isWithinInterval` function for date range checks.
diff --git a/.cursor/rules/development-workflow.mdc b/.cursor/rules/development-workflow.mdc
new file mode 100644
index 0000000..ddeca83
--- /dev/null
+++ b/.cursor/rules/development-workflow.mdc
@@ -0,0 +1,39 @@
+---
+description:
+globs: *.tsx,*.ts
+alwaysApply: false
+---
+# Development Workflow Guide
+
+## Available Scripts
+- `pnpm dev`: Start development server with content collections
+- `pnpm build`: Build the application and content collections
+- `pnpm start`: Start production server
+- `pnpm lint`: Run Biome linter
+- `pnpm format`: Format code with Biome
+- `pnpm db:generate`: Generate new migration files based on schema changes
+- `pnpm db:migrate`: Apply pending migrations to the database
+- `pnpm db:push`: Sync schema changes directly to the database (development only)
+- `pnpm db:studio`: Open Drizzle Studio for database inspection and management
+- `pnpm email`: Start email template development server
+
+## Development Process
+1. Use TypeScript for all new code
+2. Follow Biome formatting rules
+3. Write server actions in `src/actions/`
+4. Use Zustand for client-side state
+5. Implement database changes through Drizzle migrations
+6. Use Radix UI components for consistent UI
+7. Follow the established directory structure
+8. Write tests for new features
+9. Update content collections when adding new content
+10. Use environment variables from `env.example`
+
+## Code Style
+- Use functional components with hooks
+- Implement proper error handling
+- Follow TypeScript best practices
+- Use proper type definitions
+- Document complex logic
+- Keep components small and focused
+- Use proper naming conventions
diff --git a/.cursor/rules/drizzle-orm-best-practices.mdc b/.cursor/rules/drizzle-orm-best-practices.mdc
index 37f28b9..0e248af 100644
--- a/.cursor/rules/drizzle-orm-best-practices.mdc
+++ b/.cursor/rules/drizzle-orm-best-practices.mdc
@@ -1,6 +1,7 @@
 ---
 description: Best practices for using Drizzle ORM with database
-globs: **/*.{ts}
+globs: *.tsx,*.ts
+alwaysApply: false
 ---
 
 - Use Drizzle's type-safe query builder for better code completion and safety.
diff --git a/.cursor/rules/nextjs-best-practices.mdc b/.cursor/rules/nextjs-best-practices.mdc
index c9dec38..770b446 100644
--- a/.cursor/rules/nextjs-best-practices.mdc
+++ b/.cursor/rules/nextjs-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for Next.js applications and routing
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/project-structure.mdc b/.cursor/rules/project-structure.mdc
new file mode 100644
index 0000000..2a12cf2
--- /dev/null
+++ b/.cursor/rules/project-structure.mdc
@@ -0,0 +1,36 @@
+---
+description:
+globs: **/*.{ts,tsx}
+alwaysApply: false
+---
+# Project Structure Guide
+
+## Core Directories
+- `src/app/`: Next.js app router pages and layouts
+- `src/components/`: Reusable React components
+- `src/lib/`: Utility functions and shared code
+- `src/db/`: Database schema and migrations using Drizzle ORM
+- `src/stores/`: Zustand state management
+- `src/actions/`: Server actions and API routes
+- `src/hooks/`: Custom React hooks
+- `src/types/`: TypeScript type definitions
+- `src/i18n/`: Internationalization setup
+- `src/mail/`: Email templates and mail functionality
+- `src/payment/`: Payment integration
+- `src/analytics/`: Analytics and tracking
+- `src/storage/`: File storage integration
+
+## Configuration Files
+- `next.config.ts`: Next.js configuration
+- `drizzle.config.ts`: Database configuration
+- `biome.json`: Code formatting and linting rules
+- `tsconfig.json`: TypeScript configuration
+- `components.json`: UI components configuration
+
+## Content Management
+- `content/`: MDX content files
+- `content-collections.ts`: Content collection configuration
+
+## Environment
+- `env.example`: Environment variables template
+- `global.d.ts`: Global TypeScript declarations
diff --git a/.cursor/rules/radix-ui-best-practices.mdc b/.cursor/rules/radix-ui-best-practices.mdc
index cd137fd..837dfa7 100644
--- a/.cursor/rules/radix-ui-best-practices.mdc
+++ b/.cursor/rules/radix-ui-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for using Radix UI components
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/react-best-practices.mdc b/.cursor/rules/react-best-practices.mdc
index 25df1c2..59a8481 100644
--- a/.cursor/rules/react-best-practices.mdc
+++ b/.cursor/rules/react-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for React component development
-globs: **/*.{ts,tsx,js,jsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/react-hook-form-best-practices.mdc b/.cursor/rules/react-hook-form-best-practices.mdc
index fc7e766..15c6df6 100644
--- a/.cursor/rules/react-hook-form-best-practices.mdc
+++ b/.cursor/rules/react-hook-form-best-practices.mdc
@@ -1,10 +1,10 @@
 ---
 description: Best practices for form handling with React Hook Form
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
 - Use the `useForm` hook for efficient form state management.
 - Implement validation using Zod with `@hookform/resolvers` for type-safe form validation.
 - Utilize the `Controller` component for integrating with custom inputs.
-- Leverage the `useFormContext` hook for sharing form state across components.
\ No newline at end of file
+- Leverage the `useFormContext` hook for sharing form state across components.
diff --git a/.cursor/rules/stripe-best-practices.mdc b/.cursor/rules/stripe-best-practices.mdc
index 672b333..464b1ec 100644
--- a/.cursor/rules/stripe-best-practices.mdc
+++ b/.cursor/rules/stripe-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for integrating Stripe payments
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/tailwindcss-best-practices.mdc b/.cursor/rules/tailwindcss-best-practices.mdc
index d7cabde..d78a39f 100644
--- a/.cursor/rules/tailwindcss-best-practices.mdc
+++ b/.cursor/rules/tailwindcss-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: Best practices for styling with Tailwind CSS
-globs: **/*.{ts,tsx,css}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
diff --git a/.cursor/rules/typescript-best-practices.mdc b/.cursor/rules/typescript-best-practices.mdc
index f6ba2af..912b38d 100644
--- a/.cursor/rules/typescript-best-practices.mdc
+++ b/.cursor/rules/typescript-best-practices.mdc
@@ -1,6 +1,6 @@
 ---
 description: TypeScript coding standards and type safety guidelines
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
@@ -11,4 +11,4 @@ alwaysApply: false
 - Use strict null checks to prevent null and undefined errors
 - Implement proper type inference using generics for reusable components.
 - Utilize type guards and assertions for runtime type checking.
-- Use `pnpm` as default package manager if run Command in Terminal.
\ No newline at end of file
+- Use `pnpm` as default package manager if run Command in Terminal.
diff --git a/.cursor/rules/ui-components.mdc b/.cursor/rules/ui-components.mdc
new file mode 100644
index 0000000..448cb9a
--- /dev/null
+++ b/.cursor/rules/ui-components.mdc
@@ -0,0 +1,54 @@
+---
+description:
+globs: **/*.{ts,tsx}
+alwaysApply: false
+---
+# UI and Components Guide
+
+## Component Structure
+- Components in `src/components/`
+- Follow atomic design principles
+- Use Radix UI primitives
+- Implement proper accessibility
+- Use Tailwind CSS for styling
+- Follow consistent naming
+- Keep components focused
+- Implement proper error states
+- Handle loading states
+- Use proper TypeScript types
+
+## UI Libraries
+- Radix UI for primitives
+- Tailwind CSS for styling
+- Framer Motion for animations
+- React Hook Form for forms
+- Zod for validation
+- Lucide React for icons
+- Tabler Icons for additional icons
+- Sonner for toasts
+- Vaul for drawers
+- Embla Carousel for carousels
+
+## Styling Guidelines
+- Use Tailwind CSS classes
+- Follow design system tokens
+- Implement dark mode support
+- Use proper spacing scale
+- Follow color palette
+- Implement responsive design
+- Use proper typography
+- Handle hover/focus states
+- Implement proper transitions
+- Use proper z-index scale
+
+## Accessibility
+- Use semantic HTML
+- Implement proper ARIA labels
+- Handle keyboard navigation
+- Support screen readers
+- Use proper color contrast
+- Implement focus management
+- Handle dynamic content
+- Support reduced motion
+- Test with assistive tools
+- Follow WCAG guidelines
diff --git a/.cursor/rules/zod-best-practices.mdc b/.cursor/rules/zod-best-practices.mdc
index b8c9699..b0872fc 100644
--- a/.cursor/rules/zod-best-practices.mdc
+++ b/.cursor/rules/zod-best-practices.mdc
@@ -1,6 +1,7 @@
 ---
 description: Best practices for schema validation with Zod
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
+alwaysApply: false
 ---
 
 - Define clear and reusable schemas for data validation
diff --git a/.cursor/rules/zustand-best-practices.mdc b/.cursor/rules/zustand-best-practices.mdc
index 2016b41..ce5e882 100644
--- a/.cursor/rules/zustand-best-practices.mdc
+++ b/.cursor/rules/zustand-best-practices.mdc
@@ -1,10 +1,10 @@
 ---
 description: Best practices for state management with Zustand
-globs: **/*.{ts,tsx}
+globs: *.tsx,*.ts
 alwaysApply: false
 ---
 
 - Use the `create` function to define your store for simplicity and performance.
 - Implement middleware like `persist` for persisting state across sessions.
 - Utilize the `useStore` hook for accessing store state in components.
-- Leverage the `immer` middleware for easier state updates with mutable syntax.
\ No newline at end of file
+- Leverage the `immer` middleware for easier state updates with mutable syntax.