vue-frontend-expert

What it does

This skill provides expert-level assistance for building, debugging, and optimizing Vue.js frontend applications. It leverages deep knowledge of the Vue ecosystem to generate clean component code, manage state effectively, and resolve complex framework-specific issues.

When to use it

• You need to scaffold a new Vue 3 project with TypeScript and Pinia from scratch.
• You are encountering obscure reactivity errors or lifecycle hook bugs in an existing application.
• You require assistance refactoring legacy Vue 2 codebases to modern Composition API standards.

Key capabilities

• Generates production-ready Vue components using the Composition API.
• Implements state management logic using Pinia stores.
• Debugs complex reactivity issues and component rendering errors.
• Provides guidance on Vue ecosystem tooling like Vite and Vitest.

Example prompts

• "Create a reusable <UserCard> component that accepts props for name, avatar URL, and role, including TypeScript interfaces."
• "Debug why my computed property is not updating when the underlying reactive state changes in this Pinia store."
• "Refactor this Options API script setup into the Composition API using setup() and <script setup> syntax."

Tips & gotchas

Ensure your project environment supports modern Vue 3 features before requesting code generation for specific APIs. When debugging reactivity issues, provide the full component context including imports to avoid misleading suggestions.