nuxt-ui

name	nuxt-ui
description	Nuxt UI kit skill for Nuxt 4 frontends. Use when a Greenfield or existing Nuxt project should use the official Nuxt UI component library, when the user asks for a Nuxt-compatible UI kit, or when adding Nuxt UI components, theming, templates, icons, forms, overlays, navigation, dashboards, docs, SaaS, or app shell UI. Requires a Nuxt/Nuxt 4 project such as the nuxt4-creater framework skill.

Nuxt UI

OpenCode Greenfield Bootstrap Metadata

This skill is a UI kit add-on for Nuxt projects. Select it after a Nuxt framework scaffold such as nuxt4-creater.

{
  "role": "frontend",
  "category": "ui-kit",
  "uiKit": "nuxt-ui",
  "frameworks": ["nuxt", "nuxt4"],
  "requiresPrimarySkills": ["nuxt4-creater"],
  "order": 30,
  "packageManager": "node",
  "scaffoldCommand": [
    "if test -f .opencode/skills/nuxt-ui/scripts/bootstrap-00-install.cjs; then node .opencode/skills/nuxt-ui/scripts/bootstrap-00-install.cjs; else node ${OPENCODE_PROJECT_SKILLS_PRESEEDED_DIR:-/app/.opencode/skills}/nuxt-ui/scripts/bootstrap-00-install.cjs; fi",
    "if test -f .opencode/skills/nuxt-ui/scripts/nuxt-ui-bootstrap.cjs; then node .opencode/skills/nuxt-ui/scripts/nuxt-ui-bootstrap.cjs; else node ${OPENCODE_PROJECT_SKILLS_PRESEEDED_DIR:-/app/.opencode/skills}/nuxt-ui/scripts/nuxt-ui-bootstrap.cjs; fi"
  ],
  "verificationCommands": [
    "if test -f .opencode/skills/nuxt-ui/scripts/verify-build.cjs; then node .opencode/skills/nuxt-ui/scripts/verify-build.cjs; else node ${OPENCODE_PROJECT_SKILLS_PRESEEDED_DIR:-/app/.opencode/skills}/nuxt-ui/scripts/verify-build.cjs; fi"
  ]
}

Usage

Use Nuxt UI when the selected frontend framework is Nuxt or Nuxt 4 and the project needs a production-ready Vue/Nuxt component system.

• Install @nuxt/ui, tailwindcss, and the local Nuxt UI icon collection @iconify-json/lucide with the project's existing package manager.
• Keep Nuxt UI default lucide:* icons resolvable locally through Nuxt Icon so client and server icon bundles build from installed packages.
• If the project configures Nuxt UI to use another icon collection, install the matching @iconify-json/<collection> package during the same bootstrap pass.
• Ensure pnpm allowBuilds includes Nuxt/Nuxt UI build-script packages before install, including vue-demi. For future packages, pass extra names through OPENCODE_PNPM_ALLOW_BUILDS or script arguments instead of adding project-specific logic.
• Add @nuxt/ui to nuxt.config.* modules.
• Ensure the global CSS imports both Tailwind CSS and Nuxt UI.
• Keep Nuxt UI as the UI kit layer for Nuxt projects.

Bootstrap

The bundled script scripts/nuxt-ui-bootstrap.cjs updates:

• nuxt.config.ts, nuxt.config.js, or nuxt.config.mjs
• app/assets/css/main.css

It preserves existing config where possible and only adds missing Nuxt UI entries.

Verification

Framework scaffold skills own full build verification. Nuxt UI verification checks integration state:

• @nuxt/ui, tailwindcss, nuxt, and @iconify-json/lucide are present in package.json.
• @nuxt/ui is present in nuxt.config.* modules.
• The Nuxt CSS entry imports Tailwind CSS and Nuxt UI.