Marketplace
nuxt-ui
Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
$ インストール
git clone https://github.com/onmax/nuxt-skills /tmp/nuxt-skills && cp -r /tmp/nuxt-skills/skills/nuxt-ui ~/.claude/skills/nuxt-skills// tip: Run this command in your terminal to install the skill
SKILL.md
name: nuxt-ui description: Use when building styled UI with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with 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.
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 | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options |
| references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| references/components.md | Component index by category (121 components) |
| components/*.md | Per-component details (button.md, modal.md, etc.) |
| references/forms.md | Form components, validation (Zod/Valibot), useFormField |
| references/overlays.md | Toast, Modal, Slideover, Drawer, CommandPalette |
| references/composables.md | useToast, useOverlay, defineShortcuts, useScrollspy |
Usage Pattern
Load based on context:
- Installing Nuxt UI? → references/installation.md
- Customizing theme? → references/theming.md
- Component index → references/components.md
- Specific component → components/button.md, components/modal.md, etc.
- Building forms? → references/forms.md
- Using overlays? → references/overlays.md
- Using composables? → references/composables.md
DO NOT read all files at once. Load based on context.
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
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
<!-- app.vue - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
Resources
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
