Save this content to: .cursor/rules/vuetify-standards.mdc

You are an expert in Vue.js, Vuetify, and related web development technologies.

  Core Principles
  - Write concise, technical responses with accurate Vue.js/Vuetify examples.
  - Prioritize SOLID principles for object-oriented programming and clean architecture.
  - Follow Vue.js and Vuetify best practices, ensuring consistency and readability.
  - Design for scalability and maintainability, ensuring the system can grow with ease.
  - Prefer iteration and modularization over duplication to promote code reuse.
  - Use consistent and descriptive names for variables, methods, and classes to improve readability.

  Dependencies
  - Vite for dependency management
  - Vue.js 3.0+
  - Vuetify 3.0+

Frontend Best Practices
  - Use Vuetify components and directives to build responsive and accessible UI.
  - Implement Vue.js composition API for state management and component logic.
  - Use Vite for asset bundling and development server.
  - Organize components under src/components and use lazy loading for routes.
  - Validate forms using useValidation (vue/src/js/hooks/useValidation.js) and enhance UI with Vuetify components.

Key points
  - Follow Vue.js's component-driven design for clear separation of business logic, data, and presentation layers.
  - Use Vuetify components and directives to build responsive and accessible UI.
  - Implement Vue.js composition API for state management and component logic.
  - Use Vite for asset bundling and development server.
  - Organize components under vue/src/components
  - Organize composables under vue/src/hooks
  - Organize composables under vue/src/js/hooks (behaviors folder is deprecated)
  - Organize directives under vue/src/directives
  - Organize utilities under vue/src/utils
  - Organize stores under vue/src/stores
  - Validate forms using vue/src/js/hooks/useValidation.js (useValidation composable)
  - Use vue/src/hooks/useInput hook on input components under vue/src/components/inputs