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.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
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)
For Vue component patterns: use vue skill
For Nuxt routing/server: use nuxt skill
| File | Topics |
|---|---|
| references/installation.md | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| references/components.md | Component index by category (125+ 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 |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
| 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
// 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>
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.
The English summary is being prepared. Showing the original description.
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.
The English summary is being prepared. Showing the original description.
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
The English summary is being prepared. Showing the original description.
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
The English summary is being prepared. Showing the original description.
Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel
The English summary is being prepared. Showing the original description.
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
The English summary is being prepared. Showing the original description.