Provides project-specific Nuxt and Vue guidance.
Install
mkdir -p .claude/skills/nuxt-onmax && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16515" && unzip -o skill.zip -d .claude/skills/nuxt-onmax && rm skill.zipInstalls to .claude/skills/nuxt-onmax
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Always-on Nuxt disambiguation layer for this project. Use it to choose the right Nuxt pack first, then switch to Vue or module guidance only when Nuxt no longer owns the abstraction.Key capabilities
- →Route to Nuxt packs for SSR, initial page load, or route-driven data
- →Route to Nuxt packs for page options, layout selection, or route middleware
- →Route to Nuxt packs for title, meta tags, canonical URLs, or OG data
- →Route to Vue Best Practices for component, composable, or SFC work
How it works
The skill first explores the project surface, then uses routing sections to load the smallest matching Nuxt pack. It directs to Vue guidance for component work, module authoring conventions for module tasks, or specific module entries for module-owned problems.
Inputs & outputs
When to use nuxt
- →Get guidance for Nuxt page meta
- →Apply module authoring conventions
- →Decide between useFetch and onMounted
About this skill
Nuxt Skill Index
This file keeps the highest-frequency Nuxt decisions in context. Use it to avoid generic Vue fallbacks, then route into the right Nuxt pack, Vue guidance, or module delta skill.
Monorepo Scope
This skill applies only to the playground subtree of this monorepo.
Treat files and tasks outside playground as out of scope unless the user explicitly redirects you there.
Activation Flow
- Explore the project first: inspect the real page, component, route, server handler, collection, or module surface you are changing.
- Use the routing sections in this file and load the smallest matching Nuxt pack.
- If the remaining work is mainly Vue component, composable, reactivity, or SFC work, open Vue Best Practices.
- If module authoring is part of the task, load Module Authoring Conventions before changing
defineNuxtModule, runtime extensions, hooks, or release scaffolding. - If an installed module owns the problem, open its entry under references/modules.
- Apply module guidance as delta-only rules inside that module's APIs, config, runtime behavior, and owned files.
High-Frequency Nuxt Decisions
- If the task touches SSR, initial page load, or route-driven data, prefer
useFetchoruseAsyncDatabeforeonMountedplus$fetch. - If the task changes page options, layout selection, route middleware, or page-level behavior, check
definePageMetabefore adding ad hoc wiring. - If the task changes title, meta tags, canonical URLs, or OG data, check
useHeadoruseSeoMetabefore page-meta or template markup. - If content lives in JSON or YAML records, or the UI needs generated docs navigation, choose data collections and collection-navigation primitives before manual assembly.
- If the UI surface is page chrome, a table, a form, a modal, a command palette, or a dropdown, prefer a Nuxt UI primitive before raw HTML or custom listeners.
- If runtime config, tokens, secrets, or privileged API calls are involved, keep them server-side and expose only a server route or the minimum public config.
- If hydration, browser-only APIs, time, randomness, or cookies are involved, use SSR-safe primitives first and isolate browser-only work behind
ClientOnlyoronMounted. - If the fix touches errors, fallback UI, or recovery flow, check both global and local surfaces before concluding the work is complete.
- If the solution looks correct but uses generic Vue or hand-rolled HTML, confirm Nuxt, Nuxt Content, or Nuxt UI does not already own that abstraction.
- If the task is module-specific, use the module entry and keep module guidance scoped; do not replace broad Nuxt rules with module-specific rules.
Precedence
- Repository-global instructions and required workflows win first.
- This file keeps the common Nuxt forks in context.
- Nuxt packs provide deeper framework guidance.
- Vue guidance covers component, composable, and SFC patterns after the Nuxt decision is settled.
- Module entries add delta-only guidance inside explicit module scope.
How to use this skill map
-
Explore the current surface first: page, layout, component, server handler, content collection, or module-owned file.
-
Load the first matching Nuxt pack from the routing table below.
-
If the remaining work is mainly Vue component or composable implementation, switch to Vue Best Practices.
-
Open deeper Nuxt packs only when the first pack points you there.
-
If an installed module is involved, open its entry under
references/modules. -
Copied skills go straight to their
SKILL.md; metadata-routed modules only expose docs and source links.
Common forks in the road
| Task shape or symptom | Load first | Why |
|---|---|---|
| SSR, initial page load, route params, or hydration-sensitive data | Data Fetching and SSR | Prefer useFetch or useAsyncData over setup-time $fetch or onMounted fetches. |
| Page options, route middleware, layout selection, title, meta tags, or OG data | Page Meta, Head, and Layout | Separate page behavior from document metadata and layout structure before editing. |
| A generic Vue fix or raw HTML implementation looks tempting | Abstraction Disambiguation | Check whether Nuxt, Nuxt Content, or Nuxt UI already owns the abstraction. |
The remaining work is mostly .vue components, composables, reactivity, or SFC structure | Vue Best Practices | Switch to Vue-specific guidance after the Nuxt ownership and routing decisions are already settled. |
Global errors, local fallback UI, clearError, showError, or recovery flows | Error Surfaces and Recovery | Nuxt error handling often needs both global and local surfaces to be correct. |
| Secrets, runtime config, privileged API calls, or server/client boundary confusion | Architecture Boundaries | Move sensitive logic server-side first, then pair with config and route rules as needed. |
| Before finishing a fix that spans multiple files or surfaces | Verification and Finish | Re-check paired surfaces and verify framework behavior, not only the visible output. |
Vue guidance
Use Vue Best Practices when the task is mainly Vue component, composable, reactivity, props/emits, or SFC work and Nuxt no longer owns the abstraction.
Start with these must-read Vue references:
All Nuxt packs
| Pack | Focus | Typical triggers |
|---|---|---|
| Abstraction Disambiguation | Choose Nuxt-owned abstractions before generic Vue, raw HTML, or ad hoc glue code. | A generic Vue or HTML fix looks plausible<br>You need to decide whether Nuxt, Nuxt Content, or Nuxt UI already owns the surface |
| Page Meta, Head, and Layout | Separate page behavior, document metadata, and layout structure before editing. | Pages, layouts, middleware, or page options<br>Title, meta tags, canonical URLs, or OG metadata |
| Error Surfaces and Recovery | Cover both global and local error boundaries and use the right recovery utilities. | Global error pages or local error boundaries<br>Recovery flows, clearError, showError, or fallback UI |
| Verification and Finish | Verify the intended framework behavior and re-check paired surfaces before concluding work. | The fix spans more than one surface<br>You are about to finish a Nuxt change and need to confirm the right abstraction |
| Data Fetching and SSR | Deduplication, payload correctness, and request-safe loading. | Pages, layouts, or composables fetching initial data<br>SSR-visible content or hydration-sensitive state |
| Hydration and SSR Consistency | SSR/CSR determinism, client-only boundaries, and mismatch prevention. | Hydration warnings or client-only rendering<br>State that differs between server and browser |
| Architecture Boundaries | Server-only secrets, request isolation, and safe shared abstractions. | Crossing server/client boundaries<br>Composable or utility architecture changes |
| Server Routes and Runtime Config | Runtime config exposure, env handling, and route-level contracts. | nuxt.config, runtime config, or env wiring<br>Server route config and public/private config exposure |
| Nitro and h3 Server Patterns | Handler contracts, caching, and edge-safe server behavior. | Server routes, middleware, Nitro plugins, or h3 handlers<br>API behavior, caching, or edge runtime concerns |
| Plugins and Runtime Boot | Plugin ordering, startup cost, and app/runtime initialization. | Plugins, app boot logic, or injected runtime helpers<br>Global runtime behavior changes |
| Performance and Rendering | Rendering strategy, payload cost, and lazy loading tradeoffs. | Performance regressions or rendering strategy changes<br>Link, asset, and bundle cost decisions |
| Module Authoring Conventions | Nuxt Kit patterns, module lifecycle, and ecosystem-safe authoring. | Writing or refactoring a Nuxt module<br>Module install/setup conventions |
| Migrations and Compatibility | Incremental upgrades, compatibility boundaries, and rollout safety. | Upgrades, deprecations, or breaking behavior changes<br>Compatibility fixes across Nuxt versions |
Module guides
Open the linked module entry first. Copied skills link straight to their SKILL.md; metadata-routed modules use a small docs/source router when no copied skill exists.
Resolved module skills
- @nuxt/ui
v4.5.1- Resolved module skill. Trust:official. Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Metadata-routed skills
- [@n
Content truncated.
When not to use it
- →When the task is outside the `playground` subtree of the monorepo
- →When a generic Vue or hand-rolled HTML solution is preferred over Nuxt abstractions
- →When module-specific rules are intended to replace broad Nuxt rules
Limitations
- →Applies only to the `playground` subtree of the monorepo
- →Prioritizes Nuxt primitives over generic Vue or raw HTML solutions
- →Module guidance is delta-only within that module's APIs
How it compares
This skill acts as a disambiguation layer, guiding the agent to the most appropriate Nuxt-specific guidance or Vue best practices based on the task's context, preventing generic fallbacks and ensuring Nuxt's abstractions are prioritized.
Compared to similar skills
nuxt side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nuxt (this skill) | 0 | 5mo | No flags | Intermediate |
| feature-slicing | 0 | 1mo | Review | Advanced |
| ai-model-web | 1 | 2mo | Review | Intermediate |
| moai-domain-frontend | 1 | 3mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by onmax
View all by onmax →You might also like
feature-slicing
ccheney
Proactively apply when creating new features/components/pages or setting up frontend project structure. Triggers on FSD, feature slicing, Feature-Sliced Design, frontend architecture, layer structure, module boundaries, scalable frontend, slice organization, public API, barrel exports, import rules,
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
perf-web-optimization
tech-leads-club
Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.
rdc-setup
reactive
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
astro
Anhvu1107
ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.