DaisyUI .cursorrules Cursor AI Prompt File Examples

NEW

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

You are an expert in Vue.js 3, TypeScript, Vite, and Tailwind CSS.

Code Style and Structure:

Write concise, technical Vue 3 and TypeScript code with accurate examples
Use composition API and script setup syntax for Vue components
Prefer functional and declarative programming patterns
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Structure files: single-file components (.vue), composables, helpers, types

Naming Conventions:

Use PascalCase for component names
Use camelCase for variables, functions, and methods
Use kebab-case for custom events and props

TypeScript Usage:

Use TypeScript for all code; prefer interfaces over types
Utilize Vue 3's improved TypeScript support
Define prop types and return types for functions

Vue 3 and Composition API:

Use <script setup lang="ts"> for component logic
Utilize Vue 3 Reactivity API (ref, reactive, computed, watch)
Implement proper lifecycle hooks (onMounted, onUnmounted, etc.)

Vite and Build Configuration:

Optimize Vite configuration for development and production
Use Vite plugins effectively (e.g., @vitejs/plugin-vue)

UI and Styling:

Implement responsive design with Tailwind CSS
Use DaisyUI for pre-built Tailwind components
Follow utility-first approach for custom styling

State Management:

Use Pinia for global state management
Implement composables for reusable logic

Routing:

Utilize Vue Router 4 for application routing
Implement proper navigation guards and route meta fields

Testing:

Write unit tests using Vitest
Follow Vue Test Utils best practices for component testing

Performance Optimization:

Implement lazy loading for routes and components
Use Vue 3's improved reactivity system for better performance
Optimize assets and implement proper caching strategies

Error Handling and Validation:

Implement proper error handling in async operations
Use Vue 3's improved error handling capabilities
Implement form validation using appropriate libraries or custom solutions

Follow Vue 3, Vite, and Tailwind CSS documentation for best practices and up-to-date information

stack:

Vue.js 3 TypeScript Vite Tailwind .cursorrules prompt file

CodeWithCursor

NEW

TypeScript Vue.js .cursorrules prompt file

You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, DaisyUI, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.Code Style and Structure- Write concise, maintainable, and technically accurate TypeScript code with relevant examples.- Use functional and declarative programming patterns; avoid classes.- Favor iteration and modularization to adhere to DRY principles and avoid code duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).- Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.Naming Conventions- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for functions.TypeScript Usage- Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.- Avoid enums; use maps instead for better type safety and flexibility.- Use functional components with TypeScript interfaces.Syntax and Formatting- Use the "function" keyword for pure functions to benefit from hoisting and clarity.- Always use the Vue Composition API script setup style.UI and Styling- Use DaisyUI, and Tailwind for components and styling.- Implement responsive design with Tailwind CSS; use a mobile-first approach.Performance Optimization- Leverage VueUse functions where applicable to enhance reactivity and performance.- Wrap asynchronous components in Suspense with a fallback UI.- Use dynamic loading for non-critical components.- Optimize images: use WebP format, include size data, implement lazy loading.- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.Key Conventions- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.- Use the VueUse library for performance-enhancing functions.- Implement lazy loading for non-critical components.- Optimize images: use WebP format, include size data, implement lazy loading.- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.Code Review- Review code for performance, readability, and adherence to best practices.- Ensure all components and functions are optimized for performance and maintainability.- Check for unnecessary re-renders and optimize them using VueUse functions.- Use the VueUse library for performance-enhancing functions.- Implement lazy loading for non-critical components.- Optimize images: use WebP format, include size data, implement lazy loading.- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.Best Practices- Use the VueUse library for performance-enhancing functions.- Implement lazy loading for non-critical components.- Optimize images: use WebP format, include size data, implement lazy loading.- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

stack:

TypeScript Vue.js .cursorrules prompt file

sphiNur

NEW

TypeScript Vite Tailwind .cursorrules prompt file

  You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, DaisyUI, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.

  Code Style and Structure
  - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
  - Use functional and declarative programming patterns; avoid classes.
  - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for functions.

  TypeScript Usage
  - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
  - Avoid enums; use maps instead for better type safety and flexibility.
  - Use functional components with TypeScript interfaces.

  Syntax and Formatting
  - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
  - Always use the Vue Composition API script setup style.

  UI and Styling
  - Use DaisyUI, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.

  Performance Optimization
  - Leverage VueUse functions where applicable to enhance reactivity and performance.
  - Wrap asynchronous components in Suspense with a fallback UI.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

  Key Conventions
  - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.
  - Use the VueUse library for performance-enhancing functions.
  - Implement lazy loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

  Code Review
  - Review code for performance, readability, and adherence to best practices.
  - Ensure all components and functions are optimized for performance and maintainability.
  - Check for unnecessary re-renders and optimize them using VueUse functions.
  - Use the VueUse library for performance-enhancing functions.
  - Implement lazy loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

  Best Practices
  - Use the VueUse library for performance-enhancing functions.
  - Implement lazy loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

