Fec nuxt project standard

Skill bovinphang/frontend-craft/skills/fec-nuxt-project-standard

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.

Install

npx -y skills add bovinphang/frontend-craft --skill fec-nuxt-project-standard

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chinese triggers include Nuxt, Nuxt 3.

SKILL.md

4.6 KB, as published. Nobody here has run it

Nuxt 3 Project Specifications

For repositories using Nuxt 3 + Vue 3 + TypeScript.

Purpose

Standardize the engineering practices of SSR/SSG rendering mode, combined API, automatic import, data acquisition, routing middleware and module plug-ins in the Nuxt 3 project to ensure conventional development and type safety.

Procedure

First identify whether the target belongs to Nuxt pages/layouts, rendering mode, data acquisition, route middleware, plugin/module or server route.
Clarify SSR / SSG / SPA selection to avoid server-side executable code relying on window or document.
For data acquisition, Nuxt’s useFetch / useAsyncData is used first, and the hydration consistency is checked.
Route authentication, redirection and permission issues are aligned with the route protection workflow.
Common Vue component architecture issues are offloaded to the Vue project workflow.

Project structure

├── app.vue # Root component
├── nuxt.config.ts # Nuxt configuration
│
├── pages/ # File-based routing
│   ├── index.vue               # /
│   ├── login.vue               # /login
│   ├── dashboard/
│   │   ├── index.vue           # /dashboard
│   │   └── users/
│   │       ├── index.vue       # /dashboard/users
│   │       └── [id].vue       # /dashboard/users/:id
│ └── [...slug].vue # Capture all
│
├── layouts/ # layout
│   ├── default.vue
│   └── auth.vue
│
├── components/ # Automatically import components
│   ├── Button/
│   │   └── Button.vue
│   └── AppHeader.vue
│
├── composables/ # Combined functions (automatically imported)
│   ├── useAuth.ts
│   └── useFetch.ts
│
├── server/ # Server API
│ ├── api/ # API routing
│   │   └── users/
│   │       └── index.get.ts
│ ├── middleware/ # Server-side middleware
│ └── utils/ # Server-side tools
│
├── plugins/ # Plug-in
│   └── i18n.client.ts
│
├── middleware/ # Routing middleware
│   └── auth.ts
│
├── public/ # Static resources
├── assets/ # Resources to be built
└── types/ # Type definition

Rendering mode

Mode	Configuration	Description
SSR	Default	`ssr: true`
SSG	`nuxt generate`	Pre-render all pages
SPA	`ssr: false`	Pure client-side rendering

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true, // or false
});

Data acquisition

useFetch / useAsyncData: server + client, automatic deduplication
$fetch: direct request, suitable for server or one-time call
useLazyAsyncData: does not block navigation, suitable for non-first screen
Avoid mixing synchronous/asynchronous logic at the top level of setup causing hydration mismatch

Routing and layout

Automatically generate routes for files under pages/
Dynamic routing: [id].vue, [...slug].vue
Layout: layout option or layouts/default.vue default
Nested routing: pages/parent/child.vue needs to be combined with NuxtPage

Middleware

Automatically register files under middleware/
Page level: definePageMeta({ middleware: ['auth'] })
Global: router.middleware of nuxt.config.ts
Server-side middleware: server/middleware/

Plug-ins and modules

Plug-in: plugins/*.ts, supports .client, .server suffixes
Modules: modules/ or node_modules, in nuxt.config modules: []

Constraints

Server-accessible code should not rely on window or document
Be careful about SSR serialization when using useState to share state
Use NuxtImg for images and NuxtLink for links
Avoid using await at the top level of setup which will cause blocking. Use useAsyncData / useFetch first

Expected Output

Pages are organized according to pages/ conventional routing, and dynamic routing is correctly configured
The rendering mode (SSR/SSG/SPA) is correctly selected and the nuxt.config.ts configuration is clear
Data acquisition uses useFetch / useAsyncData, automatic deduplication and hydration
Composables and components are automatically imported correctly, and the server/client boundary is clear