Skip to main content
skill CX Codex

vue · uni-helper — Claude Code skill: what it does, how to install

Guides agent code generation for Vue components and reactivity patterns. Helpful when writing composables or using script setup.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add uni-helper/skills --skill vue -a claude-code
Open on GitHub

What vue does

This skill guides your coding agent when writing Vue applications. It focuses on the Composition API combined with <script setup> and TypeScript. The references cover core reactivity primitives such as ref and computed, directing models toward modern patterns.

Component mechanics include type-based props declarations, custom event emissions, and two-way binding via defineModel. Advanced topics cover dependency injection with provide and inject, template refs, and asynchronous handling with Suspense.

The skill strictly favors TypeScript and <script setup> conventions. If your repository relies on the legacy Options API or plain JavaScript, the generated code will clash with your architecture.

What it helps with

  • configure two-way data binding with defineModel
  • declare type-safe component props using interfaces
  • extract reusable stateful logic into composables
  • destructure props without breaking reactivity

Example prompts for the agent

  • Create an input modal component using defineModel for two-way binding
  • Extract this filtering logic into a separate composable
  • Write a typed card component using <script setup lang="ts">

How to install vue

1Skills CLI (Vercel)

npx skills add uni-helper/skills --skill vue -a claude-code

2Manually: put the files in place

~/.claude/skills/vue/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vue/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vue

How to install vue in Claude Code?

Run npx skills add uni-helper/skills --skill vue -a claude-code. The skill file will be stored in ~/.claude/skills/vue/SKILL.md.

What does the vue skill do?

It provides coding instructions and documentation references for building Vue components with the Composition API and TypeScript.

What does the skill recommend for local state?

It advises using ref() instead of reactive() when declaring reactive state across components.

Source text

SKILL.md · MIT
---
name: vue
description: Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vuejs/docs, scripts located at https://github.com/antfu/skills
---

# Vue

> The skill is based on Vue 3.5+, generated at 2026-01-28.

Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with `<script setup>` and TypeScript is the recommended approach for building Vue applications.

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Reactivity System | ref, reactive, computed, watch, and watchEffect | [core-reactivity](references/core-reactivity.md) |

## Components

| Topic | Description | Reference |
|-------|-------------|-----------|
| Props | Declare and validate component props with TypeScript | [components-props](references/components-props.md) |
| Events (Emits) | Emit custom events from components | [components-emits](references/components-emits.md) |
| Slots | Pass template content to child components | [components-slots](references/components-slots.md) |
| v-model | Two-way binding on custom components | [components-v-model](references/components-v-model.md) |
| Lifecycle Hooks | Run code at specific component lifecycle stages | [components-lifecycle](references/components-lifecycle.md) |

## Features

### Script Setup & TypeScript

| Topic | Description | Reference |
|-------|-------------|-----------|
| Script Setup | Composition API syntactic sugar for SFCs | [features-script-setup](references/features-script-setup.md) |
| TypeScript | Type-safe Vue components with Composition API | [features-typescript](references/features-typescript.md) |

### Reusability

| Topic | Description | Reference |
|-------|-------------|-----------|
| Composables | Encapsulate and reuse stateful logic | [features-composables](references/features-composables.md) |
| Custom Directives | Low-level DOM manipulation directives | [features-directives](references/features-directives.md) |
| Template Refs | Direct DOM and component instance access | [features-template-refs](references/features-template-refs.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Provide/Inject | Dependency injection across component tree | [advanced-provide-inject](references/advanced-provide-inject.md) |
| Async & Suspense | Top-level await pitfalls, async components, Suspense | [advanced-async-suspense](references/advanced-async-suspense.md) |

## Key Recommendations

- **Use `<script setup lang="ts">`** for all components
- **Prefer `ref()` over `reactive()`** for declaring state
- **Use type-based prop declarations** with interfaces
- **Use `defineModel()`** for v-model (3.4+)
- **Destructure props reactively** (3.5+) for cleaner code
- **Extract composables** for reusable stateful logic

© Anthony Fu · MIT · uni-helper/skills

Similar skills

Everything for Frontend and UI →

vue by other authors comes first.

vue Anthony Fu This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. CX Codex +1 35,800installs vue vercel-labs A skill to convert JSON specifications into Vue 3 components with data binding, visibility conditions, and action handling. Use it if you generate interfaces via AI or build UIs from JSON. CX Codex +1 1,400installs vue Claude MPM Team A Vue 3 skill for your coding agent: Composition API, reactivity, single-file components, Vue Router, Pinia, TypeScript and Vite. Useful when the agent writes Vue frontend code. CX Codex +1 381installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set4

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor