Does this skill support the Nuxt 4 directory structure?

Yes, it specifically follows the Nuxt 4 convention of using the 'app/' directory for frontend source code and the 'server/' directory for Nitro logic.

Does it support server-side development?

Absolutely. It includes guidance for the server/ directory, covering API routes, server middleware, and Nitro-specific utilities.

Can it help with dynamic SEO requirements?

Yes, it provides implementation patterns for useSeoMeta and useHead, including reactive title templates and social media Open Graph tags.

What are the minimum version requirements for this skill?

This skill is optimized for Nuxt 4.0.0+, Vue 3.5.0+, Nitro 2.10.0+, and Vite 6.0.0+.

How does it handle environment variables in production?

The skill enforces the use of useRuntimeConfig() instead of process.env to ensure variables are correctly managed between server and client environments.

Nuxt 4 Core

Name: Nuxt 4 Core
Author: secondsky

bysecondsky

•

API開発

Optimizes Nuxt 4 application development with expert patterns for routing, configuration, and SEO implementation.

The Nuxt 4 Core skill provides Claude with specialized knowledge of the Nuxt v4 framework, emphasizing the shift to the 'app/' directory as the default source directory. It facilitates the implementation of production-ready features including secure runtime configuration, advanced file-based routing, and reactive SEO metadata using Nuxt's latest composables. By incorporating best practices for error handling with custom boundaries and Nitro server-side logic, this skill ensures that developers build scalable, high-performance applications while avoiding common anti-patterns like legacy environment variable usage.

主な機能

01Nuxt 4 directory structure organization and app/ directory migration

02Secure runtime configuration patterns for public and secret keys

03Advanced file-based routing with dynamic middleware and navigation guards

04Robust error handling via error.vue and NuxtErrorBoundary components

05Production-grade SEO implementation using useSeoMeta and useHead

0611 GitHub stars

ユースケース

01Scaffolding and configuring new Nuxt 4 projects with Nitro and Vite 6

02Architecting secure API layers and server-side middleware within the Nitro engine

03Implementing dynamic SEO and social sharing metadata for SSR applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills nuxt-core

For use in Claude.ai and ChatGPT