skills.rest
runkids
runkidsCOMMUNITY
Explore all skills by this author →
GitHub

vue-development-guides

Consolidate Vue 3 and Nuxt 3 development best practices for components, state, and reactivity.

11|2|Updated Jan 15, 2026
Search Tags:#refactoring#vue#best-practices#vue3#composition-api#component-design#sfc
One-click install
npx skills add https://github.com/runkids/my-skills --skill vue-development-guides
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-development-guides
Source: https://github.com/runkids/my-skills/tree/main/vue-development-guides
Command: npx skills add https://github.com/runkids/my-skills --skill vue-development-guides

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Vue development guides help teams establish consistent practices, accelerate onboarding, and improve code quality for Vue 3 and Nuxt 3 projects by providing clear guidelines and examples.

Core Features & Use Cases

  • Guided Architecture: Clear recommendations for component structure, state management, and data flow.
  • SFC Best Practices: Guidance on <script setup> with TS, and template organization to maximize readability and maintainability.
  • Refactoring & Review: Checklists and tips to evaluate and improve existing Vue/Nuxt codebases.

Quick Start

Load the Vue Development Guides into your project’s knowledge base and start applying the core principles to new components or during code reviews.

Frequently Asked Questions about vue-development-guides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are Vue 3 best practices for component structure and state management?▼

Vue 3 best practices emphasize clear component architecture using the Composition API, organized state management patterns, and reactive data flow. This Skill consolidates guidelines for structuring components, managing state consistently, and implementing reactivity patterns across Vue 3 and Nuxt 3 projects to improve maintainability and team alignment.

How do I use script setup with TypeScript in Vue 3 single-file components?▼

Script setup syntax simplifies Composition API usage in single-file components by reducing boilerplate. This Skill provides guidance on organizing `<script setup>` with TypeScript, template structure best practices, and patterns that maximize readability while maintaining type safety and code organization standards.

What should I look for when refactoring Vue code or reviewing Vue components?▼

Code review for Vue involves evaluating component structure, state management patterns, data flow clarity, and Composition API usage. This Skill offers refactoring checklists and review tips to identify improvement areas in existing Vue and Nuxt codebases and apply consistent development standards.

Can I apply these Vue development guidelines to Nuxt 3 projects?▼

Yes. This Skill covers best practices applicable to both Vue 3 and Nuxt 3 projects, addressing component design, state management, reactivity patterns, and testing-ready code across frontend development, refactoring, and code review contexts in both frameworks.

How do I establish consistent Vue coding standards across my team?▼

Team consistency comes from documented guidelines and shared examples. This Skill consolidates Vue 3 and Nuxt 3 development standards for components, Composition API usage, SFC organization, and data flow patterns that you can load into your project's knowledge base and apply during onboarding and code reviews.

Related Skills

Explore More Software Engineering Skills→
martin-jancimartin-janci
3

nuxt-setup

Automate dependency installation, Nuxt preparation, and TypeScript validation for Nuxt projects.

Community
Advanced
selfagencyselfagency

review-and-refactor

Review repository code against engineering guidelines and refactor while preserving files.

Community
Intermediate
mindcockpit-aimindcockpit-ai
11

vue-patterns

Validate Vue 3 projects against Composition API and TypeScript standards.

Official
Advanced
ps-carvalhops-carvalho

frontend-development

Codify frontend architecture, state management, and accessibility into a reusable blueprint.

Community
Intermediate