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.
npx skills add uni-helper/skills --skill vue -a claude-codeWhat 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
defineModelfor 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-code2Manually: put the files in place
~/.claude/skills/vue/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vue/
1Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a codex2Manually: put the files in place
.agents/skills/vue/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a cursor2Manually: put the files in place
.cursor/skills/vue/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install uni-helper/skills vue2Manually: put the files in place
.github/skills/vue/SKILL.md1Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a gemini-cli2Platform CLI
gemini skills install https://github.com/uni-helper/skills --path skills/vueManually: put the files in place
.devin/skills/vue/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add uni-helper/skills --skill vue -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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.