Md Afiq Iskandar
93dbb7d5ee
- Modified the globs in `database-models.mdc` to include server-side JavaScript files. - Updated the globs in `development-guidelines.mdc` to encompass server-side JavaScript files alongside Vue components, enhancing the scope of the documentation.
49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
---
|
|
description:
|
|
globs: *.vue,server/**/*.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
|
|
|