How do I install the Arch Nuxt skill?

Run npx skillmds@latest add hairyf-skills/arch-nuxt in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Arch Nuxt safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Arch Nuxt?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Arch Nuxt free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Arch Nuxt?

hairyf (@hairyf-skills) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Arch Nuxt by hairyf-skills — Agent Skill

Name: Arch Nuxt
Rating: 4.666666666666667 (3 reviews)
Author: hairyf

File contents

arch-nuxt is the Vitesse-style starter for Nuxt 4: SSR, file-based routing, auto-imports, and an opinionated stack (Vite, UnoCSS, Pinia, VueUse, ColorMode, VitePWA). It provides a minimal, production-ready setup: app/ structure, layouts, composables, Pinia store with HMR, server API, PWA config, and UnoCSS. Prefer Vite-powered Nuxt; do not consider webpack or other bundlers.

The skill is based on vitesse-nuxt (arch-nuxt source), generated at 2026-01-30.

Recommended practices:

Prefer Vite-powered Nuxt; skip webpack and other bundlers
Use Pinia for global/client state; use useState for SSR-shared state when appropriate
Keep PWA config in app/config/pwa.ts and spread it in nuxt.config.ts

Core References

Topic	Description	Reference
Overview	Project purpose, structure, stack, when to use	core-overview
Nuxt config	defineNuxtConfig, modules, app head, nitro, experimental	core-nuxt-config
App structure	app/, app.vue, NuxtLayout, NuxtPage	core-app-structure
Scripts	build, dev, generate, preview, typecheck, dev:pwa	core-scripts
Constants	app/constants, appName, appDescription	core-constants
ESLint	@antfu/eslint-config, Nuxt append	core-eslint

Features

Topic	Description	Reference
Layouts	Layout system, definePageMeta layout	features-layouts
Composables	useCount, useState, auto-import	features-composables
Pinia state	useUserStore, defineStore, HMR	features-pinia-state
Server API	defineEventHandler, server/api	features-server-api
PWA	VitePWA config, manifest, workbox, dev PWA	features-pwa
UnoCSS	uno.config.ts, shortcuts, presets, icons	features-unocss
ColorMode	useColorMode, DarkToggle, theme-color meta	features-color-mode
Components	Auto-import, Counter, Footer, NuxtLink	features-components
Client-only	ClientOnly, Suspense, useOnline, fallback	features-client-only
Data fetching	useFetch, useTimeAgo, async component data	features-data-fetching

Best Practices

Topic	Description	Reference
Routing	File-based routing, dynamic/catch-all routes	best-practices-routing
Page meta	definePageMeta, layout selection	best-practices-page-meta

---name: arch-nuxtdescription: Vitesse-style Nuxt 4 starter with Vite, UnoCSS, Pinia, VueUse, PWA. Use when scaffolding or maintaining a Nuxt app with this stack.--- arch-nuxt is the **Vitesse-style starter for Nuxt 4**: SSR, file-based routing, auto-imports, and an opinionated stack (Vite, UnoCSS, Pinia, VueUse, ColorMode, VitePWA). It provides a minimal, production-ready setup: `app/` structure, layouts, composables, Pinia store with HMR, server API, PWA config, and UnoCSS. Prefer Vite-powered Nuxt; do not consider webpack or other bundlers. > The skill is based on vitesse-nuxt (arch-nuxt source), generated at 2026-01-30. **Recommended practices:** - Prefer Vite-powered Nuxt; skip webpack and other bundlers - Use Pinia for global/client state; use `useState` for SSR-shared state when appropriate - Keep PWA config in `app/config/pwa.ts` and spread it in `nuxt.config.ts` ## Core References | Topic | Description | Reference | |-------|-------------|-----------| | Overview | Project purpose, structure, stack, when to use | [core-overview](references/core-overview.md) | | Nuxt config | defineNuxtConfig, modules, app head, nitro, experimental | [core-nuxt-config](references/core-nuxt-config.md) | | App structure | app/, app.vue, NuxtLayout, NuxtPage | [core-app-structure](references/core-app-structure.md) | | Scripts | build, dev, generate, preview, typecheck, dev:pwa | [core-scripts](references/core-scripts.md) | | Constants | app/constants, appName, appDescription | [core-constants](references/core-constants.md) | | ESLint | @antfu/eslint-config, Nuxt append | [core-eslint](references/core-eslint.md) | ## Features | Topic | Description | Reference | |-------|-------------|-----------| | Layouts | Layout system, definePageMeta layout | [features-layouts](references/features-layouts.md) | | Composables | useCount, useState, auto-import | [features-composables](references/features-composables.md) | | Pinia state | useUserStore, defineStore, HMR | [features-pinia-state](references/features-pinia-state.md) | | Server API | defineEventHandler, server/api | [features-server-api](references/features-server-api.md) | | PWA | VitePWA config, manifest, workbox, dev PWA | [features-pwa](references/features-pwa.md) | | UnoCSS | uno.config.ts, shortcuts, presets, icons | [features-unocss](references/features-unocss.md) | | ColorMode | useColorMode, DarkToggle, theme-color meta | [features-color-mode](references/features-color-mode.md) | | Components | Auto-import, Counter, Footer, NuxtLink | [features-components](references/features-components.md) | | Client-only | ClientOnly, Suspense, useOnline, fallback | [features-client-only](references/features-client-only.md) | | Data fetching | useFetch, useTimeAgo, async component data | [features-data-fetching](references/features-data-fetching.md) | ## Best Practices | Topic | Description | Reference | |-------|-------------|-----------| | Routing | File-based routing, dynamic/catch-all routes | [best-practices-routing](references/best-practices-routing.md) | | Page meta | definePageMeta, layout selection | [best-practices-page-meta](references/best-practices-page-meta.md) |

Frequently asked questions

Arch Nuxt