minimize cookie and simplify roles

- Update life quote types to use insured/buyer instead of client
- Update life fields: add coverage_type, coverage_amount, coverage_years, smoker, medications, surgeries, weight, height
- Remove deprecated fields: dateOfBirth, age, gender, preexistingConditions, preexistingDetails, beneficiaryName, beneficiaryRelationship
- Update life quote SetupStep component to use customer selection
- Add Insured and Buyer sections with customer search and selection
- Add health questionnaire with smoker, medications, surgeries, weight, height fields
- Add coverage_type field (banking | protection)
- Update life quote page to use new composables and API structure
- Update validation to use insured/buyer validation
- Update submission to use policy API with new structure

.claude/skills/nuxt-ui/SKILL.md

@@ -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_

.claude/skills/nuxt-ui/components/accordion.md

@@ -0,0 +1,51 @@
+# Accordion
+
+A stacked set of collapsible panels.
+
+> Based on [Reka UI Accordion](https://reka-ui.com/docs/components/accordion)
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- `content?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }`{lang="ts-type"}
+
+## ::component-code
+
+ignore:
+
+- items
+  external:
+- items
+  externalTypes:
+- AccordionItem[]
+  hide:
+- class
+  props:
+  class: 'px-4'
+  items: - label: 'Icons'
+  icon: 'i-lucide-smile'
+  content: 'You have nothing to do, @nuxt/icon will handle it automatically.
+- `disabled`:
+- `slot`:
+
+## Usage
+
+```vue
+<UAccordion
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#body`
+- `#content`

.claude/skills/nuxt-ui/components/alert.md

@@ -0,0 +1,24 @@
+# Alert
+
+A callout to draw user's attention.
+
+## Key Props
+
+- `title`: to set the title of the Alert.
+- `description`: to set the description of the Alert.
+- `icon`: to show an [Icon](/docs/components/icon).
+- `avatar`: to show an [Avatar](/docs/components/avatar).
+- `color`: to change the color of the Alert.
+- `variant`: to change the variant of the Alert.
+- `close`: to display a [Button](/docs/components/button) to dismiss the Alert.
+- `actions`: to add some [Button](/docs/components/button) actions to the Alert.
+- `orientation`: to change the orientation of the Alert.
+- `class`: to override the base styles of the Alert.
+
+## Usage
+
+```vue
+<UAlert
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/app.md

@@ -0,0 +1,11 @@
+# App
+
+Wraps your app to provide global configurations and more.
+
+## Usage
+
+```vue
+<UApp
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/auth-form.md

@@ -0,0 +1,27 @@
+# AuthForm
+
+A customizable Form to create login, register or password reset forms.
+
+## Key Props
+
+- `fields`: as an array of objects with the following properties:
+
+- `name: string`{lang="ts-type"}
+- `type: 'checkbox' | 'select' | 'otp' | 'InputHTMLAttributes['type']'`{lang="ts-type"}
+
+Each field must include a `type` property, which determines the input component and any additional props applied: `checkbox` fields use [Checkbox](/docs/components/checkbox#props) props, `select` fields use [SelectMenu](/docs/components/select-menu#props) props, `otp` fields use [PinInput](/docs/components/pin-input#props) props, and all other types use [Input](/docs/components/input#props) props.
+
+- `title`: to set the title of the Form.
+- `description`: to set the description of the Form.
+- `icon`: to set the icon of the Form.
+- `providers`: to add providers to the form.
+- `separator`: to customize the [Separator](/docs/components/separator) between the providers and the fields.
+- `submit`: to change the submit button of the Form.
+
+## Usage
+
+```vue
+<UAuthForm
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/avatar-group.md

@@ -0,0 +1,16 @@
+# AvatarGroup
+
+Stack multiple avatars in a group.
+
+## Key Props
+
+- `size`: to change the size of all the avatars.
+- `max`: to limit the number of avatars displayed.
+
+## Usage
+
+```vue
+<UAvatarGroup
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/avatar.md

@@ -0,0 +1,19 @@
+# Avatar
+
+An img element with fallback and Nuxt Image support.
+
+## Key Props
+
+- `src`: to set the image URL.
+- `size`: to set the size of the Avatar.
+- `icon`: to display a fallback [Icon](/docs/components/icon).
+- `text`: to display a fallback text.
+- `chip`: to display a chip around the Avatar.
+
+## Usage
+
+```vue
+<UAvatar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/badge.md

@@ -0,0 +1,21 @@
+# Badge
+
+A short text to represent a status or a category.
+
+## Key Props
+
+- `label`: to set the label of the Badge.
+- `color`: to change the color of the Badge.
+- `variant`:
+- `size`: to change the size of the Badge.
+- `icon`: to show an [Icon](/docs/components/icon) inside the Badge.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the Badge.
+- `class`: to override the base styles of the Badge.
+
+## Usage
+
+```vue
+<UBadge
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/banner.md

@@ -0,0 +1,19 @@
+# Banner
+
+Display a banner at the top of your website to inform users about important information.
+
+## Key Props
+
+- `title`: to display a title on the Banner.
+- `icon`: to display an icon on the Banner.
+- `color`: to change the color of the Banner.
+- `close`: to display a [Button](/docs/components/button) to dismiss the Banner.
+- `actions`: to add some [Button](/docs/components/button) actions to the Banner.
+
+## Usage
+
+```vue
+<UBanner
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/blog-post.md

@@ -0,0 +1,32 @@
+# BlogPost
+
+A customizable article to display in a blog page.
+
+## Key Props
+
+- `title`: to display the title of the BlogPost.
+- `description`: to display the description of the BlogPost.
+- `date`: to display the date of the BlogPost.
+- `badge`: to display a [Badge](/docs/components/badge) in the BlogPost.
+- `image`: to display an image in the BlogPost.
+- `authors`: to display a list of [User](/docs/components/user) in the BlogPost as an array of objects with the following properties:
+
+- `name?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `avatar?: Omit<AvatarProps, 'size'>`{lang="ts-type"}
+- `chip?: boolean | Omit<ChipProps, 'size' | 'inset'>`{lang="ts-type"}
+- `size?: UserProps['size']`{lang="ts-type"}
+- `orientation?: UserProps['orientation']`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `variant`: to change the style of the BlogPost.
+- `orientation`: to change the BlogPost orientation.
+
+## Usage
+
+```vue
+<UBlogPost
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/blog-posts.md

@@ -0,0 +1,16 @@
+# BlogPosts
+
+Display a list of blog posts in a responsive grid layout.
+
+## Key Props
+
+- `posts`: as an array of objects with the properties of the [BlogPost](/docs/components/blog-post#props) component.
+- `orientation`: to change the orientation of the BlogPosts.
+
+## Usage
+
+```vue
+<UBlogPosts
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/breadcrumb.md

@@ -0,0 +1,30 @@
+# Breadcrumb
+
+A hierarchy of links to navigate through a website.
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `slot`:
+
+## Usage
+
+```vue
+<UBreadcrumb
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#item`

.claude/skills/nuxt-ui/components/button.md

@@ -0,0 +1,24 @@
+# Button
+
+A button element that can act as a link or trigger an action.
+
+## Key Props
+
+- `label`: to set the label of the Button.
+- `color`: to change the color of the Button.
+- `variant`: to change the variant of the Button.
+- `size`: to change the size of the Button.
+- `icon`: to show an [Icon](/docs/components/icon) inside the Button.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the Button.
+- `loading`: to show a loading icon and disable the Button.
+- `disabled`: to disable the Button.
+- `class`: to override the base styles of the Button.
+- `ui`: to override the slots styles of the Button.
+
+## Usage
+
+```vue
+<UButton
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/calendar.md

@@ -0,0 +1,24 @@
+# Calendar
+
+A calendar component for selecting single dates, multiple dates or date ranges.
+
+> Based on [Reka UI Calendar](https://reka-ui.com/docs/components/calendar)
+
+## Key Props
+
+- `multiple`: to allow multiple selections.
+- `range`: to select a range of dates.
+- `color`: to change the color of the calendar.
+- `variant`: to change the variant of the calendar.
+- `size`: to change the size of the calendar.
+- `disabled`: to disable the calendar.
+- `numberOfMonths`: to change the number of months in the calendar.
+- `weekNumbers`: to display week numbers (v4.4+).
+
+## Usage
+
+```vue
+<UCalendar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/card.md

@@ -0,0 +1,15 @@
+# Card
+
+Display content in a card with a header, body and footer.
+
+## Key Props
+
+- `variant`: to change the variant of the Card.
+
+## Usage
+
+```vue
+<UCard
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/carousel.md

@@ -0,0 +1,37 @@
+# Carousel
+
+A carousel with motion and swipe built using Embla.
+
+## Key Props
+
+- `items`: as an array and render each item using the default slot:
+
+## ::component-example
+
+name: 'carousel-items-example'
+class: 'p-8'
+
+---
+
+::
+
+You can also pass an array of objects with the following properties:
+
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue }`{lang="ts-type"}
+
+You can control how many items are visible by using the [`basis`](https://tailwindcss.
+
+- `orientation`: to change the orientation of the Progress.
+- `arrows`: to display prev and next buttons.
+- `dots`: to display a list of dots to scroll to a specific slide.
+- `autoplay`: as a boolean or an object to configure the [Autoplay plugin](https://www.
+- `fade`: as a boolean or an object to configure the [Fade plugin](https://www.
+
+## Usage
+
+```vue
+<UCarousel
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/changelog-version.md

@@ -0,0 +1,31 @@
+# ChangelogVersion
+
+A customizable article to display in a changelog.
+
+## Key Props
+
+- `title`: to display the title of the ChangelogVersion.
+- `description`: to display the description of the ChangelogVersion.
+- `date`: to display the date of the ChangelogVersion.
+- `badge`: to display a [Badge](/docs/components/badge) on the ChangelogVersion.
+- `image`: to display an image in the BlogPost.
+- `authors`: to display a list of [User](/docs/components/user) in the ChangelogVersion as an array of objects with the following properties:
+
+- `name?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `avatar?: Omit<AvatarProps, 'size'>`{lang="ts-type"}
+- `chip?: boolean | Omit<ChipProps, 'size' | 'inset'>`{lang="ts-type"}
+- `size?: UserProps['size']`{lang="ts-type"}
+- `orientation?: UserProps['orientation']`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `indicator`: to hide the indicator dot on the left.
+
+## Usage
+
+```vue
+<UChangelogVersion
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/changelog-versions.md

@@ -0,0 +1,16 @@
+# ChangelogVersions
+
+Display a list of changelog versions in a timeline.
+
+## Key Props
+
+- `versions`: as an array of objects with the properties of the [ChangelogVersion](/docs/components/changelog-version#props) component.
+- `indicator`: to hide the indicator bar on the left.
+
+## Usage
+
+```vue
+<UChangelogVersions
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chat-message.md

@@ -0,0 +1,20 @@
+# ChatMessage
+
+Display a chat message with icon, avatar, and actions.
+
+## Key Props
+
+- `parts`: to display the message content using the AI SDK v5 format.
+- `side`: to display the message on the left or right.
+- `variant`: to change style of the message.
+- `icon`: to display an [Icon](/docs/components/icon) component next to the message.
+- `avatar`: to display an [Avatar](/docs/components/avatar) component next to the message.
+- `actions`: to display actions below the message that will be displayed when hovering over the message.
+
+## Usage
+
+```vue
+<UChatMessage
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chat-messages.md

@@ -0,0 +1,18 @@
+# ChatMessages
+
+Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
+
+## Key Props
+
+- `messages`: to display a list of chat messages.
+- `status`: to display a visual indicator when the assistant is processing.
+- `user`: to change the [ChatMessage](/docs/components/chat-message) props for `user` messages.
+- `assistant`: to change the [ChatMessage](/docs/components/chat-message) props for `assistant` messages.
+
+## Usage
+
+```vue
+<UChatMessages
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chat-palette.md

@@ -0,0 +1,11 @@
+# ChatPalette
+
+A chat palette to create a chatbot interface inside an overlay.
+
+## Usage
+
+```vue
+<UChatPalette
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chat-prompt-submit.md

@@ -0,0 +1,11 @@
+# ChatPromptSubmit
+
+A Button for submitting chat prompts with automatic status handling.
+
+## Usage
+
+```vue
+<UChatPromptSubmit
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chat-prompt.md

@@ -0,0 +1,15 @@
+# ChatPrompt
+
+An enhanced Textarea for submitting prompts in AI chat interfaces.
+
+## Key Props
+
+- `variant`: to change the style of the prompt.
+
+## Usage
+
+```vue
+<UChatPrompt
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/checkbox-group.md

@@ -0,0 +1,67 @@
+# CheckboxGroup
+
+A set of checklist buttons to select multiple option from a list.
+
+> Based on [Reka UI CheckboxGroup](https://reka-ui.com/docs/components/checkbox#group-root)
+
+## Key Props
+
+- `items`: as an array of strings or numbers:
+
+## ::component-code
+
+prettier: true
+ignore:
+
+- modelValue
+- items
+  external:
+- items
+- modelValue
+  props:
+  modelValue: - 'System'
+  items: - 'System' - 'Light' - 'Dark'
+
+---
+
+::
+
+You can also pass an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- [`value?: string`{lang="ts-type"}](#value-key)
+- `disabled?: boolean`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+
+## ::component-code
+
+ignore:
+
+- modelValue
+- items
+  external:
+- items
+- modelValue
+  externalTypes:
+- CheckboxGroupItem[]
+  props:
+  modelValue: - 'system'
+  items: - label: 'System'
+  description: 'This is the first option.
+- `legend`: to set the legend of the CheckboxGroup.
+- `color`: to change the color of the CheckboxGroup.
+- `variant`: to change the variant of the CheckboxGroup.
+- `size`: to change the size of the CheckboxGroup.
+- `orientation`: to change the orientation of the CheckboxGroup.
+- `indicator`: to change the position or hide the indicator.
+- `disabled`: to disable the CheckboxGroup.
+
+## Usage
+
+```vue
+<UCheckboxGroup
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/checkbox.md

@@ -0,0 +1,24 @@
+# Checkbox
+
+An input element to toggle between checked and unchecked states.
+
+> Based on [Reka UI Checkbox](https://reka-ui.com/docs/components/checkbox)
+
+## Key Props
+
+- `label`: to set the label of the Checkbox.
+- `description`: to set the description of the Checkbox.
+- `icon`: to set the icon of the Checkbox when it is checked.
+- `color`: to change the color of the Checkbox.
+- `variant`: to change the variant of the Checkbox.
+- `size`: to change the size of the Checkbox.
+- `indicator`: to change the position or hide the indicator.
+- `disabled`: to disable the Checkbox.
+
+## Usage
+
+```vue
+<UCheckbox
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/chip.md

@@ -0,0 +1,20 @@
+# Chip
+
+An indicator of a numeric value or a state.
+
+## Key Props
+
+- `color`: to change the color of the Chip.
+- `size`: to change the size of the Chip.
+- `text`: to set the text of the Chip.
+- `position`: to change the position of the Chip.
+- `inset`: to display the Chip inside the component.
+- `standalone`: alongside the `inset` prop to display the Chip inline.
+
+## Usage
+
+```vue
+<UChip
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/collapsible.md

@@ -0,0 +1,21 @@
+# Collapsible
+
+A collapsible element to toggle visibility of its content.
+
+> Based on [Reka UI Collapsible](https://reka-ui.com/docs/components/collapsible)
+
+## Key Props
+
+- `disabled`: to disable the Collapsible.
+
+## Usage
+
+```vue
+<UCollapsible
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#content`

.claude/skills/nuxt-ui/components/color-mode-avatar.md

@@ -0,0 +1,11 @@
+# ColorModeAvatar
+
+An Avatar with a different source for light and dark mode.
+
+## Usage
+
+```vue
+<UColorModeAvatar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/color-mode-button.md

@@ -0,0 +1,11 @@
+# ColorModeButton
+
+A Button to switch between light and dark mode.
+
+## Usage
+
+```vue
+<UColorModeButton
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/color-mode-image.md

@@ -0,0 +1,11 @@
+# ColorModeImage
+
+An image element with a different source for light and dark mode.
+
+## Usage
+
+```vue
+<UColorModeImage
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/color-mode-select.md

@@ -0,0 +1,11 @@
+# ColorModeSelect
+
+A Select to switch between system, dark & light mode.
+
+## Usage
+
+```vue
+<UColorModeSelect
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/color-mode-switch.md

@@ -0,0 +1,11 @@
+# ColorModeSwitch
+
+A switch to toggle between light and dark mode.
+
+## Usage
+
+```vue
+<UColorModeSwitch
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/color-picker.md

@@ -0,0 +1,18 @@
+# ColorPicker
+
+A component to select a color.
+
+## Key Props
+
+- `format`: to set `rgb` value of the ColorPicker.
+- `throttle`: to set the throttle value of the ColorPicker.
+- `size`: to set the size of the ColorPicker.
+- `disabled`: to disable the ColorPicker.
+
+## Usage
+
+```vue
+<UColorPicker
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/command-palette.md

@@ -0,0 +1,43 @@
+# CommandPalette
+
+A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
+
+> Based on [Reka UI CommandPalette](https://reka-ui.com/docs/components/listbox)
+
+## Key Props
+
+- `groups`: as an array of objects with the following properties:
+
+- `id: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `items?: CommandPaletteItem[]`{lang="ts-type"}
+- [`ignoreFilter?: boolean`{lang="ts-type"}](#with-ignore-filter)
+- [`postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}](#with-post-filtered-items)
+- `highlightedIcon?: string`{lang="ts-type"}
+
+::caution
+You must provide an `id` for each group otherwise the group will be ignored.
+
+- `multiple`: to allow multiple selections.
+- `placeholder`: to change the placeholder text.
+- `icon`: to customize the input [Icon](/docs/components/icon).
+- `loading`: to show a loading icon on the CommandPalette.
+- `close`: to display a [Button](/docs/components/button) to dismiss the CommandPalette.
+- `back`: to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
+- `disabled`: to disable the CommandPalette.
+- `virtualize`: to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
+- `slot`:
+
+## Usage
+
+```vue
+<UCommandPalette
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#footer`
+- `#item`

.claude/skills/nuxt-ui/components/container.md

@@ -0,0 +1,11 @@
+# Container
+
+A container lets you center and constrain the width of your content.
+
+## Usage
+
+```vue
+<UContainer
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/content-navigation.md

@@ -0,0 +1,18 @@
+# ContentNavigation
+
+An accordion-style navigation component for organizing page links.
+
+## Key Props
+
+- `navigation`: with the `navigation`{lang="ts-type"} value you get when fetching the navigation of your app.
+- `color`: to change the color of the navigation links.
+- `variant`: to change the variant of the navigation links.
+- `highlight`: to display a highlighted border for the active link.
+
+## Usage
+
+```vue
+<UContentNavigation
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/content-search-button.md

@@ -0,0 +1,16 @@
+# ContentSearchButton
+
+A pre-styled Button to open the ContentSearch modal.
+
+## Key Props
+
+- `collapsed`: to show the button's label and [kbds](#kbds).
+- `kbds`: to display keyboard keys in the button.
+
+## Usage
+
+```vue
+<UContentSearchButton
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/content-search.md

@@ -0,0 +1,15 @@
+# ContentSearch
+
+A ready to use CommandPalette to add to your documentation.
+
+## Key Props
+
+- `shortcut`: to change the shortcut used in [defineShortcuts](/docs/composables/define-shortcuts) to open the ContentSearch component.
+
+## Usage
+
+```vue
+<UContentSearch
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/content-surround.md

@@ -0,0 +1,15 @@
+# ContentSurround
+
+A pair of prev and next links to navigate between pages.
+
+## Key Props
+
+- `surround`: with the `surround`{lang="ts-type"} value you get when fetching a page surround.
+
+## Usage
+
+```vue
+<UContentSurround
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/content-toc.md

@@ -0,0 +1,18 @@
+# ContentToc
+
+A sticky Table of Contents with automatic active anchor link highlighting.
+
+## Key Props
+
+- `links`: with the `page?.
+- `title`: to change the title of the Table of Contents.
+- `color`: to change the color of the links.
+- `highlight`: to display a highlighted border for the active item.
+
+## Usage
+
+```vue
+<UContentToc
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/context-menu.md

@@ -0,0 +1,43 @@
+# ContextMenu
+
+A menu to display actions when right-clicking on an element.
+
+> Based on [Reka UI ContextMenu](https://reka-ui.com/docs/components/context-menu)
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
+- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
+- [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
+- `disabled?: boolean`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- [`onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}](#with-checkbox-items)
+- `children?: ContextMenuItem[] | ContextMenuItem[][]`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `size`: to change the size of the ContextMenu.
+- `modal`: to control whether the ContextMenu blocks interaction with outside content.
+- `disabled`: to disable the ContextMenu.
+- `slot`:
+
+## Usage
+
+```vue
+<UContextMenu
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#item`

.claude/skills/nuxt-ui/components/dashboard-group.md

@@ -0,0 +1,11 @@
+# DashboardGroup
+
+A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
+
+## Usage
+
+```vue
+<UDashboardGroup
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-navbar.md

@@ -0,0 +1,17 @@
+# DashboardNavbar
+
+A responsive navbar to display in a dashboard.
+
+## Key Props
+
+- `title`: to set the title of the navbar.
+- `icon`: to set the icon of the navbar.
+- `toggle`: to customize the toggle button displayed on mobile that opens the [DashboardSidebar](/docs/components/dashboard-sidebar) component.
+
+## Usage
+
+```vue
+<UDashboardNavbar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-panel.md

@@ -0,0 +1,15 @@
+# DashboardPanel
+
+A resizable panel to display in a dashboard.
+
+## Key Props
+
+- `resizable`: to make the panel resizable.
+
+## Usage
+
+```vue
+<UDashboardPanel
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-resize-handle.md

@@ -0,0 +1,11 @@
+# DashboardResizeHandle
+
+A handle to resize a sidebar or panel.
+
+## Usage
+
+```vue
+<UDashboardResizeHandle
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-search-button.md

@@ -0,0 +1,16 @@
+# DashboardSearchButton
+
+A pre-styled Button to open the DashboardSearch modal.
+
+## Key Props
+
+- `collapsed`: to hide the button's label and [kbds](#kbds).
+- `kbds`: to display keyboard keys in the button.
+
+## Usage
+
+```vue
+<UDashboardSearchButton
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-search.md

@@ -0,0 +1,15 @@
+# DashboardSearch
+
+A ready to use CommandPalette to add to your dashboard.
+
+## Key Props
+
+- `shortcut`: to change the shortcut used in [defineShortcuts](/docs/composables/define-shortcuts) to open the ContentSearch component.
+
+## Usage
+
+```vue
+<UDashboardSearch
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-sidebar-collapse.md

@@ -0,0 +1,11 @@
+# DashboardSidebarCollapse
+
+A Button to collapse the sidebar on desktop.
+
+## Usage
+
+```vue
+<UDashboardSidebarCollapse
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-sidebar-toggle.md

@@ -0,0 +1,11 @@
+# DashboardSidebarToggle
+
+A Button to toggle the sidebar on mobile.
+
+## Usage
+
+```vue
+<UDashboardSidebarToggle
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-sidebar.md

@@ -0,0 +1,19 @@
+# DashboardSidebar
+
+A resizable and collapsible sidebar to display in a dashboard.
+
+## Key Props
+
+- `resizable`: to make the sidebar resizable.
+- `collapsible`: to make the sidebar collapsible when dragging near the edge of the screen.
+- `side`: to change the side of the sidebar.
+- `mode`: to change the mode of the sidebar menu.
+- `toggle`: to customize the [DashboardSidebarToggle](/docs/components/dashboard-sidebar-toggle) component displayed on mobile.
+
+## Usage
+
+```vue
+<UDashboardSidebar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/dashboard-toolbar.md

@@ -0,0 +1,11 @@
+# DashboardToolbar
+
+A toolbar to display under the navbar in a dashboard.
+
+## Usage
+
+```vue
+<UDashboardToolbar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/drawer.md

@@ -0,0 +1,29 @@
+# Drawer
+
+A drawer that smoothly slides in & out of the screen.
+
+## Key Props
+
+- `title`: to set the title of the Drawer's header.
+- `description`: to set the description of the Drawer's header.
+- `direction`: to control the direction of the Drawer.
+- `inset`: to inset the Drawer from the edges.
+- `handle`: to control whether the Drawer has a handle or not.
+- `overlay`: to control whether the Drawer has an overlay or not.
+- `modal`: to control whether the Drawer blocks interaction with outside content.
+- `dismissible`: to control whether the Drawer is dismissible when clicking outside of it or pressing escape.
+
+## Usage
+
+```vue
+<UDrawer
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#content`
+- `#header`
+- `#body`
+- `#footer`

.claude/skills/nuxt-ui/components/dropdown-menu.md

@@ -0,0 +1,45 @@
+# DropdownMenu
+
+A menu to display actions when clicking on an element.
+
+> Based on [Reka UI DropdownMenu](https://reka-ui.com/docs/components/dropdown-menu)
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
+- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
+- [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
+- `disabled?: boolean`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- [`onUpdateChecked?: (checked: boolean) => void`{lang="ts-type"}](#with-checkbox-items)
+- `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `content`: to control how the DropdownMenu content is rendered, like its `align` or `side` for example.
+- `arrow`: to display an arrow on the DropdownMenu.
+- `size`: to control the size of the DropdownMenu.
+- `modal`: to control whether the DropdownMenu blocks interaction with outside content.
+- `disabled`: to disable the DropdownMenu.
+- `slot`:
+
+## Usage
+
+```vue
+<UDropdownMenu
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#item`

.claude/skills/nuxt-ui/components/editor-drag-handle.md

@@ -0,0 +1,16 @@
+# EditorDragHandle
+
+A draggable handle for reordering and selecting blocks in the editor.
+
+## Key Props
+
+- `icon`: to customize the drag handle icon.
+- `options`: to customize the positioning behavior using [Floating UI options](https://floating-ui.
+
+## Usage
+
+```vue
+<UEditorDragHandle
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/editor-emoji-menu.md

@@ -0,0 +1,39 @@
+# EditorEmojiMenu
+
+An emoji picker menu that displays emoji suggestions when typing the : character in the editor.
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `name: string`{lang="ts-type"}
+- `emoji: string`{lang="ts-type"}
+- `shortcodes?: string[]`{lang="ts-type"}
+- `tags?: string[]`{lang="ts-type"}
+- `group?: string`{lang="ts-type"}
+- `fallbackImage?: string`{lang="ts-type"}
+
+## ::component-example
+
+elevated: true
+collapse: true
+name: 'editor-emoji-menu-items-example'
+class: 'p-8'
+
+---
+
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+
+- `char`: to change the trigger character.
+- `options`: to customize the positioning behavior using [Floating UI options](https://floating-ui.
+
+## Usage
+
+```vue
+<UEditorEmojiMenu
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/editor-mention-menu.md

@@ -0,0 +1,38 @@
+# EditorMentionMenu
+
+A mention menu that displays user suggestions when typing the @ character in the editor.
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+## ::component-example
+
+elevated: true
+collapse: true
+name: 'editor-mention-menu-items-example'
+class: 'p-8'
+
+---
+
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+
+- `char`: to change the trigger character.
+- `options`: to customize the positioning behavior using [Floating UI options](https://floating-ui.
+
+## Usage
+
+```vue
+<UEditorMentionMenu
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/editor-suggestion-menu.md

@@ -0,0 +1,39 @@
+# EditorSuggestionMenu
+
+A command menu that displays formatting and action suggestions when typing the / character in the editor.
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- [`kind?: "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}](/docs/components/editor#handlers)
+- `label?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `type?: "label" | "separator"`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+## ::component-example
+
+elevated: true
+collapse: true
+name: 'editor-suggestion-menu-items-example'
+class: 'p-8'
+
+---
+
+::
+
+::note
+You can also pass an array of arrays to the `items` prop to create separated groups of items.
+
+- `char`: to change the trigger character.
+- `options`: to customize the positioning behavior using [Floating UI options](https://floating-ui.
+
+## Usage
+
+```vue
+<UEditorSuggestionMenu
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/editor-toolbar.md

@@ -0,0 +1,36 @@
+# EditorToolbar
+
+A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
+- `activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
+- `variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
+- `activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
+- `size?: "xs" | "sm" | "md" | "lg" | "xl"`{lang="ts-type"}
+- [`kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"`{lang="ts-type"}](/docs/components/editor#handlers)
+- `disabled?: boolean`{lang="ts-type"}
+- `loading?: boolean`{lang="ts-type"}
+- `active?: boolean`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-link-popover)
+- `onClick?: (e: MouseEvent) => void`{lang="ts-type"}
+- `items?: EditorToolbarItem[] | EditorToolbarItem[][]`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+
+You can pass any property from the [Button](/docs/components/button#props) component such as `color`, `variant`, `size`, etc.
+
+- `layout`: to change how the toolbar is displayed.
+
+## Usage
+
+```vue
+<UEditorToolbar
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/editor.md

@@ -0,0 +1,16 @@
+# Editor
+
+A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
+
+## Key Props
+
+- `placeholder`: to set a placeholder text that shows in empty paragraphs.
+- `handlers`: to extend or override the default handlers.
+
+## Usage
+
+```vue
+<UEditor
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/empty.md

@@ -0,0 +1,21 @@
+# Empty
+
+A component to display an empty state.
+
+## Key Props
+
+- `title`: to set the title of the empty state.
+- `description`: to set the description of the empty state.
+- `icon`: to set the icon of the empty state.
+- `avatar`: to set the avatar of the empty state.
+- `actions`: to add some [Button](/docs/components/button) actions to the empty state.
+- `variant`: to change the variant of the empty state.
+- `size`: to change the size of the empty state.
+
+## Usage
+
+```vue
+<UEmpty
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/error.md

@@ -0,0 +1,17 @@
+# Error
+
+A pre-built error component with NuxtError support.
+
+## Key Props
+
+- `error`: to display an error message.
+- `clear`: to customize or hide the clear button (with `false` value).
+- `redirect`: to redirect the user to a different page when the clear button is clicked.
+
+## Usage
+
+```vue
+<UError
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/field-group.md

@@ -0,0 +1,16 @@
+# FieldGroup
+
+Group multiple button-like elements together.
+
+## Key Props
+
+- `size`: to change the size of all the buttons.
+- `orientation`: to change the orientation of the buttons.
+
+## Usage
+
+```vue
+<UFieldGroup
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/file-upload.md

@@ -0,0 +1,28 @@
+# FileUpload
+
+An input element to upload files.
+
+## Key Props
+
+- `multiple`: to allow multiple files to be selected.
+- `dropzone`: to enable/disable the droppable area.
+- `interactive`: to enable/disable the clickable area.
+- `accept`: to specify the allowed file types for the input.
+- `label`: to set the label of the FileUpload.
+- `description`: to set the description of the FileUpload.
+- `icon`: to set the icon of the FileUpload.
+- `color`: to change the color of the FileUpload.
+- `variant`: to change the variant of the FileUpload.
+- `size`: to change the size of the FileUpload.
+
+## Usage
+
+```vue
+<UFileUpload
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#actions`

.claude/skills/nuxt-ui/components/footer-columns.md

@@ -0,0 +1,20 @@
+# FooterColumns
+
+A list of links as columns to display in your Footer.
+
+## Key Props
+
+- `columns`: as an array of objects with the following properties:
+
+- `label: string`{lang="ts-type"}
+- `children?: FooterColumnLink[]`{lang="ts-type"}
+
+Each column contains a `children` array of objects that define the links.
+
+## Usage
+
+```vue
+<UFooterColumns
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/footer.md

@@ -0,0 +1,11 @@
+# Footer
+
+A responsive footer component.
+
+## Usage
+
+```vue
+<UFooter
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/form-field.md

@@ -0,0 +1,20 @@
+# FormField
+
+A wrapper for form elements that provides validation and error handling.
+
+## Key Props
+
+- `label`: to set the label for the form control.
+- `description`: to provide additional information below the label.
+- `hint`: to display a hint message next to the label.
+- `help`: to display a help message below the form control.
+- `error`: to display an error message below the form control.
+- `size`: to change the size of the FormField, the `size` is proxied to the form control.
+
+## Usage
+
+```vue
+<UFormField
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/form.md

@@ -0,0 +1,16 @@
+# Form
+
+A form component with built-in validation and submission handling.
+
+## Key Props
+
+- `validate`: to apply your own validation logic.
+- `nested`: to nest multiple Form components and link their validation functions.
+
+## Usage
+
+```vue
+<UForm
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/header.md

@@ -0,0 +1,18 @@
+# Header
+
+A responsive header component.
+
+## Key Props
+
+- `title`: to change the title of the header.
+- `to`: to change the link of the title.
+- `mode`: to change the mode of the header menu.
+- `toggle`: to customize the toggle button displayed on mobile.
+
+## Usage
+
+```vue
+<UHeader
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/icon.md

@@ -0,0 +1,30 @@
+# Icon
+
+A component to display any icon from Iconify or another component.
+
+## Key Props
+
+- `name`: to display an icon:
+
+## ::component-code
+
+props:
+name: 'i-lucide-lightbulb'
+class: 'size-5'
+
+---
+
+::
+
+::framework-only
+#nuxt
+:::caution{to="/docs/getting-started/integrations/icons/nuxt#collections"}
+It's highly recommended to install the icons collections you need, read more about this.
+
+## Usage
+
+```vue
+<UIcon
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/input-date.md

@@ -0,0 +1,21 @@
+# InputDate
+
+An input component for date selection.
+
+> Based on [Reka UI InputDate](https://reka-ui.com/docs/components/date-field)
+
+## Key Props
+
+- `range`: to select a range of dates.
+- `color`: to change the color of the InputDate.
+- `variant`: to change the variant of the InputDate.
+- `size`: to change the size of the InputDate.
+- `disabled`: to disable the InputDate.
+
+## Usage
+
+```vue
+<UInputDate
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/input-menu.md

@@ -0,0 +1,66 @@
+# InputMenu
+
+An autocomplete input with real-time suggestions.
+
+> Based on [Reka UI InputMenu](https://reka-ui.com/docs/components/combobox)
+
+## Key Props
+
+- `items`: as an array of strings, numbers or booleans:
+
+## ::component-code
+
+prettier: true
+ignore:
+
+- modelValue
+- items
+  external:
+- items
+- modelValue
+  props:
+  modelValue: 'Backlog'
+  items: - Backlog - Todo - In Progress - Done
+
+---
+
+::
+
+You can also pass an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
+- [`icon?: string`{lang="ts-type"}](#with-icons-in-items)
+- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
+- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
+- `disabled?: boolean`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
+
+## ::component-code
+
+ignore:
+
+- modelValue.
+- `multiple`: to allow multiple selections, the selected items will be displayed as tags.
+- `placeholder`: to set a placeholder text.
+- `content`: to control how the InputMenu content is rendered, like its `align` or `side` for example.
+- `arrow`: to display an arrow on the InputMenu.
+- `color`: to change the ring color when the InputMenu is focused.
+- `variant`: to change the variant of the InputMenu.
+- `size`: to change the size of the InputMenu.
+- `icon`: to show an [Icon](/docs/components/icon) inside the InputMenu.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the InputMenu.
+
+## Usage
+
+```vue
+<UInputMenu
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#leading`

.claude/skills/nuxt-ui/components/input-number.md

@@ -0,0 +1,21 @@
+# InputNumber
+
+An input for numerical values with a customizable range.
+
+## Key Props
+
+- `step`: to set the step value of the InputNumber.
+- `orientation`: to change the orientation of the InputNumber.
+- `placeholder`: to set a placeholder text.
+- `color`: to change the ring color when the InputNumber is focused.
+- `variant`: to change the variant of the InputNumber.
+- `size`: to change the size of the InputNumber.
+- `disabled`: to disable the InputNumber.
+
+## Usage
+
+```vue
+<UInputNumber
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/input-tags.md

@@ -0,0 +1,24 @@
+# InputTags
+
+An input element that displays interactive tags.
+
+> Based on [Reka UI InputTags](https://reka-ui.com/docs/components/tags-input)
+
+## Key Props
+
+- `placeholder`: to set a placeholder text.
+- `color`: to change the ring color when the InputTags is focused.
+- `variant`: to change the appearance of the InputTags.
+- `size`: to adjust the size of the InputTags.
+- `icon`: to show an [Icon](/docs/components/icon) inside the InputTags.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the InputTags.
+- `loading`: to show a loading icon on the InputTags.
+- `disabled`: to disable the InputTags.
+
+## Usage
+
+```vue
+<UInputTags
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/input-time.md

@@ -0,0 +1,22 @@
+# InputTime
+
+An input for selecting a time.
+
+> Based on [Reka UI InputTime](https://reka-ui.com/docs/components/time-field)
+
+## Key Props
+
+- `color`: to change the color of the InputTime.
+- `variant`: to change the variant of the InputTime.
+- `size`: to change the size of the InputTime.
+- `icon`: to show an [Icon](/docs/components/icon) inside the InputTime.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the InputTime.
+- `disabled`: to disable the InputTime.
+
+## Usage
+
+```vue
+<UInputTime
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/input.md

@@ -0,0 +1,28 @@
+# Input
+
+An input element to enter text.
+
+## Key Props
+
+- `type`: to change the input type.
+- `placeholder`: to set a placeholder text.
+- `color`: to change the ring color when the Input is focused.
+- `variant`: to change the variant of the Input.
+- `size`: to change the size of the Input.
+- `icon`: to show an [Icon](/docs/components/icon) inside the Input.
+- `avatar`: to show an [Avatar](/docs/components/avatar) inside the Input.
+- `loading`: to show a loading icon on the Input.
+- `disabled`: to disable the Input.
+
+## Usage
+
+```vue
+<UInput
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#trailing`
+- `#default`

.claude/skills/nuxt-ui/components/kbd.md

@@ -0,0 +1,19 @@
+# Kbd
+
+A kbd element to display a keyboard key.
+
+## Key Props
+
+- `value`: to set the value of the Kbd.
+- `color`: to change the color of the Kbd.
+- `variant`: to change the variant of the Kbd.
+- `size`: to change the size of the Kbd.
+- `class`: to override the base styles of the Badge.
+
+## Usage
+
+```vue
+<UKbd
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/link.md

@@ -0,0 +1,11 @@
+# Link
+
+A wrapper around <NuxtLink> with extra props.
+
+## Usage
+
+```vue
+<ULink
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/locale-select.md

@@ -0,0 +1,15 @@
+# LocaleSelect
+
+A Select to switch between locales.
+
+## Key Props
+
+- `locales`: with an array of locales from `@nuxt/ui/locale`.
+
+## Usage
+
+```vue
+<ULocaleSelect
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/main.md

@@ -0,0 +1,11 @@
+# Main
+
+A main element that fills the available viewport height.
+
+## Usage
+
+```vue
+<UMain
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/marquee.md

@@ -0,0 +1,18 @@
+# Marquee
+
+A component to create infinite scrolling content.
+
+## Key Props
+
+- `reverse`: to reverse the direction of the animation.
+- `orientation`: to change the scrolling direction.
+- `repeat`: to specify how many times the content should be repeated in the animation.
+- `overlay`: to remove the gradient overlays on the edges of the marquee.
+
+## Usage
+
+```vue
+<UMarquee
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/modal.md

@@ -0,0 +1,32 @@
+# Modal
+
+A dialog window that can be used to display a message or request user input.
+
+> Based on [Reka UI Modal](https://reka-ui.com/docs/components/dialog)
+
+## Key Props
+
+- `title`: to set the title of the Modal's header.
+- `description`: to set the description of the Modal's header.
+- `close`: to customize or hide the close button (with `false` value) displayed in the Modal's header.
+- `transition`: to control whether the Modal is animated or not.
+- `overlay`: to control whether the Modal has an overlay or not.
+- `modal`: to control whether the Modal blocks interaction with outside content.
+- `dismissible`: to control whether the Modal is dismissible when clicking outside of it or pressing escape.
+- `scrollable`: to make the Modal's content scrollable within the overlay.
+- `fullscreen`: to make the Modal fullscreen.
+
+## Usage
+
+```vue
+<UModal
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#content`
+- `#header`
+- `#body`
+- `#footer`

.claude/skills/nuxt-ui/components/navigation-menu.md

@@ -0,0 +1,48 @@
+# NavigationMenu
+
+A list of links that can be displayed horizontally or vertically.
+
+> Based on [Reka UI NavigationMenu](https://reka-ui.com/docs/components/navigation-menu)
+
+## Key Props
+
+- `items`: as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `badge?: string | number | BadgeProps`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- `type?: 'label' | 'trigger' | 'link'`{lang="ts-type"}
+- `defaultOpen?: boolean`{lang="ts-type"}
+- `open?: boolean`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- `children?: NavigationMenuChildItem[]`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `orientation`: to change the orientation of the NavigationMenu.
+- `highlight`: to display a highlighted border for the active item.
+- `color`: to change the color of the NavigationMenu.
+- `variant`: to change the variant of the NavigationMenu.
+- `arrow`: to display an arrow on the NavigationMenu content when items have children.
+- `slot`:
+
+## Usage
+
+```vue
+<UNavigationMenu
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#content`
+- `#item`

.claude/skills/nuxt-ui/components/page-anchors.md

@@ -0,0 +1,22 @@
+# PageAnchors
+
+A list of anchors to be displayed in the page.
+
+## Key Props
+
+- `links`: as an array of objects with the following properties:
+
+- `label: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeading?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+## Usage
+
+```vue
+<UPageAnchors
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-aside.md

@@ -0,0 +1,11 @@
+# PageAside
+
+A sticky aside to display your page navigation.
+
+## Usage
+
+```vue
+<UPageAside
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-body.md

@@ -0,0 +1,11 @@
+# PageBody
+
+The main content of your page.
+
+## Usage
+
+```vue
+<UPageBody
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-card.md

@@ -0,0 +1,20 @@
+# PageCard
+
+A pre-styled card component that displays a title, description and optional link.
+
+## Key Props
+
+- `title`: to set the title of the card.
+- `description`: to set the description of the card.
+- `icon`: to set the icon of the card.
+- `variant`: to change the style of the card.
+- `orientation`: to change the orientation with the default slot.
+- `reverse`: to reverse the orientation of the default slot.
+
+## Usage
+
+```vue
+<UPageCard
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-columns.md

@@ -0,0 +1,11 @@
+# PageColumns
+
+A responsive multi-column layout system for organizing content side-by-side.
+
+## Usage
+
+```vue
+<UPageColumns
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-cta.md

@@ -0,0 +1,20 @@
+# PageCta
+
+A call to action section to display in your pages.
+
+## Key Props
+
+- `title`: to set the title of the CTA.
+- `description`: to set the description of the CTA.
+- `links`: to display a list of [Button](/docs/components/button) under the description.
+- `variant`: to change the style of the CTA.
+- `orientation`: to change the orientation with the default slot.
+- `reverse`: to reverse the orientation of the default slot.
+
+## Usage
+
+```vue
+<UPageCta
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-feature.md

@@ -0,0 +1,18 @@
+# PageFeature
+
+A component to showcase key features of your application.
+
+## Key Props
+
+- `title`: to set the title of the feature.
+- `description`: to set the description of the feature.
+- `icon`: to set the icon of the feature.
+- `orientation`: to change the orientation of the feature.
+
+## Usage
+
+```vue
+<UPageFeature
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-grid.md

@@ -0,0 +1,11 @@
+# PageGrid
+
+A responsive grid system for displaying content in a flexible layout.
+
+## Usage
+
+```vue
+<UPageGrid
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-header.md

@@ -0,0 +1,18 @@
+# PageHeader
+
+A responsive header for your pages.
+
+## Key Props
+
+- `title`: to display a title in the header.
+- `description`: to display a description in the header.
+- `headline`: to display a headline in the header.
+- `links`: to display a list of [Button](/docs/components/button) in the header.
+
+## Usage
+
+```vue
+<UPageHeader
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-hero.md

@@ -0,0 +1,20 @@
+# PageHero
+
+A responsive hero for your pages.
+
+## Key Props
+
+- `title`: to set the title of the hero.
+- `description`: to set the description of the hero.
+- `headline`: to set the headline of the hero.
+- `links`: to display a list of [Button](/docs/components/button) under the description.
+- `orientation`: to change the orientation with the default slot.
+- `reverse`: to reverse the orientation of the default slot.
+
+## Usage
+
+```vue
+<UPageHero
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-links.md

@@ -0,0 +1,24 @@
+# PageLinks
+
+A list of links to be displayed in the page.
+
+## Key Props
+
+- `links`: as an array of objects with the following properties:
+
+- `label: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `title`: to display a title above the links.
+
+## Usage
+
+```vue
+<UPageLinks
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-list.md

@@ -0,0 +1,15 @@
+# PageList
+
+A vertical list layout for displaying content in a stacked format.
+
+## Key Props
+
+- `divide`: to add a divider between each child element.
+
+## Usage
+
+```vue
+<UPageList
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-logos.md

@@ -0,0 +1,16 @@
+# PageLogos
+
+A list of logos or images to display on your pages.
+
+## Key Props
+
+- `title`: to set the title above the logos.
+- `marquee`: to enable a marquee effect for the logos.
+
+## Usage
+
+```vue
+<UPageLogos
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page-section.md

@@ -0,0 +1,30 @@
+# PageSection
+
+A responsive section for your pages.
+
+## Key Props
+
+- `title`: to set the title of the section.
+- `description`: to set the description of the section.
+- `headline`: to set the headline of the section.
+- `icon`: to set the icon of the section.
+- `features`: to display a list of [PageFeature](/docs/components/page-feature) under the description as an array of objects with the following properties:
+
+- `title?: string`{lang="ts-type"}
+- `description?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `orientation?: 'horizontal' | 'vertical'`{lang="ts-type"}
+
+You can pass any property from the [Link](/docs/components/link#props) component such as `to`, `target`, etc.
+
+- `links`: to display a list of [Button](/docs/components/button) under the description.
+- `orientation`: to change the orientation with the default slot.
+- `reverse`: to reverse the orientation of the default slot.
+
+## Usage
+
+```vue
+<UPageSection
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/page.md

@@ -0,0 +1,11 @@
+# Page
+
+A grid layout for your pages with left and right columns.
+
+## Usage
+
+```vue
+<UPage
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/pagination.md

@@ -0,0 +1,22 @@
+# Pagination
+
+A list of buttons or links to navigate through pages.
+
+> Based on [Reka UI Pagination](https://reka-ui.com/docs/components/pagination)
+
+## Key Props
+
+- `total`: to set the total number of items in the list.
+- `color`: to set the color of the inactive controls.
+- `variant`: to set the variant of the inactive controls.
+- `size`: to set the size of the controls.
+- `disabled`: to disable the pagination controls.
+- `to`: to transform buttons into links.
+
+## Usage
+
+```vue
+<UPagination
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/pin-input.md

@@ -0,0 +1,25 @@
+# PinInput
+
+An input element to enter a pin.
+
+> Based on [Reka UI PinInput](https://reka-ui.com/docs/components/pin-input)
+
+## Key Props
+
+- `type`: to change the input type.
+- `mask`: to treat the input like a password.
+- `otp`: to enable One-Time Password functionality.
+- `length`: to change the amount of inputs.
+- `placeholder`: to set a placeholder text.
+- `color`: to change the ring color when the PinInput is focused.
+- `variant`: to change the variant of the PinInput.
+- `size`: to change the size of the PinInput.
+- `disabled`: to disable the PinInput.
+
+## Usage
+
+```vue
+<UPinInput
+  <!-- props here -->
+/>
+```

.claude/skills/nuxt-ui/components/popover.md

@@ -0,0 +1,25 @@
+# Popover
+
+A non-modal dialog that floats around a trigger element.
+
+> Based on [Reka UI Popover](https://reka-ui.com/docs/components/hover-card)
+
+## Key Props
+
+- `mode`: to change the mode of the Popover.
+- `content`: to control how the Popover content is rendered, like its `align` or `side` for example.
+- `arrow`: to display an arrow on the Popover.
+- `modal`: to control whether the Popover blocks interaction with outside content.
+- `dismissible`: to control whether the Popover is dismissible when clicking outside of it or pressing escape.
+
+## Usage
+
+```vue
+<UPopover
+  <!-- props here -->
+/>
+```
+
+## Slots
+
+- `#content`