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
This commit is contained in:
94
.claude/skills/nuxt-ui/SKILL.md
Normal file
94
.claude/skills/nuxt-ui/SKILL.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
name: nuxt-ui
|
||||
description: Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
# Nuxt UI v4
|
||||
|
||||
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
|
||||
|
||||
**Current stable version:** v4.4.0 (January 2026)
|
||||
|
||||
## When to Use
|
||||
|
||||
- Installing/configuring @nuxt/ui
|
||||
- Using UI components (Button, Card, Table, Form, etc.)
|
||||
- Customizing theme (colors, variants, CSS variables)
|
||||
- Building forms with validation
|
||||
- Using overlays (Modal, Toast, CommandPalette)
|
||||
- Working with composables (useToast, useOverlay)
|
||||
|
||||
**For Vue component patterns:** use `vue` skill
|
||||
**For Nuxt routing/server:** use `nuxt` skill
|
||||
|
||||
## Available Guidance
|
||||
|
||||
| File | Topics |
|
||||
| ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
|
||||
| **[references/installation.md](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
|
||||
| **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
|
||||
| **[references/components.md](references/components.md)** | Component index by category (125+ components) |
|
||||
| **components/\*.md** | Per-component details (button.md, modal.md, etc.) |
|
||||
| **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField |
|
||||
| **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette |
|
||||
| **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy |
|
||||
|
||||
## Loading Files
|
||||
|
||||
**Consider loading these reference files based on your task:**
|
||||
|
||||
- [ ] [references/installation.md](references/installation.md) - if installing or configuring @nuxt/ui
|
||||
- [ ] [references/theming.md](references/theming.md) - if customizing theme, colors, or Tailwind Variants
|
||||
- [ ] [references/components.md](references/components.md) - if browsing component index or finding components by category
|
||||
- [ ] [references/forms.md](references/forms.md) - if building forms with validation (Zod/Valibot)
|
||||
- [ ] [references/overlays.md](references/overlays.md) - if using Toast, Modal, Slideover, Drawer, or CommandPalette
|
||||
- [ ] [references/composables.md](references/composables.md) - if using useToast, useOverlay, or other composables
|
||||
|
||||
**DO NOT load all files at once.** Load only what's relevant to your current task.
|
||||
|
||||
## Key Concepts
|
||||
|
||||
| Concept | Description |
|
||||
| ----------------- | ---------------------------------------------------------- |
|
||||
| UApp | Required wrapper component for Toast, Tooltip, overlays |
|
||||
| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants |
|
||||
| Semantic Colors | primary, secondary, success, error, warning, info, neutral |
|
||||
| Reka UI | Headless component primitives (accessibility built-in) |
|
||||
|
||||
> For headless component primitives (API details, accessibility patterns, asChild): read the **reka-ui** skill
|
||||
|
||||
## Quick Reference
|
||||
|
||||
```ts
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui'],
|
||||
css: ['~/assets/css/main.css']
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
/* assets/css/main.css */
|
||||
@import 'tailwindcss';
|
||||
@import '@nuxt/ui';
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- app.vue - UApp wrapper required -->
|
||||
<template>
|
||||
<UApp>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- [Nuxt UI Docs](https://ui.nuxt.com)
|
||||
- [Component Reference](https://ui.nuxt.com/components)
|
||||
- [Theme Customization](https://ui.nuxt.com/getting-started/theme)
|
||||
|
||||
---
|
||||
|
||||
_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_
|
||||
Reference in New Issue
Block a user