copilot-instructions frontend.instructions.md

Architecture

• Hooks/composables for reactive logic
• Presentational components using props and slots
• Services for pure HTTP requests
• Feature-first Clean Architecture: modules//{domain,application,infrastructure,presentation}
• Shared resources: shared/{domain,application,infrastructure,presentation,utils,constants}
• CSS in SFC: Keep component styles in <style scoped> within .vue files (Vue 3 best practice)
• Prefer Quasar utilities: Use Quasar classes before writing custom CSS

const { rows } = useTablePaging(apiEndpoint);
<UserCard :user="u" v-slot:actions><button>Edit</button></UserCard>

Naming

• Prefix composables with use*
• Never use default exports
• Avoid side effects on import
• Component files in PascalCase: BaseButton.vue, SearchPage.vue
• Composables in camelCase: useAuth.ts, useFormRules.ts
• CSS classes in kebab-case: search-container, action-buttons

export function useAuth() { /* ... */ } // not export default
// Import modules without executing code automatically

Component Library Pattern

Base Component Naming

• Prefix shared components with Base*: BaseButton, BaseInput, BaseCard
• Use slots for flexible content injection
• Expose consistent prop interfaces across components
• Document props with JSDoc comments

Component Categories

components/
├── form/           # BaseInput, BaseSelect, BaseTextarea, BaseDatePicker, BaseTimePicker
├── layout/         # BaseHeader, BaseFooter, BaseSection, BaseHero, BaseSidebar
└── ui/             # BaseButton, BaseCard, BaseChip, BaseLogo, MetricCard, InfoCard

Export Pattern (Single Entry Point)

// index.ts
export { default as BaseButton } from './components/ui/BaseButton.vue'
export { default as BaseInput } from './components/form/BaseInput.vue'
export * from './composables/ui/useTheme'
export * from './config/theme.config'

Theme System

Multi-Theme Architecture

• Define theme configuration interface with colors, fonts, gradients
• Use CSS custom properties for runtime theme switching
• Implement useTheme composable for reactive theme management
• Store theme preference in localStorage