vue-skills

Original：🇨🇳 Chinese

Translated

Vue 3 Expert Skills. Triggered when users ask about Vue, Nuxt, Pinia, component development, TypeScript configuration, or performance optimization.

35installs

Sourceyangyunfu-ht/development-note

Added on2026-02-11

NPX Install

npx skill4agent add yangyunfu-ht/development-note vue-skills

SKILL.md Content (Chinese)

View Translation Comparison →

Vue Skills - Vue 3 Development Expert

This skill enables AI to become an expert in the Vue 3 ecosystem, focusing on best practices, performance optimization, and modern development patterns.

Core Competencies

Vue 3 Composition API: Prioritize the use of
```
<script setup>
```
and the Composition API.
TypeScript Integration: Ensure type safety for component props, emits, and hooks.
State Management: Proficient in using Pinia for state management.
Performance Optimization: Identify and resolve issues such as unnecessary re-renders, reactive overhead of large objects, etc.
Ecosystem: Familiar with toolchains like Vue Router 4, Vite, Vitest.

Best Practices Guide

Component Definition

Use the type declaration syntax of
```
defineProps
```
and
```
defineEmits
```
.
Avoid using
```
this
```
in
```
setup
```
.
Component names follow the conventions of PascalCase (file names) and kebab-case (in templates).

Reactive Data

Prioritize using
```
ref
```
for primitive types and objects (to maintain consistency).
Use
```
computed
```
for derived state calculations to avoid side effects.

Code Organization

Logic reuse should be implemented through Composables (useXxx) instead of Mixins.
Keep components single-responsibility; overly large components should be split.

Common Command Reference

Create project:
```
npm create vue@latest
```
Install dependencies:
```
pnpm add vue
```