Nuxt Skill Hub
62
  • Claude Code
  • Codex
  • Cursor
  • Gemini

Teach your AI agent
the Nuxt way.

Install one skill or module. Your agent gets Nuxt best practices, module APIs, and project-specific guidance before it changes your code.

Check AI-written Nuxt changes with Doctor.
~/my-app

npx nuxi module add nuxt-skill-hub

ℹ Resolved 3 module skill sources in 412ms.

✔ Generated nuxt-my-app skill for claude-code, codex

.claude/skills/nuxt-my-app/

SKILL.mdrouter

references/

nuxt/rules/data-fetching-ssr.md, plugins.md, …

vue/Vue best practices

modules/@nuxt/ui, @nuxt/content, …

SKILL.md picks the smallest guide for the task, so your agent reads data-fetching-ssr.md before it writes useFetch.

7 packs routed3 module skills0 files to commit

SKILL.md
@nuxt/ui
@nuxt/content
@nuxt/image
@nuxtjs/i18n
@nuxt/ui

@nuxt/ui

npx nuxt module add @nuxt/ui

@nuxt/content

@nuxt/content

npx nuxt module add @nuxt/content

@nuxt/image

@nuxt/image

npx nuxt module add @nuxt/image

@nuxtjs/i18n

@nuxtjs/i18n

npx nuxt module add @nuxtjs/i18n

@pinia/nuxt

@pinia/nuxt

npx nuxt module add @pinia/nuxt

@vueuse/nuxt

@vueuse/nuxt

npx nuxt module add @vueuse/nuxt

How it works

Keep prompting.
Your agent gets the Nuxt context.

  • A single root skill becomes the entry point for your agent
  • Generated from your Nuxt stack
  • Agents already know how to search your codebase. Learn more
  • Skill name matches your project: nuxt-{package.name}
Claude Code
Cursor
Gemini
Codex

Doctor

Catch the AI slop your agents ship.

Doctor scans your project before review and flags framework bugs agents often miss.

Hydration

SSR drift

Secrets

public config

Vite Doctor

report ready

Check diagnosis View Doctor skill
~/your-nuxt-app

$pnpm dlx vite-doctor . --rules nuxt/hydration

loaded

nuxt.config.ts

scanned

38 Vue components

matched

15 Nuxt rules

nuxt/hydration/no-client-conditional-in-template

app/components/UserMenu.vue:18:5

Browser-only state changes the server-rendered markup.

nuxt/runtime/no-secret-in-public-config

nuxt.config.ts:42:13

Move private keys out of public runtime config.

suggested agent action

Apply the narrow fix, rerun Doctor, then discharge the PR with the report attached.

2 high13 warnings report ready

What's inside

What your agent learns

General agents can write Vue, but they still miss Nuxt conventions, module APIs, and common pitfalls. Skills package that context into files your agent can read before it edits code.

core

One Router Skill

A single SKILL.md sends each task to the smallest relevant guide, so agents read one pack instead of everything

core

Nuxt Primitives First

Before editing, agents check whether Nuxt, Nuxt UI, or Nuxt Content already owns the surface instead of hand-rolling it

core

Nuxt Rule Packs

Data fetching, hydration, page meta, errors, Nitro, plugins, and performance. Each rule says when it applies and how to verify it

Browse the packs
core

Vue Guidance

A sibling Vue skill covers SFC structure, reactivity, props/emits, and composables once the Nuxt decision is settled

Vue skill
modules

Module Skills

Installed modules add their own skills from the package, its repository, or its docs site, scoped to that module

meta

Docs Fallback

When a module ships no skill, a small generated router points agents to its official docs and source

Playground

Inspect the generated skill

Toggle modules to see how the skill changes as your stack changes.

Modules

2 active
ui
content
hub
.claude/skills/nuxt-my-app
Select a file

Configuration

Configure it when you need control

Most projects work with the defaults. Configure skillHub in nuxt.config.ts when you need a custom skill name, explicit agent targets, extra module-author guidance, a different generation policy, or remote lookup control.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-skill-hub'],

  skillHub: {
    targets: ['claude-code'],
    generationMode: 'prepare',
    remote: {
      refresh: false,
      timeoutMs: 1500,
      concurrency: 8,
      githubHeuristics: false,
      timings: false,
    },
  }
})

Pipeline

How the skill gets built

On every nuxi prepare, nuxt-skill-hub scans your project, resolves the best available sources, and writes agent-ready files.

1Scan

Find agent folders

Claude, Cursor, Gemini, and Codex targets

Read your stack

Nuxt modules, layers, and extra packages

Check .well-known paths

Standard discovery for docs-published skills

2Resolve

Prefer packaged skills

Use skill files shipped with the package

Fall back to GitHub

Load the module repository when needed

Use curated mappings

Last-resort community skill map

3Write

Write agent-ready files

One entry skill plus module guidance per agent