nuxt-ui

Implement and customize NuxtUI v4.1+ components in Nuxt 4 projects.

4|Updated Nov 16, 2025
One-click install
npx skills add https://github.com/akornmeier/claude-config --skill nuxt-ui-akornmeier
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/akornmeier/claude-config/tree/main/skills/nuxt-ui
Command: npx skills add https://github.com/akornmeier/claude-config --skill nuxt-ui-akornmeier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend developers implement and tailor NuxtUI v4.1+ components within Nuxt 4 applications, ensuring consistent design and accessible UI across projects.

Core Features & Use Cases

  • Component implementation and customization with NuxtUI v4.1+
  • Theme configuration and design tokens management (colors, typography, spacing)
  • Composable utilities and accessibility best practices for performance and UX
  • Storybook integration and documentation generation to showcase components
  • Use Case: Build a themed UButton and UCard in a Nuxt 4 page with responsive layouts.

Quick Start

  1. Create a Nuxt 4 project and install NuxtUI
  2. Configure theme tokens in app.config.ts or nuxt.config.ts
  3. Import and compose NuxtUI components in a page or component

Frequently Asked Questions about nuxt-ui

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

FAQPage Schema
How do I implement and customize NuxtUI components in a Nuxt 4 project?

To implement NuxtUI components, configure your theme tokens in app.config.ts or nuxt.config.ts, then import and compose components like UButton and UCard directly within your Nuxt 4 pages to build responsive layouts.

How do I manage design tokens for theming NuxtUI v4.1+ components?

Manage design tokens for NuxtUI theming by defining colors, typography, and spacing configurations directly inside your app.config.ts or nuxt.config.ts file to ensure consistent styling across all components.

Does NuxtUI v4.1+ require TypeScript and specific configuration in Nuxt 4?

Yes, implementing NuxtUI v4.1+ requires a Nuxt 4 project with TypeScript support installed, alongside properly configured theme tokens in app.config.ts or nuxt.config.ts to ensure type-safe component integration.

Can I use Storybook to document NuxtUI components and manage accessibility?

Yes, you can integrate Storybook to generate documentation and showcase NuxtUI components, applying composable utilities and accessibility best practices to improve overall performance and user experience.

What is the best way to ensure accessible UI when building Nuxt 4 applications?

The best way to ensure accessible UI is by leveraging NuxtUI v4.1+ component guidance, utilizing built-in accessibility features and composable utilities alongside consistent design token configuration across your application.

Why are my NuxtUI theme tokens not applying to components in Nuxt 4?

NuxtUI theme tokens fail to apply if they are not properly configured in the app.config.ts or nuxt.config.ts file, or if the project lacks the required Nuxt 4 and TypeScript environment setup.