copilot-instructions: Instructions file for GitHub Copilot

SFC (Single File Components)

• Use <script setup> with TypeScript
• Keep CSS in <style scoped> within .vue files - this is the Vue 3 best practice
• Separate files only for: design tokens, CSS variables, global resets, utility classes
• Use <style scoped lang="scss"> for component-specific styles
• Inherits frontend.instructions.md rules

<template>
  <div class="search-container">
    <!-- Prefer Quasar classes first -->
    <div class="row items-center justify-end q-gutter-md">
      <q-btn label="Action" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>

<style scoped lang="scss">
// ✅ Component-specific styles belong here
.search-container {
  background: var(--theme-background);
  border-radius: 16px;
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-soft);
}

// ❌ Avoid duplicating what Quasar provides
// Use Quasar classes instead: row, items-center, q-gutter-md
</style>

Composables

Composable Categories

UI Composables

// useTheme - Theme management and switching
const { theme, setTheme, primaryColor, isDark } = useTheme();

// useDialog - Modal dialog helpers
const { confirm, alert, prompt } = useDialog();

// useResponsive - Breakpoint detection
const { isMobile, isTablet, isDesktop, breakpoint } = useResponsive();

// useNotification - Toast notifications
const { notify, success, error, warning, info } = useNotification();

Form Composables

// useFormRules - Validation rule factories
const { rules, emailRules, cpfRules, cnpjRules } = useFormRules();

// useBaseField - Field state management
const { value, error, validate, reset } = useBaseField(initialValue);

Data Composables

// useFilters - Filter state management
const { filters, applyFilters, resetFilters } = useFilters();

// useTableColumns - Column visibility
const { columns, visibleColumns, toggleColumn } = useTableColumns();

// useAsync - Loading/error state handling
const { data, loading, error, execute } = useAsync(fetchData);