vue

Overview of vue skill

What the vue skill is for

The vue skill is a focused guide for generating and reviewing Vue 3 code with current best practices, especially Composition API, <script setup lang="ts">, compiler macros, reactivity APIs, and built-in components like Transition, Teleport, Suspense, and KeepAlive. It is most useful when you want an AI agent to produce Vue Single File Components that already follow a modern Vue style instead of falling back to older Options API patterns.

Who should install this vue skill

This vue skill fits frontend developers, full-stack developers, and AI users who regularly ask for Vue components, composables, or refactors. It is especially valuable if you want outputs that are TypeScript-first, macro-aware, and aligned with Vue 3.5-era docs rather than mixed Vue 2 / early Vue 3 habits.

Real job-to-be-done

Most users do not need a generic framework summary. They need the agent to reliably write Vue code that:

• uses Composition API by default
• prefers <script setup lang="ts">
• handles defineProps, defineEmits, and defineModel correctly
• chooses ref, shallowRef, computed, and watch more carefully
• reaches for advanced built-ins only when they actually fit

That is the practical value of vue for Frontend Development: reducing cleanup after AI-generated code.

What makes this skill meaningfully different

The strongest differentiator is opinionated guidance. The source explicitly prefers TypeScript, <script setup lang="ts">, and Composition API, and it discourages Reactive Props Destructure. It also includes focused references for:

• script setup macros
• reactivity and newer core APIs
• advanced built-in components and directives

That makes the skill better for implementation work than a broad “teach me Vue” prompt.

What this skill does not try to cover

This is not a full Vue ecosystem map. It is not a replacement for deep docs on routing, state libraries, SSR frameworks, testing, or build tooling. If your main task is Nuxt architecture, Vue Router setup, Pinia design, or deployment pipelines, the vue skill helps with component-level code style but should not be your only source.

How to Use vue skill

Install context for vue

Install the skill into your skills-enabled environment with:

npx skills add antfu/skills --skill vue

The repository evidence shows the skill lives under skills/vue in antfu/skills. There is no separate package install for Vue itself here; this is guidance for better AI-assisted Vue generation, not the framework runtime.

Read these files first

If you want the highest-signal path before using the vue skill, read these in order:

1. skills/vue/SKILL.md
2. skills/vue/references/script-setup-macros.md
3. skills/vue/references/core-new-apis.md
4. skills/vue/references/advanced-patterns.md
5. skills/vue/GENERATION.md

Why this order:

• SKILL.md gives the operating preferences and scope.
• The three reference files hold the practical details the agent is likely to apply.
• GENERATION.md tells you the material is generated from Vue docs and tracks a recent snapshot.

What inputs the vue skill needs

The vue usage quality depends heavily on the request you pass in. Give the agent:

• component purpose
• props and emitted events
• whether you need v-model
• expected state shape
• async data needs
• whether the output should be a component, composable, or pattern example
• Vue version constraints if you are not on recent Vue 3
• TypeScript requirement
• any UI or performance constraints

Weak input:

• “Make a Vue component for search.”

Strong input:

• “Create a Vue 3.5 SFC using <script setup lang="ts"> for a searchable product list. Props: items, loading, modelValue. Emit update:modelValue and select. Use defineModel if appropriate, debounce local search input, and prefer shallowRef for large item arrays.”

Turn rough goals into strong vue prompts

To invoke the vue skill well, ask for implementation choices explicitly. Good prompt structure:

1. state the artifact
2. state the Vue conventions
3. define inputs and outputs
4. add behavior and constraints
5. ask for reasoning where tradeoffs matter

Example:

“Using the vue skill style, write a Vue 3 component with <script setup lang="ts">. Use Composition API only. Define typed props and emits, avoid Options API, and explain whether ref or shallowRef is the better fit for the main state. Include template and minimal styles.”

This works better than a generic “write Vue” request because it matches the skill’s built-in preferences.

Default coding style the skill will push toward

The source material strongly nudges the agent toward:

• Vue 3.5
• Composition API
• <script setup lang="ts">
• macro-based component definitions
• typed props and emits
• selective use of shallowRef for performance-sensitive data

If you want Options API, plain JavaScript, or legacy Vue patterns, say so explicitly because the skill is biased away from them.

Best use cases for vue usage

This vue guide is strongest for:

• authoring new Vue SFCs
• refactoring old components into <script setup>
• defining typed props, emits, and models
• choosing between ref, reactive, computed, and watchers
• using Transition, Teleport, Suspense, or KeepAlive
• producing composable examples that follow modern Vue patterns

It is less useful for purely visual design work or framework-agnostic frontend tasks.

Practical workflow for first output

A reliable workflow is:

1. Ask for a first-pass Vue SFC with explicit props, emits, and state shape.
2. Review whether the generated API matches your real component contract.
3. Ask for a second pass that tightens reactivity choices, typing, and edge cases.
4. Only then ask for advanced features like transitions or suspense boundaries.

This sequence matters because advanced Vue features are easy to overuse if the basic state flow is still unclear.

Repository-backed details that affect output quality

Useful details surfaced from the skill source:

