Enforce Nuxt 3 folder contracts and separate page, component, and server responsibilities.
npx skills add https://github.com/Levironexe/architect --skill nuxt-3
Please help me install this Agent Skill. Skill: Nuxt 3 Source: https://github.com/Levironexe/architect/tree/main/skills/stacks/vue-nuxt Command: npx skills add https://github.com/Levironexe/architect --skill nuxt-3
Nuxt 3 codebases often drift into inconsistent folder usage, scattered business logic, and risky refactors where pages, components, and server routes blur responsibilities. This Skill creates a consistent architecture so an agent can reorganize code without breaking SSR behavior, auto-import conventions, or error handling.
pages/, UI components in components/, reusable logic in composables/, and server endpoints in server/api/.useFetch/useAsyncData, and server routes delegate business logic to server/utils/.createError()/error.vue patterns, validates config via Nitro, and keeps secrets out of runtimeConfig.public.stores/, while local UI state remains in composables.Give your AI agent the instruction: “Analyze my Nuxt 3 repository and produce a phased refactor plan that moves data fetching into composables, moves business logic into server utilities, and aligns folder responsibilities with the Nuxt 3 architecture rules.”
High-intent search queries and answers about installing and using this skill.
To safely refactor a Nuxt 3 app, enforce strict folder contracts and separation of concerns. Keep routes in `pages/`, UI in `components/`, logic in `composables/`, and endpoints in `server/api/` to prevent responsibility mixing and maintain SSR safety.
The best way to structure Pinia and data fetching is to wrap `useFetch` and `useAsyncData` strictly within composables. Global shared state should go to Pinia `stores/`, while local UI state remains isolated in composables to ensure safe SSR data flow.
Secure secrets by keeping them in server-only `runtimeConfig` and validating configuration at Nitro startup. Handle errors in server routes by using `defineEventHandler` with `createError()` patterns to ensure consistent error responses.
Business logic drifts during refactoring when folder boundaries are unclear. Standardize your architecture by delegating server business logic to `server/utils/` and keeping pages declarative, ensuring pages and components blur responsibilities less.
Yes, this refactoring approach explicitly supports Nuxt 3 projects that use auto-imported components and composables. It establishes consistent application architecture to reorganize code without breaking auto-import conventions or SSR behavior.
You need to validate `runtimeConfig` at startup when hardening security and preventing configuration errors in Nitro server routes. This ensures secrets remain server-only and your Nuxt 3 application fails fast on invalid configurations.
alex5141Establish development standards for Nuxt.js 3 applications with file-based routing and SSR.
anyulledRefactor monolithic code into separate data fetching, business logic, and presentation layers.
peterWang123589Build server-rendered Vue applications with file-based routing and Nitro deployments.
spideynoloveBuild universal Vue apps with Nuxt 3 SSR, routing, and auto-imports.