vue-development-guides

Enforce Vue.js and Nuxt best practices for architecture, components, and code reviews.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/trcat/ai-todo-list --skill vue-development-guides-trcat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-development-guides
Source: https://github.com/trcat/ai-todo-list/tree/main/.agents/skills/vue-development-guides
Command: npx skills add https://github.com/trcat/ai-todo-list --skill vue-development-guides-trcat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill consolidates Vue.js and Nuxt development best practices to help teams build consistent, maintainable, and high-quality frontend applications.

Core Features & Use Cases

  • Guided architecture decisions: Establishes consistent patterns for project structure, component design, and reactivity.
  • Data flow and state management standards: Recommends the Props Down / Events Up pattern and preferred state management approaches.
  • SFC and Composition API guidelines: Encourages using <script setup lang="ts">, stable slot usage, and clean template organization.
  • Review and refactor playbook: Provides checklists to assess and improve existing codebases during reviews and refactors.
  • Use Cases: Developers aligning new projects, teams performing code reviews, or refactoring large Vue/Nuxt apps.

Quick Start

  • Review the references to align code with Vue.js best practices.
  • Integrate the Composition API defaults and SFC conventions into your project.
  • Use these guidelines during project kickoffs, PR reviews, and refactors.

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 structuring components and using the Composition API?

Vue 3 best practices recommend using <script setup lang="ts"> for clean SFC organization, establishing consistent project architecture patterns, and standardizing component design and reactivity to improve maintainability.

How do I manage data flow and state in large Nuxt applications?

Nuxt data flow best practices enforce the Props Down / Events Up pattern and recommend preferred state management approaches to maintain consistency and predictable data handling across complex frontend architectures.

Does this Vue development guide apply to both new projects and existing codebase refactoring?

Yes, these Vue guidelines suit both new project alignment and existing codebase refactoring, providing checklists to assess architecture, component patterns, and reactivity during code reviews and large application refactors.

What's the best way to review Vue or Nuxt code for team consistency?

The best way to review Vue code is using a review playbook that checks Composition API usage, SFC organization, and state management norms against established guidelines to ensure consistent, high-quality frontend application code.

When should I not use default Vue patterns for frontend architecture?

Default Vue patterns should be evaluated for limitations during complex refactoring, where checking Props Down / Events Up adherence and SFC conventions ensures the architecture meets team collaboration and data flow requirements.