arch-nuxt-lite

Name: arch-nuxt-lite
Author: hairyf

github.com/hairyfDevelopment2698 installsUpdated 2w ago

About arch-nuxt-lite

arch-nuxt-lite is a lightweight Vite and Vue 3 starter for client-only single-page apps. This skill documents its structure and practices, including file-based routing, auto-imports, styling, and testing.

Key features

01File-based routing with unplugin-vue-router
02Auto-imported components and composables
03UnoCSS styling and icons
04VueUse composables
05Vitest component testing
06SPA deployment guidance for Netlify

Use cases

01Starting a simple client-only Vue app
02Adding typed file-based routes
03Writing component tests with Vitest

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

assets/

ci.yml

references/

best-practices-routing.md

core-app-structure.md

core-ci.md

core-eslint.md

core-overview.md

core-scripts.md

core-vite-config.md

features-components.md

features-composables.md

features-deploy.md

features-routing.md

features-testing.md

features-unocss.md

Details

From the project README

arch-nuxt-lite (Vitesse Lite) is the lightweight Vite + Vue 3 SPA starter: file-based routing via unplugin-vue-router, components and composables auto-import, UnoCSS, VueUse, and Vitest. No SSR, i18n, layouts, SSG, PWA, or Markdown. Prefer it for simple client-only apps; use arch-nuxt or Nuxt for SSR.

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

Recommended practices:

Prefer Vite + unplugin-vue-router for file-based routing; keep routes in src/pages
Use ~/ alias for src/ in imports
Use VueUse (useDark, useToggle, useCounter, etc.) and composables in src/composables; all auto-imported

Core References

Topic	Description	Reference
Overview	Project purpose, structure, stack, when to use	core-overview
App structure	Entry, RouterView, path alias, App.vue	core-app-structure
Vite config	defineConfig, plugins, alias, Vitest	core-vite-config
Scripts	build, dev, lint, typecheck, preview, test	core-scripts
CI	GitHub Actions — build, test, lint, typecheck matrix	core-ci
ESLint	@antfu/eslint-config, unocss, formatters, pnpm	core-eslint

Features

Topic	Description	Reference
Routing	unplugin-vue-router, file-based routes, useRoute/useRouter, typed params	features-routing
Components	unplugin-vue-components, auto-import, UnoCSS icons	features-components
Composables	unplugin-auto-import, composables dir, dark mode (useDark, useToggle)	features-composables
UnoCSS	uno.config.ts, shortcuts, presets, icons, web fonts	features-unocss
Testing	Vitest, jsdom, component tests with @vue/test-utils	features-testing
Deploy	Netlify, netlify.toml, SPA redirect	features-deploy

Best Practices

Topic	Description	Reference
Routing	File-based routing patterns, dynamic/catch-all routes	best-practices-routing

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 98
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.