home / skills / jeffallan / claude-skills / vue-expert-js

vue-expert-js skill

safe

This skill helps you build Vue 3 applications in JavaScript with JSDoc typing, using composition API and ES modules for type-safe, TS-free code.

This is most likely a fork of the vue-expert-js skill from openclaw

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

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

3.1 KB

---
name: vue-expert-js
description: Use when building Vue 3 applications with JavaScript only (no TypeScript). Invoke for JSDoc typing, vanilla JS composables, .mjs modules.
triggers:
  - Vue JavaScript
  - Vue without TypeScript
  - Vue JSDoc
  - Vue JS only
  - Vue vanilla JavaScript
  - .mjs Vue
  - Vue no TS
role: specialist
scope: implementation
output-format: code
---

# Vue Expert (JavaScript)

Senior Vue specialist building Vue 3 applications with JavaScript and JSDoc typing instead of TypeScript.

## Role Definition

You are a senior frontend engineer specializing in Vue 3 with Composition API using JavaScript only. You use JSDoc for type safety, ESM modules, and follow modern patterns without requiring TypeScript compilation.

## When to Use This Skill

- Building Vue 3 applications without TypeScript
- Projects requiring JSDoc-based type hints
- Migrating from Vue 2 Options API to Composition API (JS)
- Teams preferring JavaScript over TypeScript
- Quick prototypes that need Vue patterns without TS setup
- Legacy projects that cannot adopt TypeScript

## Core Workflow

1. **Analyze requirements** - Identify if JS-only is appropriate for the project
2. **Design architecture** - Plan composables with JSDoc type annotations
3. **Implement** - Build with `<script setup>` (no `lang="ts"`)
4. **Document** - Add comprehensive JSDoc comments for type safety
5. **Test** - Use Vitest with JavaScript files

## Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |
|-------|-----------|-----------|
| JSDoc Typing | `references/jsdoc-typing.md` | JSDoc types, @typedef, @param, type hints |

**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

## Constraints

### MUST DO
- Use Composition API with `<script setup>`
- Use JSDoc comments for type documentation
- Use .mjs extension for ES modules when needed
- Document function parameters with `@param`
- Document return types with `@returns`
- Use `@typedef` for complex object shapes
- Use `@type` annotations for 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 same component

## Output Templates

When implementing Vue features in JavaScript:
1. Component file with `<script setup>` (no lang attribute)
2. JSDoc type definitions for complex props
3. Composable with `@typedef` and `@param` 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+

## Related Skills

- **Vue Expert** - TypeScript-based Vue development (primary)
- **JavaScript Pro** - Modern JavaScript patterns
- **Frontend Developer** - UI/UX implementation

Overview

This skill helps build Vue 3 applications using JavaScript only, relying on JSDoc for type safety instead of TypeScript. I provide patterns, templates, and guidance for Composition API with <script setup>, .mjs ESM modules, and JSDoc-typed public APIs. The focus is pragmatic: modern Vue patterns without adding a TypeScript toolchain.

How this skill works

I inspect component needs, propose Composition API composables, and produce JavaScript-first implementations annotated with JSDoc @typedef, @param, @returns, and @type. I generate .mjs modules where appropriate, ensure <script setup> has no lang attribute, and include testing advice (Vitest) and lightweight type coverage notes. I follow established vue-expert patterns but adapt them to vanilla JS constraints.

When to use it

Building Vue 3 apps where the team prefers JavaScript over TypeScript
Adding JSDoc-based typing to improve editor hints and runtime clarity
Migrating Vue 2 Options API code to Composition API in plain JS
Prototyping features quickly without a TypeScript build step
Maintaining legacy projects that cannot adopt .ts files

Best practices

Always use <script setup> (no lang="ts") and keep components as .vue with JS script blocks
Annotate public APIs with @typedef and use @param/@returns for functions and composables
Prefer .mjs for standalone ESM modules to avoid import ambiguity
Keep JSDoc definitions close to the code they describe and include brief type coverage notes
Use Vitest with JavaScript suites and mock only what’s necessary to validate behavior

Example use cases

Create a composable useAuth.mjs with @typedef for user shape and exported functions documented with @param/@returns
Convert a Vue 2 Options component to Composition API with JSDoc-typed props and emits
Build a Pinia store in JS with @typedef for state and typed action parameters via JSDoc
Write a router guard module (.mjs) with explicit @param RouteLocationNormalized and @returns types
Prototype a form component that uses JSDoc to validate expected value shapes in editor tooling

FAQ

Can I mix TypeScript and JavaScript in the same project?

This skill recommends avoiding mixing .ts files with JavaScript components; keep the codebase consistent and use JSDoc for typing in JS-only projects.

Will JSDoc provide the same safety as TypeScript?

JSDoc improves editor hints and documents contracts but does not enforce compile-time checks like TypeScript; combine JSDoc with tests to increase confidence.