agentskills.codes
VU

vue-best-practices

by antfuCodingSource

This skill implements a consistent Vue project architecture using the Composition API, script setup, and state management.

FrontendCode GenerationVueTypeScriptJavaScript

Install

mkdir -p .claude/skills/vue-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1475" && unzip -o skill.zip -d .claude/skills/vue-best-practices && rm skill.zip

Installs to .claude/skills/vue-best-practices

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
315 charsno explicit “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)
Intermediate

Key capabilities

  • →Implement Composition API with script setup
  • →Define component data flow contracts
  • →Extract logic into composables
  • →Split components by responsibility

How it works

It enforces a consistent architecture using the Composition API, TypeScript, and explicit component boundaries.

Inputs & outputs

You give it
Vue component requirements
You get back
Refactored, typed Vue components

When to use vue-best-practices

  • →Refactoring to Composition API
  • →Designing component data flows
  • →Setting up Vue 3 projects

About vue-best-practices

This skill enforces a consistent architecture for Vue projects. It focuses on the Composition API with script setup, predictable state management, and clear component boundaries.

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

When not to use it

  • →When the project explicitly requires Options API

Prerequisites

Vue 3 environment

Limitations

  • →Requires TypeScript configuration
  • →Strict adherence to SFC structure

How it compares

It mandates a specific, predictable architecture compared to generic Vue development.

Compared to similar skills

vue-best-practices side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
vue-best-practices (this skill)196moNo flagsIntermediate
vue-pages18moNo flagsIntermediate
pinia18moNo flagsIntermediate
vue08moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by antfu

View all by antfu →

vitest

antfu

Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

41183

nuxt

antfu

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

1950

vue

antfu

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

1031

unocss

antfu

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

942

vite

antfu

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

735

antfu

antfu

Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.

633

You might also like

vue-pages

JaguarJack

Generate Vue frontend pages using catch-table for CatchAdmin module with full component features.

16

pinia

antfu

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

14

vue

valibali

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

00

vue

TerminalSkills

|

00

vue-testing-best-practices

vuejs-ai

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

534

vue-debug-guides

vuejs-ai

Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

431

Search skills

Search the agent skills registry