feat: add 4 new rules and update other rules file pattern
This commit is contained in:
parent
121353ae3d
commit
b99093b1f4
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for using Vercel AI SDK
|
||||
globs: **/*.{ts,tsx}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
43
.cursor/rules/database-state-management.mdc
Normal file
43
.cursor/rules/database-state-management.mdc
Normal 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
|
@ -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.
|
||||
|
39
.cursor/rules/development-workflow.mdc
Normal file
39
.cursor/rules/development-workflow.mdc
Normal 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
|
@ -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.
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for Next.js applications and routing
|
||||
globs: **/*.{ts,tsx}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
36
.cursor/rules/project-structure.mdc
Normal file
36
.cursor/rules/project-structure.mdc
Normal 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
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for using Radix UI components
|
||||
globs: **/*.{ts,tsx}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for React component development
|
||||
globs: **/*.{ts,tsx,js,jsx}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
@ -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.
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for integrating Stripe payments
|
||||
globs: **/*.{ts,tsx}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
description: Best practices for styling with Tailwind CSS
|
||||
globs: **/*.{ts,tsx,css}
|
||||
globs: *.tsx,*.ts
|
||||
alwaysApply: false
|
||||
---
|
||||
|
||||
|
@ -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.
|
||||
|
54
.cursor/rules/ui-components.mdc
Normal file
54
.cursor/rules/ui-components.mdc
Normal 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
|
@ -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
|
||||
|
@ -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.
|
||||
|
Loading…
Reference in New Issue
Block a user