vue-expert

What it does

This skill empowers AI agents to generate, debug, and optimize Vue.js code with expert-level proficiency. It handles everything from component architecture to state management and performance tuning within the Vue ecosystem.

When to use it

• Building new single-page applications (SPAs) using Vue 3 or Vue 2.
• Refactoring legacy Vue codebases to improve maintainability and performance.
• Debugging complex reactivity issues, lifecycle hooks, or template rendering errors.
• Integrating Vue components with modern build tools like Vite or Webpack.

Key capabilities

• Component creation and composition API implementation.
• State management setup using Pinia or Vuex.
• Template syntax optimization and dynamic binding.
• Router configuration for multi-page navigation within SPAs.
• Debugging reactive data flow and lifecycle issues.
• Code generation adhering to Vue best practices.

Example prompts

• "Create a reusable Vue 3 component with the Composition API that fetches user data from an API."
• "Debug this Vue template where the list fails to update when the underlying array changes."
• "Optimize this slow-rendering Vue dashboard by improving reactivity and component structure."

Tips & gotchas

• Ensure your AI agent has access to the specific Vue version (2 or 3) you are targeting, as syntax differs significantly.
• For complex state management, explicitly request Pinia integration if you are using Vue 3 for better type safety and performance.