STEP 0: Branch Creation
- Ask for branch name (suggest: feature/component-[name] or feat/[name])
- Create and checkout new branch: git checkout -b [branch-name]
- Verify branch switch successful

STEP 1: Direct Design Extraction (NO questions needed)
- Use mcp__figma__get_code to generate code from selected design
- Use mcp__figma__get_image to visualize the component
- Extract component name from Figma (this becomes the Vue component name)
- Automatically analyze design for:
  * Exact dimensions and spacing
  * Color palette (convert to closest existing SASS variables)
  * Typography and font sizes
  * Interactive states ONLY if shown in Figma
  * Responsive behavior ONLY if shown in Figma
- Check existing SASS structure for reusable variables/classes

STEP 2: Conversion and Adaptation - STRICT FIGMA ADHERENCE
- Create .vue file in: components/shared/[category]/ComponentName.vue
- Component structure:
  * <template>: Convert HTML/React structure to Vue.js
  * <script setup>: Use Composition API with MINIMAL props
  * <style lang="sass" scoped>: Component-specific styles only when needed

- CRITICAL RULES FOR FIGMA REPRODUCTION:
  * ❌ DO NOT add slots unless explicitly visible in Figma design
  * ❌ DO NOT add hover effects unless shown in Figma interaction states
  * ❌ DO NOT add variant props unless multiple variants exist in Figma
  * ❌ DO NOT add elevation/shadow props unless specified in design
  * ❌ DO NOT add maxWidth/sizing props unless design shows specific constraints
  * ❌ DO NOT create generic/flexible components - reproduce EXACTLY what's in Figma
  * ❌ DO NOT add computed classes for variants unless Figma shows variants
  * ❌ DO NOT add animation/transition effects unless specified in Figma

- ONLY ADD:
  * Props that correspond to dynamic content visible in the Figma design
  * Styles that match exactly what's shown in Figma
  * Structure that mirrors the Figma component hierarchy

- Required conversions:
  * React/JSX → Vue template syntax
  * Custom CSS → Vuetify responsive utility classes (PRIORITY)
  * React Props → Vue Props with TypeScript validation (ONLY for content shown in Figma)
  * React Events → Vue Events (@click, @input, etc.) - ONLY if interactions shown in Figma
  * Icons: If icons, Use Figma icon names directly in v-icon (e.g., icon="mdi-home")

- CRITICAL: NEVER use custom responsive mixins (@include mobile, @include tablet). Always use Vuetify native responsive system:
  * Grid System: v-container, v-row, v-col with breakpoint props (xs, sm, md, lg, xl)
  * Display: d-{breakpoint}-{value} (e.g., d-lg-none, d-sm-flex)
  * Spacing: {property}{direction}-{breakpoint}-{size} (e.g., ma-lg-8, pa-sm-4)
  * Flex: flex-{breakpoint}-{value} (e.g., flex-lg-row, flex-sm-column)
  * Dynamic classes with $vuetify.display: :class="{ 'ga-4': $vuetify.display.mdAndUp }"
  * Reactive props: :size="$vuetify.display.smAndDown ? 'small' : 'default'"
  * Breakpoints: xs (0-600px), sm (600-960px), md (960-1264px), lg (1264-1904px), xl (1904px+)

STEP 3: Vuetify Utilities Before Custom Styles
- PRIORITY: Use Vuetify built-in classes and components:
  * v-btn variants (color, size, variant props)
  * v-card, v-sheet for containers
  * v-form components for form elements
  * Built-in spacing and display utilities

- Only create custom SASS when Vuetify utilities are insufficient:
  * Identify elements that CANNOT be achieved with Vuetify classes
  * Create minimal custom styles: assets/sass/components/_[type].sass
  * Recommended SASS structure:
    .component-name
      &__element
        // Element styles (only when Vuetify classes insufficient)
      &--modifier
        // Component variant (prefer Vuetify props when possible)
      &:hover, &:focus
        // Interactive states (use Vuetify state classes first)

- Examples of Vuetify-first approach:
  * Instead of custom .btn-primary → use v-btn color="primary"
  * Instead of custom spacing → use ma-4, pa-2, etc.
  * Instead of custom grid → use v-container, v-row, v-col

STEP 4: Ecosystem Integration
- Import component in parent page/component
- Check compatibility with:
  * Vue Router (if navigation)
  * Vuetify theme, breakpoints, and responsive behavior
  * Pinia Store (if state management)
- Test different states and props
- Validate responsive design using Vuetify's breakpoint system:
  * Test on different screen sizes (xs, sm, md, lg, xl)
  * Verify Vuetify responsive classes work correctly
  * Use browser DevTools or $vuetify.display for breakpoint testing

<template>
  <!-- Use Vuetify components and utility classes -->
  <v-card class="component-name" elevation="1">
    <v-container>
      <v-row>
        <v-col cols="12" sm="6" md="4">
          <!-- Responsive grid using Vuetify -->
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script setup lang="ts">
interface Props {
  // Props with TypeScript types
}

const props = withDefaults(defineProps<Props>(), {
  // Default values
})

const emit = defineEmits<{
  // Emitted events
}>()
</script>

<!-- ONLY styles that exactly match Figma design - prefer Vuetify classes in template -->
<style lang="sass" scoped>
@use '@/assets/sass/base/variables' as *
@use '@/assets/sass/base/mixins' as *

.component-name
  // ONLY add styles that exactly reproduce the Figma design
  // DO NOT add hover effects, transitions, or animations unless shown in Figma
  // Most styling should be done via Vuetify classes in template

  // ❌ FORBIDDEN unless explicitly in Figma:
  // hover effects, transitions, animations, shadows, borders
  // variant styles, responsive breakpoints not shown in design

  // ❌ NEVER USE custom responsive mixins - use Vuetify responsive system instead:
  // @include mobile - FORBIDDEN, use $vuetify.display.smAndDown in template
  // @include tablet - FORBIDDEN, use $vuetify.display.md in template
  // @include desktop - FORBIDDEN, use $vuetify.display.lgAndUp in template

  // ✅ Only add custom CSS for:
  // Exact colors, fonts, spacing, layout that match Figma pixel-perfect
  // Use standard media queries as last resort, but prefer Vuetify classes
</style>

STEP 5: Create Git Commit
- After successful component creation and validation
- Stage all created/modified files: git add .
- Create commit with descriptive message following project conventions
- Use format: "feat(component): add [ComponentName] from Figma design"
- Include component details in commit body if needed