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 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.
- Installs
- 4.1K
- Last 24h
- +25
- Trending rank
- #4909
- Security
- Fail
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/jeffallan/claude-skills --skill vue-expert-js- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads vue-expert-js automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
*/
/** @type {UserCardProps} */
const props = defineProps({
name: { type: String, required: true },
age: { type: Number, required: true },
isAdmin: { type: Boolean, default: false },
})
/**
* @typedef {Object} UserCardEmits
* @property {(id: string) => void} select - Emitted when the card is selected
*/
const emit = defineEmits(['select'])
/** @param {string} id */
function handleSelect(id) {
emit('select', id)
}
</script>
<template>
<div @click="handleSelect(props.name)">
{{ props.name }} ({{ props.age }})
</div>
</template>
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
.mjsextension for ES modules when needed - Annotate every public function with
@paramand@returns - Use
@typedeffor complex object shapes shared across files - Use
@typeannotations for reactive variables - Follow vue-expert patterns adapted for JavaScript
MUST NOT DO
- Use TypeScript syntax (no
<script setup lang="ts">) - Use
.tsfile 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:
- Component file with
<script setup>(no lang attribute) and JSDoc-typed props/emits @typedefdefinitions for complex prop or state shapes- Composable with
@paramand@returnsannotations - 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+
Maintained by @jeffallan, Principal Consultant at Synergetic Solutions
FAQ
What does the vue-expert-js skill do?
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.
How do I install vue-expert-js?
Run npx skills add https://github.com/jeffallan/claude-skills --skill vue-expert-js in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/vue-expert-js/ (personal) or .claude/skills/vue-expert-js/ (project).
Which AI agents can use vue-expert-js?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is vue-expert-js safe to install?
Security partners have reviewed it: Gen Agent Trust Hub flagged risks; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains vue-expert-js?
It is published by jeffallan in jeffallan/claude-skills. It has 4,080 recorded installs.
More from jeffallan/claude-skills
laravel-specialist
jeffallan/claude-skills
Build and configure Laravel 10+ applications, including creating Eloquent models and relationships, implementing Sanctum authentication, configuring Horizon queues, designing RESTful APIs with API resources, and building reactive interfaces with Livewire. Use when creating Laravel models, setting up queue workers, implementing Sanctum auth flows, building Livewire components, optimising Eloquent queries, or writing Pest/PHPUnit tests for Laravel features.
golang-pro
jeffallan/claude-skills
Implements concurrent Go patterns using goroutines and channels, designs and builds microservices with gRPC or REST, optimizes Go application performance with pprof, and enforces idiomatic Go with generics, interfaces, and robust error handling. Use when building Go applications requiring concurrent programming, microservices architecture, or high-performance systems. Invoke for goroutines, channels, Go generics, gRPC integration, CLI tools, benchmarks, or table-driven testing.
php-pro
jeffallan/claude-skills
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typing, PHPStan level 9, async patterns with Swoole, and PSR standards. Creates controllers, configures middleware, generates migrations, writes PHPUnit/Pest tests, defines typed DTOs and value objects, sets up dependency injection, and scaffolds REST/GraphQL APIs. Use when working with Eloquent, Doctrine, Composer, Psalm, ReactPHP, or any PHP API development.
flutter-expert
jeffallan/claude-skills
Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.
typescript-pro
jeffallan/claude-skills
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety. Use when building TypeScript applications requiring advanced generics, conditional or mapped types, discriminated unions, monorepo setup, or full-stack type safety with tRPC.
kubernetes-specialist
jeffallan/claude-skills
Use when deploying or managing Kubernetes workloads. Invoke to create deployment manifests, configure pod security policies, set up service accounts, define network isolation rules, debug pod crashes, analyze resource limits, inspect container logs, or right-size workloads. Use for Helm charts, RBAC policies, NetworkPolicies, storage configuration, performance optimization, GitOps pipelines, and multi-cluster management.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.