Experimental

nuxt-skill-hub

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.

Works with your AI agent

SKILL.md

a11y

npx nuxt module add @nuxt/a11y

algolia

npx nuxt module add @nuxtjs/algolia

ant-design-vue

npx nuxt module add @ant-design-vue/nuxt

aos

npx nuxt module add nuxt-aos

api-party

npx nuxt module add nuxt-api-party

api-shield

npx nuxt module add nuxt-api-shield

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 diagnosis ready

$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

Always-on Index

Keeps agents aligned with your Nuxt version and installed modules before they dive deeper

core

Disambiguation Packs

Focused Nuxt packs help agents pick the right framework API before they fall back to generic Vue patterns

Nuxt best practices

core

Vue Guidance

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

Vue skill

core

Server & SSR

Data fetching, hydration safety, runtime config, Nitro, and request boundaries where Nuxt-specific mistakes compound quickly

modules

Module Skills

Each module adds scoped guidance on top of the Nuxt packs instead of replacing broad framework rules

Static Upstream Routing

When a module lacks a shipped skill, generated wrappers route agents to official docs and repo links

Playground

Inspect the generated skill

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

Modules

2 active

content

hub

Module authoring

Add module author guidance to the preview.

.claude/skills/nuxt

Select a file

SKILL.md

Nuxt Skill Router

Use this skill to make the Nuxt ownership decision first, then route to the smallest relevant Nuxt, Vue, or module guide.

Loading rules

Repository-global instructions and required workflows win first.
Inspect the exact owned surface first: page, layout, component, server handler, collection, config file, or module-owned file.
Load one matching guide from the routing table below.
Switch to Vue Best Practices only when Nuxt no longer owns the abstraction.
Use module entries only inside module-owned APIs, config, runtime behavior, and files.
Open additional guides only when the first guide points you there or the task clearly crosses boundaries.

Routing

Load one matching guide first. Open more guides only when the first guide points you there or the task clearly crosses boundaries.

Task shape or symptom	Open first
SSR, initial page load, route params, or data fetched for first render	Data Fetching and SSR
Hydration warnings, `ClientOnly`, browser-only APIs, time/randomness, or SSR/CSR mismatch	Hydration and SSR Consistency
Page options, middleware, layout selection, title, meta tags, canonical URLs, or OG data	Page Meta, Head, and Layout
`nuxt.config.*`, `runtimeConfig`, env wiring, or public/private config exposure	Server Routes and Runtime Config
`server/api/`, `server/routes/`, `defineEventHandler`, route rules, caching, or Nitro plugins	Nitro and h3 Server Patterns
Plugins, injections, app boot logic, or global runtime initialization	Plugins and Runtime Boot
Secrets, privileged API calls, request isolation, or server/client boundary confusion	Architecture Boundaries
Performance regressions, rendering strategy, lazy loading, or payload/bundle cost	Performance and Rendering
Upgrades, deprecations, compatibility fixes, or version-boundary work	Migrations and Compatibility
A generic Vue or raw HTML fix looks plausible	Abstraction Disambiguation
The remaining work is mostly components, composables, reactivity, props/emits, or SFC structure	Vue Best Practices
Global/local errors, `clearError`, `showError`, or recovery flows	Error Surfaces and Recovery

Routing examples

"This page fetches twice on first load" → Data Fetching and SSR
"Why do I get a hydration mismatch from Date.now()?" → Hydration and SSR Consistency
"Change canonical URL and OG tags" → Page Meta, Head, and Layout
"Expose only the public runtimeConfig key" → Server Routes and Runtime Config
"This server/api handler cache or route rule is wrong" → Nitro and h3 Server Patterns
"This modal/table/dropdown was hand-built in raw HTML" → Abstraction Disambiguation
"clearError is not behaving as expected" → Error Surfaces and Recovery
"Should this secret live in runtime config or client code?" → Architecture Boundaries

Module guides

Module guidance exists for installed packages. Keep it scoped to module-owned APIs, config, runtime behavior, plugins, composables, components, hooks, and owned files.

Inventory: Module guide index
Coverage: 2 resolved

Finish

For multi-surface changes or final verification, open Verification and Finish.

Verify paired surfaces when relevant: page/head, server/client, global/local.
Verify framework behavior, not only visible output.
Keep module guidance scoped to the owning module.

Generated by nuxt-skill-hub. Do not edit this file manually.

