From hairyf-skills-4
Vitesse-style Nuxt 4 starter with Vite, UnoCSS, Pinia, VueUse, PWA. Use when scaffolding or maintaining a Nuxt app with this stack.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin hairyf-skills-4This skill uses the workspace's default tool permissions.
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.
GENERATION.mdreferences/best-practices-page-meta.mdreferences/best-practices-routing.mdreferences/core-app-structure.mdreferences/core-constants.mdreferences/core-eslint.mdreferences/core-nuxt-config.mdreferences/core-overview.mdreferences/core-scripts.mdreferences/features-client-only.mdreferences/features-color-mode.mdreferences/features-components.mdreferences/features-composables.mdreferences/features-data-fetching.mdreferences/features-layouts.mdreferences/features-pinia-state.mdreferences/features-pwa.mdreferences/features-server-api.mdreferences/features-unocss.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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:
useState for SSR-shared state when appropriateapp/config/pwa.ts and spread it in nuxt.config.ts| 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 |
| 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 |
| Topic | Description | Reference |
|---|---|---|
| Routing | File-based routing, dynamic/catch-all routes | best-practices-routing |
| Page meta | definePageMeta, layout selection | best-practices-page-meta |