nuxt-project-standard

What This Skill Does

The nuxt-project-standard skill acts as an expert architectural consultant for Nuxt 3 development. It enforces industry best practices for file structure, state management, and rendering patterns. By analyzing your repository's structure, the agent ensures that your project remains maintainable, performant, and correctly configured. It provides guided assistance on implementing server-side rendering (SSR), static site generation (SSG), and client-side data fetching strategies, helping developers avoid common hydration issues and performance bottlenecks unique to the Nuxt ecosystem.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/bovinphang/nuxt-project-standard Once installed, the agent will monitor your Nuxt 3 project files and automatically suggest architectural improvements when you modify routes, pages, or API endpoints.

Use Cases

• Project Initialization: Establishing a robust directory structure that leverages Nuxt's auto-import features effectively.
• Performance Tuning: Transitioning between SSR and SSG modes based on specific route requirements.
• State Synchronization: Implementing useState or Pinia stores correctly to avoid cross-request state pollution.
• Middleware Management: Setting up complex authentication guards or global layout shifts efficiently.
• API Integration: Refactoring legacy client-side fetching logic into optimized useFetch or useAsyncData patterns.

Example Prompts

1. "I am building a dashboard with restricted routes. Can you show me how to implement an authentication middleware using the standard middleware directory and apply it to the entire /dashboard sub-path?"
2. "My page is failing to hydrate correctly due to client-only DOM elements. How should I refactor this component to use the <ClientOnly> tag while ensuring SSR performance?"
3. "Help me restructure my API route handling. I have a growing number of backend endpoints in server/api. How should I organize them for better modularity?"

Tips & Limitations

• SSR Awareness: Always remember that code in plugins/ or composables/ might run on both the server and the client. Wrap browser-specific APIs (like window or localStorage) in onMounted or use the .client suffix.
• Auto-Imports: Leverage Nuxt's auto-import feature for components and composables to keep your files clean, but use explicit imports if your project grows to a massive scale to aid IDE intellisense.
• Data Fetching: Avoid using await at the top level of your setup() function unless you are inside an asyncData call, as this can block navigation. Always prefer useFetch to leverage Nuxt's built-in caching and deduplication capabilities.