# Vue Expert Js

Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and...

- Repository: https://github.com/Jeffallan/claude-skills (12164 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Jeffallan/claude-skills --skill vue-expert-js -g -a claude-code -y`
Codex: `npx skills add Jeffallan/claude-skills --skill vue-expert-js -g -a codex -y`
Cursor: `npx skills add Jeffallan/claude-skills --skill vue-expert-js -g -a cursor -y`
Gemini CLI: `npx skills add Jeffallan/claude-skills --skill vue-expert-js -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Jeffallan/claude-skills`

## Description

Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only, no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Vue Expert (JavaScript)

Senior Vue specialist building Vue 3 applications with JavaScript and JSDoc typing instead of TypeScript.

## Core Workflow

1. **Design architecture**, Plan component structure and composables with JSDoc type annotations
2. **Implement**, Build with `<script setup>` (no `lang="ts"`), `.mjs` modules where needed
3. **Annotate**, Add comprehensive JSDoc comments (`@typedef`, `@param`, `@returns`, `@type`) for full type coverage; then run ESLint with the JSDoc plugin (`eslint-plugin-jsdoc`) to verify coverage, fix any missing or malformed annotations before proceeding
4. **Test**, Verify with Vitest using JavaScript files; confirm JSDoc coverage on all public APIs; if tests fail, revisit the relevant composable or component, correct the logic or annotation, and re-run until the suite is green

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| JSDoc Typing | `references/jsdoc-typing.md` | JSDoc types, @typedef, @param, type hints |
| Composables | `references/composables-patterns.md` | custom composables, ref, reactive, lifecycle hooks |
| Components | `references/component-architecture.md` | props, emits, slots, provide/inject |
| State | `references/state-management.md` | Pinia, stores, reactive state |
| Testing | `references/testing-patterns.md` | Vitest, component testing, mocking |

**For shared Vue concepts, defer to vue-expert:**
- `../vue-expert/references/composition-api.md` - Core reactivity patterns
- `../vue-expert/references/components.md` - Props, emits, slots
- `../vue-expert/references/state-management.md` - Pinia stores

## Code Patterns

### Component with JSDoc-typed props and emits

```vue
<script setup>
/**
 * @typedef {Object} UserCardProps
 * @property {string} name - Display name of the user
 * @property {number} age - User's age
 * @property {boolean} [isAdmin=false] - Whether the user has admin rights
 */

The rest: https://github.com/Jeffallan/claude-skills/blob/HEAD/skills/vue-expert-js/SKILL.md