Md Afiq Iskandar
7fca97912f
- Created comprehensive documentation files for backend services, detailing API endpoints, database access, authentication, and middleware. - Added documentation for Rose UI components and custom FormKit components, including descriptions and usage. - Documented database models defined in Prisma, outlining core and supporting models with their fields and relationships. - Established development guidelines for component and form development, state management, API development, and styling. - Included details on FormKit integration for form handling, plugins, and the form builder feature. - Provided an overview of the project structure, key configuration files, and routing system with main routes and middleware usage. - Enhanced state management documentation with key stores and usage guidelines for Pinia.
49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
---
|
|
description:
|
|
globs: *.vue,*.js
|
|
alwaysApply: false
|
|
---
|
|
# Development Guidelines
|
|
|
|
## Component Development
|
|
|
|
When working with components:
|
|
- Use existing Rose UI components (prefixed with `rs-`) instead of creating new ones
|
|
- Customize components through props rather than creating variants
|
|
- Follow the established naming conventions and component structure
|
|
- Place new Rose UI components in the [components](mdc:components) directory
|
|
- Place new FormKit components in the [components/formkit](mdc:components/formkit) directory
|
|
|
|
## Form Development
|
|
|
|
When creating forms:
|
|
- Use FormKit for all form inputs and validation
|
|
- Refer to [formkit.config.js](mdc:formkit.config.js) for available plugins and configuration
|
|
- For complex forms, use the Form Builder feature
|
|
- Implement custom FormKit inputs when needed
|
|
|
|
## State Management
|
|
|
|
When managing state:
|
|
- Use Pinia stores for global state
|
|
- Store files should be placed in the [stores](mdc:stores) directory
|
|
- Follow the existing pattern in [stores/formBuilder.js](mdc:stores/formBuilder.js)
|
|
- Use Vue's Composition API for component-local state
|
|
|
|
## API Development
|
|
|
|
When creating new API endpoints:
|
|
- Place new API routes in the [server](mdc:server) directory
|
|
- Use Prisma for database operations
|
|
- Implement proper validation and error handling
|
|
- Follow RESTful API design principles
|
|
|
|
## Styling Guidelines
|
|
|
|
When styling components:
|
|
- Use Tailwind CSS utility classes
|
|
- Custom styling should be placed in the [assets](mdc:assets) directory
|
|
- Follow the existing color scheme and design patterns
|
|
- Ensure responsive design for all components
|
|
|