.claude/skills/nuxt

SKILL.md

Render MD

Source

Nuxt Skill Router

Use this skill to make the Nuxt ownership decision first, then route to the smallest relevant Nuxt, Vue, or module guide.

Loading rules

Repository-global instructions and required workflows win first.
Inspect the exact owned surface first: page, layout, component, server handler, collection, config file, or module-owned file.
Load one matching guide from the routing table below.
Switch to Vue Best Practices only when Nuxt no longer owns the abstraction.
Use module entries only inside module-owned APIs, config, runtime behavior, and files.
Open additional guides only when the first guide points you there or the task clearly crosses boundaries.

Routing

Load one matching guide first. Open more guides only when the first guide points you there or the task clearly crosses boundaries.

Task shape or symptom	Open first
SSR, initial page load, route params, or data fetched for first render	Data Fetching and SSR
Hydration warnings, `ClientOnly`, browser-only APIs, time/randomness, or SSR/CSR mismatch	Hydration and SSR Consistency
Page options, middleware, layout selection, title, meta tags, canonical URLs, or OG data	Page Meta, Head, and Layout
`nuxt.config.*`, `runtimeConfig`, env wiring, or public/private config exposure	Server Routes and Runtime Config
`server/api/`, `server/routes/`, `defineEventHandler`, route rules, caching, or Nitro plugins	Nitro and h3 Server Patterns
Plugins, injections, app boot logic, or global runtime initialization	Plugins and Runtime Boot
Secrets, privileged API calls, request isolation, or server/client boundary confusion	Architecture Boundaries
Performance regressions, rendering strategy, lazy loading, or payload/bundle cost	Performance and Rendering
Upgrades, deprecations, compatibility fixes, or version-boundary work	Migrations and Compatibility
A generic Vue or raw HTML fix looks plausible	Abstraction Disambiguation
The remaining work is mostly components, composables, reactivity, props/emits, or SFC structure	Vue Best Practices
Global/local errors, `clearError`, `showError`, or recovery flows	Error Surfaces and Recovery

Routing examples

"This page fetches twice on first load" → Data Fetching and SSR
"Why do I get a hydration mismatch from Date.now()?" → Hydration and SSR Consistency
"Change canonical URL and OG tags" → Page Meta, Head, and Layout
"Expose only the public runtimeConfig key" → Server Routes and Runtime Config
"This server/api handler cache or route rule is wrong" → Nitro and h3 Server Patterns
"This modal/table/dropdown was hand-built in raw HTML" → Abstraction Disambiguation
"clearError is not behaving as expected" → Error Surfaces and Recovery
"Should this secret live in runtime config or client code?" → Architecture Boundaries

Module guides

Module guidance exists for installed packages. Keep it scoped to module-owned APIs, config, runtime behavior, plugins, composables, components, hooks, and owned files.

Inventory: Module guide index
Coverage: 2 resolved

Finish

For multi-surface changes or final verification, open Verification and Finish.

Verify paired surfaces when relevant: page/head, server/client, global/local.
Verify framework behavior, not only visible output.
Keep module guidance scoped to the owning module.

Generated by nuxt-skill-hub. Do not edit this file manually.

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.

OptionTypeDefaultDescription

skillNamestringautoCustom skill name. Defaults to nuxt-{package.name}.

targetsSkillHubTarget[][]Optional explicit agent targets. Leave empty to auto-detect installed agents.

moduleAuthoringbooleanfalseAdds module-author guidance on top of the default Nuxt app skill.

generationMode'prepare' | 'manual'prepareControls when the full generated skill tree is refreshed inside Nuxt buildDir.

remoteboolean | objectenabledControls remote module skill lookup, concurrency, cache refresh, timing logs, timeout, and .well-known context budgets.

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

Teach your AI agentThe Nuxt way.

Keep prompting.Your agent gets the Nuxt context.

Catch the AI slop your agents ship.

What your agent learns

Always-on Index

Disambiguation Packs

Vue Guidance

Server & SSR

Module Skills

Static Upstream Routing

Inspect the generated skill

Nuxt Skill Router

Loading rules

Routing

Routing examples

Module guides

Finish

Nuxt Skill Router

Loading rules

Routing

Routing examples

Module guides

Finish

Configure it when you need control

How the skill gets built

Teach your AI agent
The Nuxt way.

Keep prompting.
Your agent gets the Nuxt context.