stack:

TypeScript Vite Tailwind .cursorrules prompt file

sphiNx

NEW

Tailwind CSS Next.js Guide .cursorrules prompt file

Prompt Generation Rules:
- Analyze the component requirements thoroughly
- Include specific DaisyUI component suggestions
- Specify desired Tailwind CSS classes for styling
- Mention any required TypeScript types or interfaces
- Include instructions for responsive design
- Suggest appropriate Next.js features if applicable
- Specify any necessary state management or hooks
- Include accessibility considerations
- Mention any required icons or assets
- Suggest error handling and loading states
- Include instructions for animations or transitions if needed
- Specify any required API integrations or data fetching
- Mention performance optimization techniques if applicable
- Include instructions for testing the component
- Suggest documentation requirements for the component

General Component Creation Guidelines:
- Prioritize reusability and modularity
- Ensure consistent naming conventions
- Follow React best practices and patterns
- Implement proper prop validation
- Consider internationalization requirements
- Optimize for SEO when applicable
- Ensure compatibility with different browsers and devices

General Rules:
- Enable strict TypeScript (strict: true in tsconfig.json)
- Avoid 'any', prefer 'unknown' with runtime checks
- Explicitly type function inputs and outputs
- Use advanced TypeScript features (type guards, mapped types, conditional types)
- Organize project structure: components, pages, hooks, utils, styles, contracts, services
- Separate concerns: presentational components, business logic, side effects
- Use Biome for code formatting and linting
- Configure Biome as a pre-commit hook

Next.js Rules:
- Use dynamic routes with bracket notation ([id].tsx)
- Validate and sanitize route parameters
- Prefer flat, descriptive routes
- Use getServerSideProps for dynamic data, getStaticProps/getStaticPaths for static
- Implement Incremental Static Regeneration (ISR) where appropriate
- Use next/image for optimized images
- Configure image layout, priority, sizes, and srcSet attributes

TypeScript Rules:
- Enable all strict mode options in tsconfig.json
- Explicitly type all variables, parameters, and return values
- Use utility types, mapped types, and conditional types
- Prefer 'interface' for extendable object shapes
- Use 'type' for unions, intersections, and primitive compositions
- Document complex types with JSDoc
- Avoid ambiguous union types, use discriminated unions when necessary

TailwindCSS and DaisyUI Rules:
- Use TailwindCSS utility classes for styling
- Avoid custom CSS unless absolutely necessary
- Maintain consistent order of utility classes
- Use Tailwind's responsive variants for adaptive designs
- Leverage DaisyUI components for rapid development
- Customize DaisyUI components only when necessary
- Define and use design tokens in tailwind.config.js

Starknet React Rules:
- Centralize blockchain connection management
- Implement automatic reconnection and error handling
- Use React hooks for transaction status management
- Provide clear UI feedback for blockchain interactions
- Implement comprehensive error handling for blockchain operations

Cairo Rules:
- Design modular and maintainable contract structures
- Optimize for gas efficiency
- Minimize state changes and storage access
- Document all contracts and functions thoroughly
- Explain complex logic and implementation choices

Development Process:
- Conduct thorough code reviews via Pull Requests
- Include clear PR descriptions with context and screenshots
- Implement comprehensive automated testing (unit, integration, e2e)
- Prioritize meaningful tests over high coverage numbers
- Use Conventional Commits for commit messages (feat:, fix:, docs:, chore:)
- Make small, incremental commits for easier review and debugging

Biome Rules:
- Use Biome for code formatting and linting
- Configure Biome as a pre-commit hook
- Follow Biome's recommended rules
- Customize Biome configuration in biome.json as needed
- Ensure consistent code style across the project
- Run Biome checks before committing changes
- Address all Biome warnings and errors promptly
- Use Biome's organize imports feature to maintain clean import statements
- Leverage Biome's advanced linting capabilities for TypeScript
- Integrate Biome into the CI/CD pipeline for automated checks
- Keep Biome updated to the latest stable version
- Use Biome's ignore patterns to exclude specific files or directories when necessary

stack: