arch-nuxt

Name: arch-nuxt
Author: hairyf

github.com/hairyfDevelopment26100 installsUpdated 2w ago

About arch-nuxt

A skill set for building Nuxt 4 projects from a Vitesse-style starter. It documents the Vite-based stack, app structure, state, server APIs, and PWA setup.

Key features

01Nuxt 4 starter architecture
02File-based routing and layouts
03Pinia and composable patterns
04Server API setup
05PWA and UnoCSS configuration
06Data fetching and color mode

Use cases

01Starting a Nuxt 4 app with the described stack
02Implementing server API endpoints
03Configuring PWA features and styling

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/skills --skill arch-nuxt

After installing, type/arch-nuxtin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

references/

best-practices-page-meta.md

best-practices-routing.md

core-app-structure.md

core-constants.md

core-eslint.md

core-nuxt-config.md

core-overview.md

core-scripts.md

features-client-only.md

features-color-mode.md

features-components.md

features-composables.md

features-data-fetching.md

features-layouts.md

features-pinia-state.md

features-pwa.md

features-server-api.md

features-unocss.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 100
GitHub stars: 26

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.