nuxt-modules — Claude Code skill: what it does, how to install
Guides the creation of Nuxt modules, covering local directory extensions, npm package publication, runtime injections, and CI/CD automation.
npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-codeWhat nuxt-modules does
The skill guides Nuxt module development using defineNuxtModule patterns and Nuxt Kit utilities. It establishes a project layout separating the entry point src/module.ts, injected runtime features (components, composables, plugins, server), and an interactive playground/ directory for live verification.
Guidance is split into dedicated files: development.md for anatomy and hooks, testing-and-publishing.md for E2E testing and npm releases, and ci-workflows.md for pipeline templates. The skill explicitly directs the agent not to load all reference files at once, preventing context overflow.
Module scaffolding relies on npx nuxi init -t module <name>, and works directly alongside companion guides for nuxt and vue runtime patterns.
What it helps with
- structure local Nuxt modules inside the
modules/directory - inject runtime composables, plugins, and server routes via Nuxt Kit
- configure E2E testing setups using test fixtures
- automate npm publishing and CI/CD pipelines for Nuxt packages
Example prompts for the agent
- Help me build a local Nuxt module that registers runtime composables and server middleware
- How do I set up E2E tests for my Nuxt module using test fixtures?
- Generate a CI/CD workflow to test and publish a Nuxt module to npm
How to install nuxt-modules
1Skills CLI (Vercel)
npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-code2Manually: put the files in place
~/.claude/skills/nuxt-modules/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/nuxt-modules/
1Skills CLI (Vercel)
npx skills add onmax/nuxt-skills --skill nuxt-modules -a codex2Manually: put the files in place
.agents/skills/nuxt-modules/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add onmax/nuxt-skills --skill nuxt-modules -a cursor2Manually: put the files in place
.cursor/skills/nuxt-modules/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install onmax/nuxt-skills nuxt-modules2Manually: put the files in place
.github/skills/nuxt-modules/SKILL.md1Skills CLI (Vercel)
npx skills add onmax/nuxt-skills --skill nuxt-modules -a gemini-cli2Platform CLI
gemini skills install https://github.com/onmax/nuxt-skills --path skills/nuxt-modulesManually: put the files in place
.devin/skills/nuxt-modules/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add onmax/nuxt-skills --skill nuxt-modules -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about nuxt-modules
How to install nuxt-modules in Claude Code?
Run npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-code.
What module types does nuxt-modules cover?
It covers published npm packages (@nuxtjs/, nuxt-), local extensions in the modules/ directory, and inline hooks placed in nuxt.config.ts.
What reference guides are included in the skill?
It includes development.md for Kit utilities and hooks, testing-and-publishing.md for E2E tests and npm releases, and ci-workflows.md for CI/CD templates.
Source text
SKILL.md · MIT
--- name: nuxt-modules description: "Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation." license: MIT --- # Nuxt Module Development Guide for creating Nuxt modules that extend framework functionality. **Related skills:** `nuxt` (basics), `vue` (runtime patterns) ## Quick Start ```bash npx nuxi init -t module my-module cd my-module && npm install npm run dev # Start playground npm run dev:build # Build in watch mode npm run test # Run tests ``` ## Available Guidance - **[references/development.md](references/development.md)** - Module anatomy, defineNuxtModule, Kit utilities, hooks - **[references/testing-and-publishing.md](references/testing-and-publishing.md)** - E2E testing, best practices, releasing, publishing - **[references/ci-workflows.md](references/ci-workflows.md)** - Copy-paste CI/CD workflow templates ## Loading Files **Consider loading these reference files based on your task:** - [ ] [references/development.md](references/development.md) - if building module features, using defineNuxtModule, or working with Kit utilities - [ ] [references/testing-and-publishing.md](references/testing-and-publishing.md) - if writing E2E tests, publishing to npm, or following best practices - [ ] [references/ci-workflows.md](references/ci-workflows.md) - if setting up CI/CD workflows for your module **DO NOT load all files at once.** Load only what's relevant to your current task. ## Module Types | Type | Location | Use Case | | --------- | ---------------- | -------------------------------- | | Published | npm package | `@nuxtjs/`, `nuxt-` distribution | | Local | `modules/` dir | Project-specific extensions | | Inline | `nuxt.config.ts` | Simple one-off hooks | ## Project Structure ``` my-module/ ├── src/ │ ├── module.ts # Entry point │ └── runtime/ # Injected into user's app │ ├── components/ │ ├── composables/ │ ├── plugins/ │ └── server/ ├── playground/ # Dev testing └── test/fixtures/ # E2E tests ``` ## Resources - [Module Guide](https://nuxt.com/docs/guide/going-further/modules) - [Nuxt Kit](https://nuxt.com/docs/api/kit) - [Module Starter](https://github.com/nuxt/starter/tree/module)
© onmax · MIT · onmax/nuxt-skills
