skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

nuxt-ui

Installs and configures the Nuxt UI component library for Nuxt 4 projects.

Updated Jun 28, 2026
Search Tags:#vue#component library#tailwindcss#nuxt#nuxt-ui#ui kit#frontend scaffold
One-click install
npx skills add https://github.com/jason23452/my-skill --skill nuxt-ui-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-ui
Source: https://github.com/jason23452/my-skill/tree/main/frontend/ui-kit/nuxt-ui
Command: npx skills add https://github.com/jason23452/my-skill --skill nuxt-ui-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @nuxt/ui, tailwindcss, @iconify-json/lucide, and includes scripts (resource) components.

What problem does it solve? Setting up Nuxt UI in a Nuxt 4 project requires coordinating package installation, pnpm build-script allowlists, Nuxt module registration, and CSS imports, which is error-prone when done manually. ## Core Features & Use Cases - Dependency Installation: Detects the project's package manager (pnpm, npm, yarn, bun) from lockfiles and installs @nuxt/ui, tailwindcss, and the @iconify-json/lucide icon collection. - Config and CSS Bootstrap: Adds @nuxt/ui to nuxt.config modules and ensures the global CSS entry imports both Tailwind CSS and Nuxt UI without duplicating existing entries. - pnpm Build Allowlist: Maintains pnpm-workspace.yaml allowBuilds entries for packages like esbuild and vue-demi, extensible via OPENCODE_PNPM_ALLOW_BUILDS. - Integration Verification: Checks that dependencies, the Nuxt module registration, and CSS imports are all present. - Use Case: After scaffolding a Nuxt 4 app, run this skill to wire in the Nuxt UI kit with icons and theming ready for building dashboards, forms, and app shells. ## Quick Start Add Nuxt UI to my Nuxt 4 project and configure the module, CSS imports, and lucide icons.

Frequently Asked Questions about nuxt-ui

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

FAQPage Schema
How do I add Nuxt UI to a Nuxt 4 project?▼

Install @nuxt/ui and tailwindcss with your package manager, add @nuxt/ui to the modules array in nuxt.config, and import both tailwindcss and @nuxt/ui in your global CSS entry. This skill automates all of these steps with its bootstrap scripts.

How do I set up Nuxt UI icons locally?▼

Install the @iconify-json/lucide package so Nuxt UI's default lucide:* icons resolve locally through Nuxt Icon. If you configure a different icon collection, install the matching @iconify-json/<collection> package instead.

Does Nuxt UI work with npm, yarn, or bun instead of pnpm?▼

Yes, the install script detects the package manager from existing lockfiles such as pnpm-lock.yaml, package-lock.json, yarn.lock, or bun.lock and uses the matching install command. The pnpm allowBuilds step only runs when pnpm is detected.

Why do Nuxt UI builds fail with pnpm build scripts blocked?▼

Pnpm blocks dependency build scripts by default, which breaks packages like esbuild and vue-demi that Nuxt UI relies on. Add them to the allowBuilds section in pnpm-workspace.yaml, or pass extra names through the OPENCODE_PNPM_ALLOW_BUILDS environment variable.

Can I use Nuxt UI without a Nuxt framework scaffold?▼

No, this skill is a UI kit add-on that requires an existing Nuxt or Nuxt 4 project, such as one created by the nuxt4-creater framework skill. It only layers the UI kit on top and does not scaffold the application itself.

Related Skills

Explore More Software Engineering Skills→
lenneTechlenneTech

developing-lt-frontend

Develop lenne.tech Nuxt 4 frontends with TypeScript, Valibot forms, and generated API types.

Official
Advanced
chriswesttchriswestt

browse

Navigate and interact with web pages using a headless browser to verify UI state and behavior.

Community
Advanced
applewaveapplewave
1

phase-6-ui-integration

Automate UI implementation and API integration workflows connecting frontend components to backend services.

Community
Advanced
tiantangcao1980-webtiantangcao1980-web
4

tailwindcss

Compose utility-first CSS classes for React, Vue, Svelte, and vanilla projects.

Community
Intermediate