How does it handle component organization?

It follows Atomic Design principles, encouraging the separation of components into atoms, molecules, and organisms to keep page components thin and maintainable.

Can it help with React to Vue migrations?

Yes, it includes a detailed mapping guide for converting React Hooks like useState, useEffect, and useMemo into their Vue equivalents like ref, watch, and computed.

Does this skill support Nuxt 2?

No, this skill is specifically optimized for modern Vue 3 and Nuxt 3 projects using the Composition API and syntax.

Does it provide guidance on state management?

Yes, it provides best practices for using Pinia for global state, Provide/Inject for tree-scoped state, and local refs for individual Composable instances.

Vue 3 & Nuxt Architect

Name: Vue 3 & Nuxt Architect
Author: h5y1m141

byh5y1m141

0•

Developer Tools

Guides the development and migration of Vue 3 and Nuxt applications using TypeScript and Composition API best practices.

This skill transforms Claude into an expert Vue 3 and Nuxt 3 architect, specifically optimized for building scalable web applications and migrating legacy React/Next.js codebases to the Vue ecosystem. It enforces enterprise-grade patterns such as Atomic Design for component structure, modular Composables with proper lifecycle management, and strict TypeScript type safety. By following these standardized implementation guidelines, the skill ensures clean separation between business logic and UI components, helping developers build maintainable, high-performance Vue applications while avoiding common pitfalls like component bloat and tight coupling.

Key Features

01React Hooks to Vue Composition API migration mapping

02Atomic Design component architecture implementation

03Modular Composable design with single responsibility

040 GitHub stars

05Automated cleanup for timers and event listeners

06Type-safe Pinia state management patterns

Use Cases

01Porting complex React/Next.js projects to Nuxt 3

02Refactoring bloated Vue components into reusable Composables

03Establishing standardized UI patterns using Atomic Design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add h5y1m141/pedaru-vue vue-skill

For use in Claude.ai and ChatGPT

Download Skill