Does this skill support Nuxt 2 to Nuxt 3 migration?

Yes, it specifically identifies outdated patterns and provides refactored equivalents using the Nuxt 3 Composition API and modern directory structures.

Does it work with existing Pinia stores?

Yes, it can refactor existing state logic into modular Pinia stores or identify where global state should be replaced with local composables.

How does it improve application performance?

It optimizes data fetching by correctly implementing useFetch/useAsyncData, reduces bundle sizes by extracting logic, and ensures efficient SSR hydration.

Can it help with Nitro server-side logic?

Absolutely. It can refactor server routes, implement typed API handlers, and organize server utilities within the Nitro engine.

Nuxt.js Refactoring Expert

Name: Nuxt.js Refactoring Expert
Author: SnakeO

bySnakeO

0•

Developer Tools

Refactors Nuxt.js and Vue.js codebases to improve maintainability, performance, and adherence to Nuxt 3 best practices.

This skill serves as an elite architectural guide for modernizing Nuxt.js applications. It systematically identifies and resolves technical debt by applying Single Responsibility Principles (SRP), DRY logic extraction, and modern Vue Composition API patterns. From optimizing complex data fetching with useFetch and useAsyncData to organizing Nitro server routes and Nuxt Layers, this skill ensures your codebase is type-safe, performance-optimized, and follows the latest modular standards. It is particularly useful for breaking down monolithic components into reusable composables and ensuring SSR-safe state management with Pinia or useState.

Key Features

01Restructures applications using Nuxt Layers for superior modularity and domain-driven design.

02Refactors state management to utilize Pinia and SSR-safe useState patterns correctly.

03Implements full TypeScript integration across components, composables, and Nitro routes.

040 GitHub stars

05Extracts business logic from components into single-responsibility composables and utilities.

06Optimizes data fetching patterns to prevent double-fetching and improve hydration performance.

Use Cases

01Fixing performance bottlenecks caused by improper use of $fetch in SSR contexts.

02Breaking down oversized 'spaghetti' components into focused, maintainable sub-components.

03Modernizing legacy Nuxt/Vue code into high-quality Nuxt 3 Composition API patterns.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add snakeo/claude-debug-and-refactor-skills-plugin refactor-nuxtjs

For use in Claude.ai and ChatGPT

Download Skill