nuxt-uilisted

This skill enforces Nuxt UI v4 component-first conventions. The rule: when Nuxt UI provides a component, use it instead of hand-writing raw HTML. Apply only when the project uses `@nuxt/ui ^4.0` or higher. If `package.json` pins an older major (or doesn't have `@nuxt/ui`), **STOP** and ask the user before applying — do not assume earlier-version APIs. ## Core principles - **Use the U-prefixed component** if Nuxt UI offers one for the element (button → `UButton`, input → `UInput`, modal → `UModal`, etc.). Do not hand-write raw `<button>` / `<input>` / `<select>` / `<dialog>` / `<table>` for primary use cases. - **Compose via Nuxt UI slots and props**, not by overriding internal classes. Use `class` for layout/spacing utilities; use component-specific props (`color`, `variant`, `size`, `loading`, `disabled`) for behavior and look. - **Forms use `UForm` + `UFormField`**, not raw `<form>` with manual error wiring. `UForm` integrates with Zod/Valibot/Yup for validation. - **Overlays use Nuxt UI's overlay components** (`UModal` / `USlideover` / `UDrawer` / `UPopover` / `UTooltip` / `UContextMenu` / `UDropdownMenu` / `UToast`), not custom `<dialog>` or hand-rolled show/hide state. - **App shell uses `UApp`** at the root, with `UContainer` / `UHeader` / `UMain` / `UFooter` / `USidebar` for layout structure where appropriate. ## Component reference (use these, not raw HTML) ### Form `UCheckbox` `UCheckboxGroup` `UColorPicker` `UFileUpload` `UForm` `UFormField` `UInput` `UInputDat