Add nuxt-skills and update auto quotes to use new policy API structure

- Add nuxt-skills (vue, nuxt, nuxt-ui) to .claude/skills/
- Create useCustomerSelection() composable for managing insured/buyer selection
- Create usePolicyApi() composable for policy API operations
- Update auto quote components to use insured/buyer instead of client
- Update vehicle fields: remove valorVehiculo, add market_value, requested_value, rc_limits
- Make chassis_number and engine_number optional
- Update auto quote types and composables to match new API structure
- Update auto quote page to submit to policy API with new structure

app/components/quotes/auto/CustomerVehicleStep.vue

@@ -9,6 +9,7 @@ import {
   AUTO_YEAR_OPTIONS
 } from '~/data/auto-quote-intake'
 import type { AutoQuoteDraft, AutoQuoteSegment } from '~/types/auto-quote-intake'
+import { useCustomerSelection } from '~/composables/useCustomerSelection'
 
 const props = defineProps<{
   draft: AutoQuoteDraft
@@ -24,36 +25,190 @@ const showOrganization = computed(
 
 const inputPh =
   'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
+
+// Customer selection
+const customerSearch = ref('')
+const debouncedCustomerSearch = refDebounced(customerSearch, 300)
+const customerPage = ref(1)
+
+const { data: customersData, pending: customersPending } = useCustomer('/customers', {
+  query: computed(() => ({
+    'page[number]': customerPage.value,
+    'page[size]': 12,
+    ...(debouncedCustomerSearch.value && {
+      'filters[0][field]': 'search',
+      'filters[0][op]': '==',
+      'filters[0][value]': debouncedCustomerSearch.value
+    })
+  }))
+})
+
+watch(debouncedCustomerSearch, () => { customerPage.value = 1 })
+
+const customerItems = computed(() => customersData.value?.data ?? [])
+
+function selectCustomer(customer: any) {
+  selectedCustomer.value = customer
+}
+
+function selectBuyer(customer: any) {
+  selectedBuyer.value = customer
+}
+
+const customerDisplayName = (c: any) =>
+  c.customer_type === 'corporate'
+    ? (c.commercial_name || c.legal_name)
+    : `${c.first_name} ${c.last_name}`
+
+const customerSubtitle = (c: any) =>
+  c.customer_type === 'corporate' ? c.ruc : c.email
+
+// Use customer selection composable
+const {
+  selectedCustomer,
+  selectedBuyer,
+  useSameForBuyer,
+  insured,
+  buyer,
+  isInsuredValid,
+  isBuyerValid,
+  validationErrors
+} = useCustomerSelection()
 </script>
 
 <template>
   <div class="space-y-8">
+    <!-- Insured Section -->
     <div>
-      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Client</h2>
-      <p class="mt-1 text-sm text-[var(--text-muted)]">Contact on file for this quote — we’ll use it for status and carrier emails.</p>
-      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
-        <UFormField label="Legal name" required>
-          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on government ID" />
-        </UFormField>
-        <UFormField label="Email" required>
-          <UInput
-            v-model="draft.client.email"
-            type="email"
-            autocomplete="email"
-            :class="inputPh"
-            placeholder="name@company.com"
-          />
-        </UFormField>
-        <UFormField label="Phone">
-          <UInput v-model="draft.client.phone" type="tel" :class="inputPh" placeholder="+593 …" />
-        </UFormField>
-        <UFormField label="Government ID">
-          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="Cédula, passport, or RUC" />
-        </UFormField>
-        <UFormField v-if="showOrganization" label="Organization" class="md:col-span-2">
-          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Company or fleet name" />
-        </UFormField>
+      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Insured</h2>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Person or entity being insured — we'll use this for carrier notifications.</p>
+      
+      <div v-if="!selectedCustomer" class="mt-5">
+        <UInput
+          v-model="customerSearch"
+          icon="i-heroicons-magnifying-glass"
+          placeholder="Search by name, email, RUC..."
+          class="w-full max-w-sm mb-4"
+        />
+        
+        <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
+        </div>
+        
+        <div v-else class="space-y-3 max-h-72 overflow-y-auto">
+          <div
+            v-for="c in customerItems"
+            :key="c.id"
+            class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
+            :class="selectedCustomer?.id === c.id
+              ? 'border-primary-500 bg-primary-50'
+              : 'border-gray-200 hover:border-gray-300 bg-white'"
+            @click="selectCustomer(c)"
+          >
+            <UAvatar :alt="customerDisplayName(c)" size="sm" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-1.5">
+                <p class="font-medium text-sm text-slate-800 truncate">{{ customerDisplayName(c) }}</p>
+                <UBadge
+                  :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
+                  variant="soft" size="xs" class="flex-shrink-0"
+                >
+                  {{ c.customer_type === 'corporate' ? 'Corp' : 'Ind' }}
+                </UBadge>
+              </div>
+              <p class="text-xs text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
+            </div>
+            <UIcon
+              v-if="selectedCustomer?.id === c.id"
+              name="i-heroicons-check-circle"
+              class="w-5 h-5 text-primary-500 flex-shrink-0"
+            />
+          </div>
+          
+          <div v-if="customerItems.length === 0" class="text-center py-6 text-gray-400 text-sm">
+            No customers found.
+          </div>
+        </div>
       </div>
+      
+      <div v-else class="mt-5 p-4 bg-primary-50 border border-primary-200 rounded-lg">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <UAvatar :alt="customerDisplayName(selectedCustomer)" size="sm" />
+            <div>
+              <p class="font-medium text-primary-800">{{ customerDisplayName(selectedCustomer) }}</p>
+              <p class="text-xs text-primary-600">{{ customerSubtitle(selectedCustomer) }}</p>
+            </div>
+          </div>
+          <UButton size="sm" color="neutral" variant="ghost" @click="selectedCustomer = null">
+            Change
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Buyer Section -->
+    <div class="border-t border-[var(--sidebar-border)] pt-8">
+      <div class="flex items-center gap-3 mb-4">
+        <h2 class="text-lg font-semibold text-[var(--text-primary)]">Buyer</h2>
+        <div class="flex items-center gap-2">
+          <UToggle v-model="useSameForBuyer" />
+          <span class="text-sm text-[var(--text-muted)]">Same as insured</span>
+        </div>
+      </div>
+      
+      <p v-if="useSameForBuyer" class="mt-1 text-sm text-[var(--text-muted)]">
+        Using same person as insured
+      </p>
+      
+      <div v-else class="mt-5">
+        <UInput
+          v-model="customerSearch"
+          icon="i-heroicons-magnifying-glass"
+          placeholder="Search by name, email, RUC..."
+          class="w-full max-w-sm mb-4"
+        />
+        
+        <div v-if="customersPending" class="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div v-for="n in 3" :key="n" class="h-16 animate-pulse bg-gray-100 rounded-lg" />
+        </div>
+        
+        <div v-else class="space-y-3 max-h-72 overflow-y-auto">
+          <div
+            v-for="c in customerItems"
+            :key="c.id"
+            class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
+            :class="selectedBuyer?.id === c.id
+              ? 'border-primary-500 bg-primary-50'
+              : 'border-gray-200 hover:border-gray-300 bg-white'"
+            @click="selectBuyer(c)"
+          >
+            <UAvatar :alt="customerDisplayName(c)" size="sm" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-1.5">
+                <p class="font-medium text-sm text-slate-800 truncate">{{ customerDisplayName(c) }}</p>
+                <UBadge
+                  :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
+                  variant="soft" size="xs" class="flex-shrink-0"
+                >
+                  {{ c.customer_type === 'corporate' ? 'Corp' : 'Ind' }}
+                </UBadge>
+              </div>
+              <p class="text-xs text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
+            </div>
+            <UIcon
+              v-if="selectedBuyer?.id === c.id"
+              name="i-heroicons-check-circle"
+              class="w-5 h-5 text-primary-500 flex-shrink-0"
+            />
+          </div>
+          
+          <div v-if="customerItems.length === 0" class="text-center py-6 text-gray-400 text-sm">
+            No customers found.
+          </div>
+        </div>
+      </div>
+    </div>
     </div>
 
     <div class="border-t border-[var(--sidebar-border)] pt-8">
@@ -145,8 +300,20 @@ const inputPh =
         <UFormField label="Capacity" description="Passengers">
           <UInput v-model="draft.vehicle.capacidadPasajeros" :class="inputPh" inputmode="numeric" placeholder="—" />
         </UFormField>
-        <UFormField label="Declared value" description="USD">
-          <UInput v-model="draft.vehicle.valorVehiculo" :class="inputPh" inputmode="decimal" placeholder="—" />
+        <UFormField label="RC limits">
+          <UInput v-model="draft.vehicle.rc_limits" :class="inputPh" placeholder="e.g., 100,000" />
+        </UFormField>
+        <UFormField label="Market value" description="USD">
+          <UInput v-model="draft.vehicle.market_value" :class="inputPh" inputmode="decimal" placeholder="—" />
+        </UFormField>
+        <UFormField label="Requested value" description="USD">
+          <UInput v-model="draft.vehicle.requested_value" :class="inputPh" inputmode="decimal" placeholder="—" />
+        </UFormField>
+        <UFormField label="Chassis number" description="Optional">
+          <UInput v-model="draft.vehicle.chassis_number" :class="inputPh" placeholder="—" />
+        </UFormField>
+        <UFormField label="Engine number" description="Optional">
+          <UInput v-model="draft.vehicle.engine_number" :class="inputPh" placeholder="—" />
         </UFormField>
       </div>
     </div>