nuxt-ui

Build styled Nuxt 4 and Vue 3 interfaces with @nuxt/ui v4 components.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/Guibibi/budgetpulse --skill nuxt-ui-guibibi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/Guibibi/budgetpulse/tree/main/.agents/skills/nuxt-ui
Command: npx skills add https://github.com/Guibibi/budgetpulse --skill nuxt-ui-guibibi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tsx, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you build polished, accessible user interfaces in Nuxt without manually stitching together every component pattern, theme token, and overlay behavior.

Core Features & Use Cases

  • Component Implementation: Create Nuxt UI components such as buttons, cards, tables, forms, dialogs, and navigation elements.
  • Forms and Validation: Build login flows, settings forms, file upload experiences, and date or time inputs with validation support.
  • Theming and Overlays: Configure Tailwind Variants theming, semantic colors, toast notifications, modals, drawers, command palettes, and other app-level UI primitives.
  • Use Case: When a product team needs a new dashboard page with searchable data tables, a modal editor, and validated inputs, this Skill provides the right component guidance and usage patterns.

Quick Start

Ask for a Nuxt UI implementation plan for the screen you want to build, including the components, props, and theming choices needed.

Frequently Asked Questions about nuxt-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible Nuxt 4 interfaces with Tailwind Variants theming?

Build accessible Nuxt 4 interfaces by applying @nuxt/ui v4 components with Tailwind Variants theming and semantic colors. This provides production-ready UI composition for dashboards, auth flows, and admin panels without manually stitching component patterns.

How do I add validation patterns to Vue 3 forms and file upload experiences?

Add validation patterns to Vue 3 forms using @nuxt/ui v4 components to build login flows, settings forms, and file upload experiences. The Skill provides validated inputs, date or time inputs, and composable workflows for data-heavy interfaces.

Can I use Nuxt UI components for modals, drawers, and command palettes?

You can use Nuxt UI components for modals, drawers, and command palettes as app-level UI primitives. The Skill configures overlay behaviors and toast notifications to create polished, accessible user interfaces in Nuxt.

What's the best way to create a dashboard with searchable data tables in Nuxt?

Create a dashboard with searchable data tables in Nuxt by requesting an implementation plan for your screen. The Skill supplies the necessary component guidance, props, and usage patterns for accessible, production-ready data-heavy interfaces.

Does this Nuxt UI Skill require component selection and composable integration guidance?

This Skill requires component selection, validation patterns, Tailwind Variants configuration, and overlay or composable integration guidance. It applies to content sites and admin panels needing accessible, production-ready UI composition in Nuxt.