nuxt

Name: nuxt
Author: hairyf

github.com/hairyfDevelopment26101 installsUpdated 4w ago

About nuxt

A Nuxt 3.x skill for developers building full-stack Vue applications. It covers project structure, routing, data fetching, rendering, server features, modules, and deployment.

Key features

01Project structure and configuration
02Routing and data fetching
03Auto-imports and built-in components
04State management and server routes
05Rendering modes and deployment
06Modules, layers, and lifecycle hooks

Use cases

01Set up and configure a Nuxt project
02Implement routes and fetch data
03Choose rendering and deployment approaches

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

references/

advanced-hooks.md

advanced-layers.md

advanced-module-authoring.md

best-practices-data-fetching.md

best-practices-ssr.md

core-cli.md

core-config.md

core-data-fetching.md

core-deployment.md

core-directory-structure.md

core-modules.md

core-routing.md

features-components-autoimport.md

features-components.md

features-composables.md

features-server.md

features-state.md

rendering-modes.md

Details

From the project README

Nuxt is a full-stack Vue framework that provides server-side rendering, file-based routing, auto-imports, and a powerful module system. It uses Nitro as its server engine for universal deployment across Node.js, serverless, and edge platforms.

The skill is based on Nuxt 3.x, generated at 2026-01-28.

Core

Topic	Description	Reference
Directory Structure	Project folder structure, conventions, file organization	core-directory-structure
Configuration	nuxt.config.ts, app.config.ts, runtime config, environment variables	core-config
CLI Commands	Dev server, build, generate, preview, and utility commands	core-cli
Routing	File-based routing, dynamic routes, navigation, middleware, layouts	core-routing
Data Fetching	useFetch, useAsyncData, $fetch, caching, refresh	core-data-fetching
Modules	Creating and using Nuxt modules, Nuxt Kit utilities	core-modules
Deployment	Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare	core-deployment

Features

Topic	Description	Reference
Composables Auto-imports	Vue APIs, Nuxt composables, custom composables, utilities	features-composables
Components Auto-imports	Component naming, lazy loading, hydration strategies	features-components-autoimport
Built-in Components	NuxtLink, NuxtPage, NuxtLayout, ClientOnly, and more	features-components
State Management	useState composable, SSR-friendly state, Pinia integration	features-state
Server Routes	API routes, server middleware, Nitro server engine	features-server

Rendering

Topic	Description	Reference
Rendering Modes	Universal (SSR), client-side (SPA), hybrid rendering, route rules	rendering-modes

Best Practices

Topic	Description	Reference
Data Fetching Patterns	Efficient fetching, caching, parallel requests, error handling	best-practices-data-fetching
SSR & Hydration	Avoiding context leaks, hydration mismatches, composable patterns	best-practices-ssr

Advanced

Topic	Description	Reference
Layers	Extending applications with reusable layers	advanced-layers
Lifecycle Hooks	Build-time, runtime, and server hooks	advanced-hooks
Module Authoring	Creating publishable Nuxt modules with Nuxt Kit	advanced-module-authoring

Comments

Markdown supported

Details

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

design-mobile-apps

github.com/designed-by-ai

1.3M

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

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.

vercel-react-best-practices

github.com/vercel-labs

881.3k

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.