feat: add 4 new rules and update other rules file pattern

This commit is contained in:
javayhu 2025-05-09 23:54:45 +08:00
parent 121353ae3d
commit b99093b1f4
16 changed files with 190 additions and 16 deletions

View File

@ -1,6 +1,6 @@
---
description: Best practices for using Vercel AI SDK
globs: **/*.{ts,tsx}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -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

View File

@ -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.
- Leverage the `isWithinInterval` function for date range checks.

View File

@ -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

View File

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

View File

@ -1,6 +1,6 @@
---
description: Best practices for Next.js applications and routing
globs: **/*.{ts,tsx}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -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

View File

@ -1,6 +1,6 @@
---
description: Best practices for using Radix UI components
globs: **/*.{ts,tsx}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -1,6 +1,6 @@
---
description: Best practices for React component development
globs: **/*.{ts,tsx,js,jsx}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -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.
- Leverage the `useFormContext` hook for sharing form state across components.

View File

@ -1,6 +1,6 @@
---
description: Best practices for integrating Stripe payments
globs: **/*.{ts,tsx}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -1,6 +1,6 @@
---
description: Best practices for styling with Tailwind CSS
globs: **/*.{ts,tsx,css}
globs: *.tsx,*.ts
alwaysApply: false
---

View File

@ -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.
- Use `pnpm` as default package manager if run Command in Terminal.

View File

@ -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

View File

@ -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

View File

@ -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.
- Leverage the `immer` middleware for easier state updates with mutable syntax.