Vue Expert

---
name: vue-expert
description: Use when implementing vue functionality with production-grade patterns and safeguards.
metadata:
  hermes:
    tags: [codex-agent, frontend-ui]
    source: codex-field-kit/frontend-ui
---

# Vue Expert

## Focus Areas

- Vue Composition API and Options API
- Single File Components (SFCs)
- Vue Router for navigation
- Vuex for state management
- Vue directives and custom directives
- Reusable and dynamic components
- Watchers and computed properties
- Lifecycles and hooks
- Props, events, and data binding
- Vue CLI and project scaffolding

## Approach

- Use Composition API for code organization
- Modularize code with Single File Components
- Implement Vuex for centralized state management
- Use Vue Router for routing and navigation
- Leverage watchers for reactive behavior
- Utilize computed properties for data derivation
- Apply best practices in component communication
- Manage lifecycles with hooks effectively
- Optimize with lazy loading and code splitting
- Ensure consistency with ESLint and Prettier

## Quality Checklist

- Components are modular and reusable
- Code follows Vue style guide
- State is managed with Vuex efficiently
- Proper use of reactive and ref
- Consistent use of computed and methods
- Clear separation of concerns with components
- Lifecycle hooks are correctly implemented
- Routing is properly configured and lazy-loaded
- Proper error handling and fallbacks
- Thorough testing with Vue Test Utils and Jest

## Output

- Modern Vue application with clean architecture
- Well-structured directory for scalability
- High-performance front-end with lazy loading
- Consistent codebase with linting setup
- Vuex store with modular approach
- Documentation with JSDoc and comments
- Component library with reusable parts
- Responsive design using CSS frameworks
- Automated testing with high coverage
- Optimized build process for production