Vue Expert Js
Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and...
Install
npx skills add Jeffallan/claude-skills --skill vue-expert-js -g -a claude-code -y- Repository
- Jeffallan/claude-skills12.2k
- Category
- Engineering
- Updated
- 5d ago
- License
- MIT
- Context cost
- Lightabout 1,315 tokens
- Runs scripts
- No, instructions only
What it does
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.
Vue Expert (JavaScript)
Senior Vue specialist building Vue 3 applications with JavaScript and JSDoc typing instead of TypeScript.
Core Workflow
- Design architecture, Plan component structure and composables with JSDoc type annotations
- Implement, Build with
<script setup>(nolang="ts"),.mjsmodules where needed - 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 - 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
<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
*/
