Skip to content
Get packs

Vue 3 JavaScript Expert

Builds Vue 3 components and composables in plain JavaScript with JSDoc types, no TypeScript

Source Download skill
Repository
Jeffallan/claude-skills
Stars
12,176
Licence
MIT
Files
6 files

What it does

When this skill is installed, the agent writes Vue 3 applications using plain JavaScript instead of TypeScript, using the modern Composition API with script setup. It documents types with JSDoc comments (typedef, param, returns) so editors and linters can check code without a TypeScript compiler. It also helps with Vite configuration, routing, state management, and Vitest tests, and it points to a related general Vue skill for shared concepts.

Great for

  • Developers building Vue 3 apps who want to avoid TypeScript
  • Teams that prefer vanilla JavaScript or .mjs modules and still want type hints
  • Developers migrating a Vue 2 Options API codebase to the Composition API in JavaScript
  • Students or prototypers who want quick Vue projects without TypeScript setup

Skip it if

  • Projects that already use TypeScript, where the TypeScript-focused Vue skill fits better (the skill forbids TypeScript syntax)
  • Non-programmers looking for a finished app, since the output is code that still needs to be run and reviewed
  • Projects where the JSDoc annotations must be fully verified: the skill asks for ESLint JSDoc checks but does not guarantee complete type safety

Try asking

  • “Create a Vue 3 component with typed props and emits using script setup, no TypeScript”
  • “Write a useCounter-style composable in .mjs with JSDoc @param and @returns annotations”
  • “Set up a Vite project for Vue 3 in plain JavaScript with Vitest tests”
  • “Migrate this Options API Vue 2 component to Composition API with JSDoc types”
Step-by-step guide: how to use Vue 3 JavaScript ExpertInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    vue-expert-js.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip vue-expert-js.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip vue-expert-js.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask the agent to run ESLint with eslint-plugin-jsdoc and Vitest after generating code, as the skill's workflow expects, and review the results yourself
  • Name the Vue features you need (Pinia, Vue Router, VueUse) so the agent loads the matching reference file
  • Review generated JSDoc types, since annotations are documentation and are not checked by a compiler unless tooling is configured

What's inside

  • references/component-architecture.md
  • references/composables-patterns.md
  • references/jsdoc-typing.md
  • references/state-management.md
  • references/testing-patterns.md
  • SKILL.md

Redistributed unmodified from Jeffallan/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.