Vue Best Practices

What it does

This skill enables AI agents to apply Vue.js best practices, ensuring code is maintainable, performant, and follows community standards. It guides development through proper component structure, state management patterns, and lifecycle optimization specific to the Vue ecosystem.

When to use it

• Refactoring legacy Vue applications to modernize architecture and improve scalability.
• Generating new components that adhere to strict coding conventions and accessibility guidelines.
• Debugging performance bottlenecks by applying optimized rendering strategies and reactivity rules.
• Onboarding team members to a codebase by enforcing consistent patterns across the project.

Key capabilities

• Enforces Vue.js best practices for clean, readable, and efficient code.
• Promotes maintainable architecture through standardized component design.
• Optimizes application performance using Vue-specific rendering techniques.
• Ensures alignment with current community standards and guidelines.

Example prompts

• "Refactor this existing Vue component to follow modern best practices for state management and reactivity."
• "Generate a new Vue 3 component that adheres to strict accessibility and coding convention standards."
• "Analyze this codebase and suggest optimizations based on Vue.js performance best practices."

Tips & gotchas

Ensure your project is using a compatible version of the Vue framework, as best practices often evolve with major releases. This skill focuses on architectural patterns; for specific library integrations like Pinia or Vue Router, combine it with those specialized skills.