solid-vue-development

Enforce Vue 3 architecture principles for component design and code quality auditing.

Updated Feb 9, 2026
One-click install
npx skills add https://github.com/RandyHaylor/enhanceclaude --skill solid-vue-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: solid-vue-development
Source: https://github.com/RandyHaylor/enhanceclaude/tree/main/ai-tools/solid-vue-development
Command: npx skills add https://github.com/RandyHaylor/enhanceclaude --skill solid-vue-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses common pitfalls in Vue 3 development by enforcing core principles for clean, maintainable, and scalable applications, ensuring better architecture, feature additions, and component design.

Core Features & Use Cases

  • State vs. Behavior Separation: Clearly distinguishes between reactive state and functional behavior to prevent logic from escaping its intended layer.
  • Component Boundaries: Enforces that components call functions and do not own complex domain logic.
  • Manager Pattern: Promotes encapsulating domain state and behavior within dedicated manager classes.
  • Reactive Chains: Guides the correct usage of computed and watch to avoid process orchestration.
  • Naming Conventions: Establishes clear and explicit naming for functions, state, types, and CSS variables.
  • Scope Discipline: Advises against premature abstraction and unnecessary additions.
  • Use Case: Review a Vue component for violations of the manager pattern or component boundary rules, or refactor auth logic into a proper manager.

Quick Start

Review this Vue component and flag any violations of the manager pattern or component boundary rules.

Frequently Asked Questions about solid-vue-development

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

FAQPage Schema
How do I separate state and behavior in Vue 3 components?

To review Vue 3 architecture, check for state vs. behavior separation, verify components do not own complex domain logic, ensure reactive chains avoid process orchestration, and validate naming conventions and scope discipline are maintained.

What is the manager pattern in Vue 3 component design?

The manager pattern in Vue 3 component design promotes encapsulating domain state and behavior within dedicated manager classes. This keeps complex logic out of components, ensuring they only call functions and maintain strict component boundaries.

How do I use computed and watch without creating process orchestration in Vue 3?

Using computed and watch without process orchestration in Vue 3 requires guiding reactive chains correctly. You must ensure these features track reactive state changes rather than orchestrating complex multi-step processes or side effects.

When should I refactor Vue 3 auth logic into a dedicated manager class?

You should refactor Vue 3 auth logic into a dedicated manager class when component boundaries are violated. Moving this logic into a manager encapsulates the domain state and behavior, preventing complex logic from escaping its intended layer.

Does Vue 3 architecture review require specific naming conventions for state and functions?

Vue 3 architecture review requires establishing clear and explicit naming conventions for functions, state, types, and CSS variables. This enforces scope discipline and prevents premature abstraction or unnecessary additions within the application.