vue-expert-js

Vue 3 components and composables in JavaScript with comprehensive JSDoc type coverage, no TypeScript required.

jeffallan/claude-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

Builds with <script setup> and .mjs modules using @typedef , @param , and @returns JSDoc annotations for full type safety without a TypeScript compiler
Covers component architecture (props, emits, slots), custom composables, Pinia state management, and Vue Router configuration entirely in vanilla JavaScript
Includes ESLint JSDoc plugin verification to ensure all public

Repository

jeffallan/claude-skills

Last updated

Apr 8, 2026

Installation Guide

Select your AI agent

How to use vue-expert-js on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add vue-expert-js

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/jeffallan/claude-skills --skill vue-expert-js

Fetches vue-expert-js from jeffallan/claude-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/vue-expert-js

Restart Cursor to activate vue-expert-js. Access via /vue-expert-js in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

Core Workflow

Design architecture — Plan component structure and composables with JSDoc type annotations

Implement — Build with <script setup> (no lang="ts"), .mjs modules 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

Composable with @typedef, @param, and @returns

// composables/useCounter.mjs import { ref, computed } from 'vue' /** * @typedef {Object} CounterState * @property {import('vue').Ref<number>} count - Reactive count value * @property {import('vue').ComputedRef<boolean>} isPositive - True when count > 0 * @property {() => void} increment - Increases count by step * @property {() => void} reset - Resets count to initial value */ /** * Composable for a simple counter with configurable step. * @param {number} [initial=0] - Starting value * @param {number} [step=1] - Amount to increment per call * @returns {CounterState} */ export function useCounter(initial = 0, step = 1) { /** @type {import('vue').Ref<number>} */ const count = ref(initial) const isPositive = computed(() => count.value > 0) function increment() { count.value += step } function reset() { count.value = initial } return { count, isPositive, increment, reset } }

@typedef for a complex object used across files

// types/user.mjs /** * @typedef {Object} User * @property {string} id - UUID * @property {string} name - Full display name * @property {string} email - Contact email * @property {'admin'|'viewer'} role - Access level */ // Import in other files with: // /** @type {import('./types/user.mjs').User} */

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

vue-expert-js

What it does

Category

Repository

Last updated

Installation Guide

How to use vue-expert-js on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Vue Expert (JavaScript)

Core Workflow

Reference Guide

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

MUST NOT DO

Output Templates

Knowledge Reference

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

antigravity-design-expert

interior-design-expert

pwa-expert

python-expert-best-practices-code-review

frontend-design

premium-frontend-ui

Reviews

Discussion