# vue-expert

> Use when implementing vue functionality with production-grade patterns and safeguards.

- Skill: `0xharryriddle/vue-expert` (Agent Skill)
- Install (CLI): `npx skillmds add 0xharryriddle/vue-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xharryriddle/vue-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 0xharryriddle (https://skillmd.com/u/0xharryriddle)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/0xharryriddle/vue-expert

---


# 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