Do I need TypeScript to use this skill?

No. It’s designed for JavaScript-only Vue 3 apps, with optional JSDoc typing for type safety.

How do I document types for public APIs?

Use JSDoc: @typedef for complex shapes, and @param/@returns to describe function inputs and outputs; apply @type for variables.

What module system is recommended?

Use ES modules with .mjs extensions when appropriate; avoid CommonJS and ensure components use without a ts language attribute.

vue-expert-js

npx machina-cli add skill Jeffallan/claude-skills/vue-expert-js --openclaw

Files (1)

SKILL.md

3.4 KB

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

Analyze requirements - Identify if JS-only is appropriate for the project
Design architecture - Plan composables with JSDoc type annotations
Implement - Build with <script setup> (no lang="ts")
Document - Add comprehensive JSDoc comments for type safety
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
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

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:

Component file with <script setup> (no lang attribute)
JSDoc type definitions for complex props
Composable with @typedef and @param annotations
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+

Source

git clone https://github.com/Jeffallan/claude-skills/blob/main/skills/vue-expert-js/SKILL.mdView on GitHub

Overview

Specializes in building Vue 3 apps using JavaScript only, leveraging JSDoc for type hints and ES modules. Emphasizes Composition API via <script setup> without TypeScript while maintaining type safety through documentation and typedefs.

How This Skill Works

Follows a structured workflow: evaluate if JS-only is suitable, design architecture with JSDoc-annotated composables, implement using <script setup> (no lang="ts"), document public APIs with JSDoc (@param, @returns, @typedef), and test with Vitest. Uses .mjs modules to align with ES module patterns.

When to Use It

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

Quick Start

Step 1: Analyze requirements to confirm JS-only suitability for the project
Step 2: Design architecture with JSDoc-annotated composables and ES modules
Step 3: Implement using <script setup> (no lang="ts"), add typedefs, and test with Vitest

Best Practices

Use the Composition API with <script setup> and no TypeScript
Document public APIs with JSDoc comments for type safety
Prefer .mjs extensions for ES modules when needed
Annotate function parameters with @param and return types with @returns
Define complex shapes with @typedef and use @type annotations for variables

Example Use Cases

Building a Vue 3 app in plain JavaScript with JSDoc for type hints
Migrating a Vue 2 Options API project to Vue 3 Composition API using JS
Creating reusable JS-based composables with explicit JSDoc types
Structuring components (props, emits, slots) using JavaScript with typings
Prototyping features quickly in JS while maintaining type safety through JSDoc

Frequently Asked Questions

Add this skill to your agents