🎯

nuxt-ui

🎯Skill

from onmax/nuxt-skills

What it does

Component library skill for Vue 3 and Nuxt 4+ built on Reka UI, Tailwind CSS v4, and Tailwind Variants, covering @nuxt/ui v4 components like Button, Modal, Form, Table with theming, validation, and composables.

Overview

Nuxt UI is a Claude Code skill that provides guidance for building styled user interfaces with @nuxt/ui v4, a component library built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants. It covers 125+ ready-to-use components including Button, Modal, Form, Table, and provides theming, validation, overlay, and composable documentation.

Key Features

125+ Components - Comprehensive component library indexed by category with ready-to-use Button, Card, Table, Form, Modal, Toast, CommandPalette, and more
Tailwind Variants Theming - Customize themes through semantic colors, CSS variables, app.config.ts, and Tailwind Variants for consistent design across the application
Form Validation - Built-in form components with Zod and Valibot validation support and useFormField composable for field-level state management
Overlay System - Toast, Modal, Slideover, Drawer, and CommandPalette overlays with useToast and useOverlay composables
Progressive Loading - Reference files organized by task (installation, theming, components, forms, overlays, composables) with guidance to load only what is relevant to the current task

Who is this for?

This skill is designed for Nuxt and Vue developers building user interfaces with @nuxt/ui v4 who need AI-assisted component usage, theming, and form validation guidance. It is ideal for teams that want to rapidly build polished UIs using pre-built components with proper Tailwind CSS integration.

📦

Same repository

onmax/nuxt-skills(38 items)

nuxt-ui

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add onmax/nuxt-skills --skill nuxt-ui

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add onmax/nuxt-skills --skill nuxt-ui

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/nuxt-ui/SKILL.md

SKILL.md

1,566Installs

496

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository10

🎯

reka-ui🎯Skill

Agent skills for Nuxt.js development, providing AI assistants with specialized knowledge for building Nuxt applications and modules.

🎯

nuxt🎯Skill

Progressive guidance for Nuxt 4+ projects (v4.3+) providing server routes, file-based routing, middleware patterns, Nuxt-specific composables, h3 v1 helpers (validation, WebSocket, SSE), and nitropack v2 patterns.

🎯

vue🎯Skill

Agent skills for Nuxt.js development, providing AI assistants with specialized knowledge for building Nuxt applications and modules.

🎯

vueuse🎯Skill

Agent skills for Nuxt.js development, providing AI assistants with specialized knowledge for building Nuxt applications and modules.

🎯

motion🎯Skill

Animation library skill for Vue 3 and Nuxt providing Motion Vue (motion-v) component API, gesture animations, scroll-linked effects, layout transitions, and spring physics with minimal bundle size.

🎯

ts-library🎯Skill

Patterns for authoring high-quality TypeScript libraries covering project setup, package exports (dual CJS/ESM), build tooling (tsdown/unbuild), API design patterns, type inference, testing with vitest, and release workflows.

🎯

document-writer🎯Skill

Writing guidance for blog posts and documentation following Nuxt ecosystem patterns, covering active voice style, content structure, and MDC component usage while overriding brevity rules for proper grammar.

🎯

nuxt-seo🎯Skill

Nuxt SEO meta-module covering robots.txt, sitemap.xml generation, dynamic OG image creation, JSON-LD structured data (schema.org), breadcrumbs, and canonical URL configuration.

🎯

nuxt-modules🎯Skill

Guide for creating Nuxt modules that extend framework functionality, covering defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation for both published npm and local project modules.

🎯

nuxt-content🎯Skill

Agent skills for Nuxt.js development, providing AI assistants with specialized knowledge for building Nuxt applications and modules.