vue3-js-assistant

vue3-js-assistant

A Claude Code plugin for Vue 3 + JavaScript (no TypeScript) development. Provides skills, agents, and hooks for building production-ready Vue 3 applications with Vite and Tailwind CSS.

Features

Skills

Skill	Description
vue3-js-assistant:vue-component	Create Vue 3 SFC components with Composition API
vue3-js-assistant:vue-composable	Create composable functions for state management
vue3-js-assistant:vue-claude-md	Generate CLAUDE.md for Vue 3 projects
vue3-js-assistant:vue-theme-system	Create CSS custom property-based theme system
vue3-js-assistant:vue-project-setup	Initialize a new Vue 3 + Vite + Tailwind project
vue3-js-assistant:vue-i18n	Add lightweight i18n with dictionary-based translations

Agents

Agent	Description
vue3-coder	Expert Vue 3 + JS developer for component and feature implementation
vue3-reviewer	Code reviewer specialized in Vue 3 conventions and anti-patterns

Hooks

• Post-tool hook: Automatically warns when .vue files use Options API or Tailwind color classes

Conventions Enforced

• Composition API with <script setup> (no Options API)
• No TypeScript — pure JavaScript
• No external state libraries — use Vue 3 composables with ref()/computed()/watch()
• Tailwind for layout, CSS custom properties for colors (enables theme switching)
• Debounced localStorage persistence via watch()
• Props down, events up component communication

Installation

From GitHub Marketplace

/plugin marketplace add your-org/vue3-js-assistant
/plugin install vue3-js-assistant@vue3-js-tools

Local Testing

claude --plugin-dir ./vue3-js-assistant

Usage

After installation, the skills are automatically available. Claude will use them based on context. You can also invoke them directly:

• /vue3-js-assistant:vue-component — Create a new component
• /vue3-js-assistant:vue-composable — Create a composable
• /vue3-js-assistant:vue-claude-md — Generate project documentation
• /vue3-js-assistant:vue-theme-system — Set up theming
• /vue3-js-assistant:vue-project-setup — Scaffold a new project
• /vue3-js-assistant:vue-i18n — Add internationalization

Project Structure

vue3-js-assistant/
├── .claude-plugin/
│   ├── plugin.json         # Plugin manifest
│   └── marketplace.json    # Marketplace catalog
├── skills/
│   ├── vue-component/      # SFC creation skill
│   ├── vue-composable/     # Composable creation skill
│   ├── vue-claude-md/      # CLAUDE.md generator skill
│   ├── vue-theme-system/   # Theme system skill
│   ├── vue-project-setup/  # Project scaffolding skill
│   └── vue-i18n/           # i18n skill
├── agents/
│   ├── vue3-coder.md       # Implementation agent
│   └── vue3-reviewer.md    # Code review agent
├── hooks/
│   └── hooks.json          # Post-edit validation hooks
└── README.md

License

MIT