| 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.mjsapp/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.
