Guide · Agent skill
How to use the Vue 3 JavaScript Expert agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The vue-expert-js skill is a set of instructions that teaches an AI agent how to write Vue 3 applications in plain JavaScript instead of TypeScript. It covers components with script setup, composables, Vite configuration, routing, state management and Vitest tests, with types documented through JSDoc comments. This guide explains what the skill changes, how to install it, how to ask for it in natural language, and where its limits are.
Vue 3 JavaScript ExpertJeffallan/claude-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the vue-expert-js skill ZIP from this page and unzip it.
- 2Place the folder. Move the unzipped folder to ~/.claude/skills/ for all projects, or to .claude/skills/ in one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Make a clear request. Describe a Vue 3 task and state that you want JavaScript only, with JSDoc types instead of TypeScript.
- 5Review the code. Read the generated components and composables and check the JSDoc annotations.
- 6Run the tests. Install Vitest and Vue Test Utils in your project and run the tests the agent wrote.
What the skill makes the agent do
Once installed, the agent writes Vue 3 code using the Composition API with <script setup> and no lang="ts" attribute. Instead of TypeScript types, it documents shapes and function signatures with JSDoc tags such as @typedef, @param, @returns and @type, so editors and linters can check the code without a TypeScript compiler.
The skill's workflow asks the agent to design the component or composable structure, implement it, add JSDoc annotations, and then run ESLint with the eslint-plugin-jsdoc plugin to check coverage. It also asks for Vitest tests written in JavaScript. The skill names a related general Vue skill, vue-expert, for shared concepts such as core reactivity, props and Pinia stores.
- Components with JSDoc-typed props and emits
- Composables that use @param and @returns
- @typedef definitions for shared object shapes such as a user type
- Vite, routing and state management setup in JavaScript
- Vitest tests for components and composables
How to install the vue-expert-js skill
Download the skill ZIP from this page and unzip it. To make it available across all your projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with natural requests
You do not need a special command. The skill is meant to be picked up when your request matches its description, so state the JavaScript-only requirement clearly. Mentioning JSDoc, .mjs modules or the absence of TypeScript helps match it to your request.
The skill's trigger phrases include Vue JavaScript, Vue without TypeScript, Vue JSDoc, Vue JS only, Vue vanilla JavaScript, .mjs Vue and Vue no TS.
- Build a Vue 3 login form component in plain JavaScript with JSDoc types.
- Write a useCounter composable in .mjs with @param and @returns annotations.
- Migrate this Vue 2 Options API component to the Composition API in JavaScript, no TypeScript.
- Set up a Vite project for a Vue 3 prototype without TypeScript.
Example: a typed component and composable
A typical result is a component using defineProps with a JSDoc @typedef describing its props, and a composable file that returns a typed object. The composable example in the skill defines a CounterState typedef, documents its parameters with @param, and annotates the return value with @returns.
Review the output before using it. The skill is built to produce code that you still need to run and check.
// composables/useCounter.mjs
import { ref, computed } from 'vue'
/**
* @param {number} [initial=0] - Starting value
* @param {number} [step=1] - Amount to increment per call
* @returns {CounterState}
*/
export function useCounter(initial = 0, step = 1) { /* ... */ }What you need before using it
The skill itself is instructions and reference files. It does not bundle any libraries. The projects it generates use Node.js and a JavaScript toolchain, Vue 3, Vite, Vitest, Vue Test Utils, Pinia and eslint-plugin-jsdoc. Install these in your project as needed; the skill does not install them for you.
The skill does not run scripts and does not use the network, according to the assessment for this item.
- Node.js and a JavaScript toolchain
- Vue 3 and Vite
- Vitest and Vue Test Utils for tests
- Pinia for state management
- eslint-plugin-jsdoc for JSDoc checks
Safety notes and limits
The skill runs no scripts and makes no network requests, so the risks are mainly in the code it writes. Treat generated code like any other code: read it, run the tests and check it in your linter.
JSDoc annotations are not a full type guarantee. The skill asks for ESLint JSDoc checks but does not promise complete type safety. If you need strict verification, use a TypeScript project instead, and note that the skill forbids TypeScript syntax, so the TypeScript-focused Vue skill fits those projects better.
- No scripts run and no network use, per the assessment
- Review and test all generated code
- Do not expect JSDoc to match full TypeScript checking
Tips for better results
State your constraints up front: JavaScript only, script setup, .mjs modules, and whether you use Pinia or Vue Router. Ask for JSDoc annotations on every public function if you want them, since the skill's rules already require @param and @returns on public functions.
For a migration, paste the old Options API component and say which parts to keep. Ask for Vitest tests with the change so you can confirm behaviour matches.
- Name the libraries you use so the output matches your stack.
- Ask for the tests in the same request as the code.
- Use the skill for a new prototype or a JavaScript codebase, not for projects already written in TypeScript.
What people use it for
- Building a Vue 3 component library in plain JavaScript with typed props via JSDoc
- Migrating a Vue 2 Options API codebase to the Composition API without adding TypeScript
- Creating a quick Vue prototype or student project with no TypeScript setup
- Writing .mjs composables with @param and @returns annotations for a team that prefers vanilla JavaScript
Frequently asked questions
Is the vue-expert-js skill free?
The skill is licensed under MIT, as stated on this page. The MIT licence governs the skill's source; check the licence file in the download for the exact terms.
What do I need to use the vue-expert-js skill?
You need an agent that supports skills and a Node.js JavaScript toolchain for the projects it generates. The projects also use Vue 3, Vite, Vitest, Vue Test Utils, Pinia and eslint-plugin-jsdoc, which you install yourself.
Does the vue-expert-js skill run scripts or use the internet?
According to the assessment on this page, the skill runs no scripts and uses no network access. It consists of instructions and reference files.
Can I use vue-expert-js for a TypeScript project?
No. The skill forbids TypeScript syntax, including script setup with lang="ts" and .ts files. For TypeScript projects, the skill's page recommends the TypeScript-focused Vue skill.
Does JSDoc give the same safety as TypeScript?
No. JSDoc annotations help editors and linters check code, and the skill asks for ESLint JSDoc checks, but it does not guarantee complete type safety. Test your code and review the annotations.
How is this different from the general vue-expert skill?
The general vue-expert skill covers shared Vue concepts. vue-expert-js applies those patterns in plain JavaScript with JSDoc typing and defers to vue-expert for shared topics such as core reactivity, props and Pinia stores.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use vue-expert-js if you build Vue 3 apps in plain JavaScript, want JSDoc type hints without a TypeScript compiler, or are migrating Vue 2 Options API code to the Composition API. Pick a TypeScript-focused Vue skill if your project already uses TypeScript, and do not rely on this skill if you need fully verified type safety or a finished app without reviewing the code.
Download the skill