vue-expert-js

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 buildin

By jeffallan · 3,536 installs

npx skills add jeffallan/claude-skills --skill vue-expert-js

Source repository · Upstream listing

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 Composable with @typedef, @param, and @returns @typedef for a complex object used across files Constraints MUST DO Use Composition API with <script setup Use JSDoc comments for type documentation Use .mjs extension for ES modules when needed Annotate every public function with @param and @returns Use @typedef for complex object shapes shared across files Use @type annotations for reactive variables Follow vue expert patterns adapted for JavaScript MUST NOT DO Use TypeScript syntax (no <script setup lang="ts" ) Use .ts file extensions Skip JSDoc types for public APIs Use CommonJS require() in Vue files Ignore type safety entirely Mix TypeScript files with JavaScript in the same component Output Templates When implementing Vue features in JavaScript: 1. Component file with <script setup (no lang attribute) and JSDoc typed props/emits 2. @typedef definitions for complex prop or state shapes 3. Composable with @param and @returns annotations 4. Brief note on type coverage Knowledge Reference Vue 3 Composition API, JSDoc, ESM modules, Pinia, Vue Router 4, Vite, VueUse, Vitest, Vue Test Utils, JavaScript ES2022+ [Documentation](https://jeffallan.github.io/claude skills/skills/frontend/vue expert js/)