• defineModel is treated as available in Vue 3.4+
• withDefaults remains relevant for Vue 3.4 and below
• reactive() loses reactivity on destructuring
• shallowRef is preferred when deep reactivity is unnecessary
• built-ins such as Transition and Suspense are covered with practical patterns

These are exactly the kinds of details that improve generated code beyond a shallow repo skim.

Example requests that fit the skill well

Good vue usage requests:

• “Refactor this Options API component into <script setup lang="ts">.”
• “Generate typed defineProps and defineEmits for this form component.”
• “Show a Vue 3 example using Teleport for a modal.”
• “Explain whether to use watch, watchEffect, or computed here.”
• “Rewrite this component to use defineModel on Vue 3.4+.”

Common mismatch cases before you install

Do not expect the vue skill alone to solve:

• project scaffolding
• router architecture
• state store design across a large app
• SSR or Nuxt-specific decisions
• test runner setup
• CSS framework integration details

If those are your main blockers, install this for component generation quality, not as your complete Vue stack guide.

vue skill FAQ

Is this vue skill good for beginners?

Yes, if you are already building with Vue 3 and want cleaner AI output. It is not a beginner curriculum, but it does reduce confusion by favoring one clear style: Composition API with <script setup lang="ts">. That consistency helps newer users avoid mixed patterns.

Does the vue skill support older Vue patterns?

Not as a first choice. The source says to always use Composition API over Options API. If your codebase is legacy-heavy, you can still use the skill, but you should explicitly request compatibility constraints and review migrations carefully.

How is this different from a normal prompt about Vue?

A normal prompt often produces inconsistent Vue code: mixed APIs, weaker typing, or outdated macros. The vue skill gives the agent a narrower playbook, including preferences, modern macro usage, and targeted references. That usually means less manual correction.

Is vue install enough if I work with Nuxt or a larger stack?

No. vue install helps with component and reactivity guidance, but larger stack concerns still need Nuxt, routing, state, data fetching, and deployment knowledge. Use this as a Vue code-generation layer, not a whole application architecture skill.

When should I not use the vue skill?

Skip it when your task is:

• framework-neutral UI code
• React/Angular/Svelte work
• backend-only implementation
• heavy Nuxt-specific conventions with little raw Vue component work
• strict legacy Options API maintenance where modern patterns are not allowed

Does it cover advanced Vue features?

Yes, but selectively. The included references cover Transition, Teleport, Suspense, KeepAlive, directives, reactivity APIs, lifecycle hooks, and macros. That is enough for many real frontend tasks without becoming a full Vue encyclopedia.

How to Improve vue skill

Give the agent version and compatibility boundaries

The skill is based on Vue 3.5-era guidance. If your app uses Vue 3.3, 3.4, or has older macro support limits, say that up front. This is especially important for features like defineModel and for how defaults are handled in props.

Specify component contracts, not just UI ideas

The fastest way to improve vue output is to provide:

• prop names and types
• emitted events
• model bindings
• async states
• empty and error states
• parent-child responsibilities

The skill is strong at implementation once the contract is clear. It is weaker when asked to infer a complete API from a vague UI description.

Ask for reactivity choices explicitly

Many Vue mistakes come from state modeling, not template syntax. Prompt for tradeoffs like:

• “Use shallowRef if deep tracking is unnecessary.”
• “Explain whether computed or watch is more appropriate.”
• “Avoid destructuring reactive objects unless using toRefs.”

This aligns with the strongest material in the references and improves code quality more than asking for “best practices” in the abstract.

Catch common failure modes early

Review first outputs for these issues:

• Options API appearing when you wanted Composition API
• plain <script> instead of <script setup lang="ts">
• untyped defineProps or defineEmits
• unnecessary deep reactivity
• misuse of watchers where computed would be simpler
• advanced built-ins added without a real need

These are the most likely ways generic generation drifts away from the skill’s intended quality bar.

Iterate on one concern at a time

After the first answer, do not ask for everything at once. Improve in passes:

1. API shape
2. typing and macros
3. reactivity correctness
4. rendering states
5. advanced UX patterns

That makes it easier to verify each change and keeps the agent anchored to the vue guide rather than regenerating the whole component unpredictably.

Use the reference files as escalation paths

When the first result is close but not solid, direct the agent toward the skill’s own references:

• references/script-setup-macros.md for props, emits, models, slots, and macro syntax
• references/core-new-apis.md for reactivity, watchers, and composables
• references/advanced-patterns.md for built-in components and directives

This is one of the most practical ways to improve vue for Frontend Development outputs without rewriting your prompt from scratch.

Ask for a minimal and a production pass

A high-yield pattern is:

• first request: minimal working SFC
• second request: production pass with typing, states, accessibility, and performance choices

This avoids bloated first drafts and surfaces where Vue-specific decisions actually matter.

Keep the skill aligned with your codebase rules

If your team has conventions that differ from the skill’s defaults, state them directly. For example:

• JavaScript only
• no defineModel
• avoid Suspense
• use explicit prop objects instead of type-only declarations
• no advanced built-ins unless requested

The vue skill is opinionated, which is useful, but you will get the best results when its defaults are adjusted to your real repository constraints.