原始内容
📦 Install Now · 🤖 Explore Agents · 📖 Documentation · ⭐ Star this repo
What is this?
Vue Development Assistant is a production-grade Claude Code plugin with 7 specialized agents and 7 skills for modern Vue.js development covering Vue 3.5, Composition API, Pinia, Vue Router, Nuxt 3, Testing (Vitest), and TypeScript.
📑 Table of Contents
Click to expand
🚀 Quick Start
Prerequisites
- Claude Code CLI v2.0.27+
- Active Claude subscription
- Node.js 18+ (for Vue development)
Installation (Choose One)
Option 1: From Marketplace (Recommended)
# Step 1️⃣ Add the marketplace
/plugin marketplace add pluginagentmarketplace/custom-plugin-vue
# Step 2️⃣ Install the plugin
/plugin install vue-development-assistant@pluginagentmarketplace-vue
# Step 3️⃣ Restart Claude Code
# Close and reopen your terminal/IDE
Option 2: Local Installation
# Clone the repository
git clone https://github.com/pluginagentmarketplace/custom-plugin-vue.git
cd custom-plugin-vue
# Load locally
/plugin load .
# Restart Claude Code
✅ Verify Installation
After restart, you should see these agents:
vue-development-assistant:01-vue-fundamentals
vue-development-assistant:02-vue-composition
vue-development-assistant:03-vue-pinia
vue-development-assistant:04-vue-router
vue-development-assistant:05-vue-nuxt
vue-development-assistant:06-vue-testing
vue-development-assistant:07-vue-typescript
✨ Features
| Feature | Description |
|---|---|
| 🖼️ Vue 3.5 Fundamentals | Components, directives, reactivity basics |
| 🔄 Composition API | setup(), composables, ref/reactive |
| 🍍 Pinia State | Modern state management with stores |
| 🛣️ Vue Router | Navigation, guards, dynamic routes |
| ⚡ Nuxt 3 | SSR, file-based routing, modules |
| 🧪 Testing | Vitest, Vue Test Utils, component testing |
| 📘 TypeScript | Type-safe Vue with defineComponent |
🤖 Agents
7 Specialized Vue Agents
| # | Agent | Purpose | Bonded Skill |
|---|---|---|---|
| 1 | 01-vue-fundamentals | Vue 3.5 core concepts: SFC, directives, lifecycle hooks, reactivity basics | vue-fundamentals |
| 2 | 02-vue-composition | Composition API mastery: setup(), ref, reactive, composables, provide/inject |
vue-composition-api |
| 3 | 03-vue-pinia | Pinia state management: stores, getters, actions, plugins, SSR hydration | vue-pinia |
| 4 | 04-vue-router | Vue Router 4: navigation guards, dynamic routing, lazy loading, scroll behavior | vue-router |
| 5 | 05-vue-nuxt | Nuxt 3 framework: SSR/SSG, file-based routing, modules, deployment | vue-nuxt |
| 6 | 06-vue-testing | Testing with Vitest & Vue Test Utils: unit, component, integration tests | vue-testing |
| 7 | 07-vue-typescript | TypeScript in Vue: type inference, generics, defineComponent, strict typing |
vue-typescript |
Usage Example
# Ask a Vue fundamentals question
@vue-development-assistant:01-vue-fundamentals How do I create a reusable component?
# Get Composition API help
@vue-development-assistant:02-vue-composition Create a composable for form validation
# Pinia state management
@vue-development-assistant:03-vue-pinia Set up a user authentication store
# Vue Router navigation
@vue-development-assistant:04-vue-router Implement route guards for protected pages
# Nuxt 3 SSR
@vue-development-assistant:05-vue-nuxt Configure Nuxt for SEO optimization
# Testing
@vue-development-assistant:06-vue-testing Write tests for a login component
# TypeScript
@vue-development-assistant:07-vue-typescript Type a complex Pinia store
🛠️ Skills
Available Skills (Golden Format ✨)
All skills follow the Golden Format with real content:
assets/- config.yaml, schema.jsonscripts/- validate.pyreferences/- GUIDE.md, PATTERNS.md
| Skill | Description | Invoke |
|---|---|---|
vue-fundamentals |
Core Vue 3.5 concepts, SFC syntax, reactivity, lifecycle | Skill("vue-development-assistant:vue-fundamentals") |
vue-composition-api |
Composition API patterns, composables, ref/reactive |
Skill("vue-development-assistant:vue-composition-api") |
vue-pinia |
Pinia stores, state management, plugins, devtools | Skill("vue-development-assistant:vue-pinia") |
vue-router |
Routing, navigation guards, meta fields, transitions | Skill("vue-development-assistant:vue-router") |
vue-nuxt |
Nuxt 3 SSR/SSG, auto-imports, modules, deployment | Skill("vue-development-assistant:vue-nuxt") |
vue-testing |
Vitest, Vue Test Utils, mocking, snapshot tests | Skill("vue-development-assistant:vue-testing") |
vue-typescript |
TypeScript integration, type inference, generic components | Skill("vue-development-assistant:vue-typescript") |
⌨️ Commands
| Command | Description |
|---|---|
/explore-roadmap |
Explore Vue.js learning roadmap interactively |
/learning-path |
Get personalized Vue learning path based on your level |
/skill-assessment |
Assess your Vue.js skills and identify gaps |
/career-guidance |
Vue.js career development and guidance |
📚 Learning Path
Recommended Progression
🟢 Beginner
└── 01-vue-fundamentals → Components, Directives, Reactivity Basics
│
▼
🟡 Intermediate
├── 02-vue-composition → Composition API, Composables
├── 03-vue-pinia → State Management
└── 04-vue-router → Navigation & Routing
│
▼
🔴 Advanced
├── 05-vue-nuxt → SSR/SSG with Nuxt 3
├── 06-vue-testing → Comprehensive Testing
└── 07-vue-typescript → Type-Safe Vue Development
Estimated Learning Time
| Module | Hours | Difficulty |
|---|---|---|
| Vue Fundamentals | 8h | 🟢 Beginner |
| Composition API | 6h | 🟡 Intermediate |
| Pinia | 4h | 🟡 Intermediate |
| Vue Router | 4h | 🟡 Intermediate |
| Nuxt 3 | 10h | 🔴 Advanced |
| Testing | 8h | 🔴 Advanced |
| TypeScript | 10h | 🔴 Advanced |
| Total | 50h | - |
📚 Documentation
| Document | Description |
|---|---|
| ARCHITECTURE.md | Plugin architecture and design |
| LEARNING-PATH.md | Detailed learning progression |
| CHANGELOG.md | Version history |
| CONTRIBUTING.md | How to contribute |
| LICENSE | License information |
📁 Project Structure
Click to expand
custom-plugin-vue/
├── 📁 .claude-plugin/
│ ├── plugin.json # Plugin manifest
│ └── marketplace.json # Marketplace config
├── 📁 agents/ # 7 Vue-specialized agents
│ ├── 01-vue-fundamentals.md
│ ├── 02-vue-composition.md
│ ├── 03-vue-pinia.md
│ ├── 04-vue-router.md
│ ├── 05-vue-nuxt.md
│ ├── 06-vue-testing.md
│ └── 07-vue-typescript.md
├── 📁 skills/ # 7 skills (Golden Format)
│ ├── vue-fundamentals/
│ │ ├── SKILL.md
│ │ ├── assets/ # config.yaml, schema.json
│ │ ├── scripts/ # validate.py
│ │ └── references/ # GUIDE.md, PATTERNS.md
│ ├── vue-composition-api/
│ ├── vue-pinia/
│ ├── vue-router/
│ ├── vue-nuxt/
│ ├── vue-testing/
│ └── vue-typescript/
├── 📁 commands/ # 4 slash commands
│ ├── explore-roadmap.md
│ ├── learning-path.md
│ ├── skill-assessment.md
│ └── career-guidance.md
├── 📁 hooks/
│ └── hooks.json # 8 intelligent hooks
├── 📄 README.md
├── 📄 ARCHITECTURE.md
├── 📄 LEARNING-PATH.md
├── 📄 CHANGELOG.md
├── 📄 CONTRIBUTING.md
└── 📄 LICENSE
🔧 Tech Stack Coverage
| Technology | Version | Coverage |
|---|---|---|
| Vue.js | 3.5+ | ⭐⭐⭐⭐⭐ |
| Composition API | 3.x | ⭐⭐⭐⭐⭐ |
| Pinia | 2.x | ⭐⭐⭐⭐⭐ |
| Vue Router | 4.x | ⭐⭐⭐⭐⭐ |
| Nuxt | 3.x | ⭐⭐⭐⭐⭐ |
| Vitest | 1.x | ⭐⭐⭐⭐ |
| TypeScript | 5.x | ⭐⭐⭐⭐⭐ |
📅 Metadata
| Field | Value |
|---|---|
| Plugin Name | vue-development-assistant |
| Version | 2.0.0 |
| Last Updated | 2025-01 |
| Status | Production Ready |
| SASMP | v1.3.0 |
| EQHM | Enabled |
| Agents | 7 |
| Skills | 7 (Golden Format) |
| Commands | 4 |
| Hooks | 8 |
| Est. Learning | 50 hours |
🤝 Contributing
Contributions are welcome! Please read our Contributing Guide.
- Fork the repository
- Create your feature branch
- Follow the Golden Format for new skills
- Ensure SASMP v1.3.0 compliance
- Submit a pull request
⚠️ Security
Important: This repository contains third-party code and dependencies.
- ✅ Always review code before using in production
- ✅ Check dependencies for known vulnerabilities
- ✅ Follow security best practices
- ✅ Report security issues privately via Issues
📝 License
Copyright © 2025 Dr. Umit Kacar & Muhsin Elcicek
Custom License - See LICENSE for details.
👥 Contributors
|
Dr. Umit Kacar Senior AI Researcher & Engineer |
Muhsin Elcicek Senior Software Architect |
Made with 💚 for the Vue.js & Claude Code Community
