Vue Best Practices
技能 已验证 活跃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.
To guide developers in applying modern Vue.js best practices, ensuring maintainable, performant, and scalable Vue 3 applications.
功能
- Enforces Composition API with `<script setup>` and TypeScript
- Covers Vue 3, SSR, Volar, and vue-tsc specifics
- Provides detailed guides on reactivity, component data flow, and SFC structure
- Offers optimization strategies for lists and animations
- Recommends modern Vue features like `defineModel` and `Suspense`
使用场景
- When starting a new Vue 3 project and wanting to establish best practices from the beginning
- For refactoring existing Vue projects to adopt Composition API and TypeScript standards
- When encountering common Vue.js pitfalls like reactivity issues or component communication problems
- To improve the performance and maintainability of large Vue applications
非目标
- Providing executable code to automatically refactor projects
- Covering advanced or niche Vue ecosystem libraries not core to best practices
- Acting as a general-purpose Vue debugger
安装
请先添加 Marketplace
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skills质量评分
已验证类似扩展
Coding Standards
100Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.
Migrate Validate
100Validate pending migrations for foreign key consistency, rollback safety, and best practices
Semgrep Rule Creator
100Creates custom Semgrep rules for detecting security vulnerabilities, bug patterns, and code patterns. Use when writing Semgrep rules or building custom static analysis detections.
Moyu (摸鱼)
100감지된 과잉 엔지니어링 패턴: (1) 사용자가 명시적으로 요청하지 않은 코드나 파일을 수정할 때 (2) 요청되지 않은 새로운 추상화 계층(클래스, 인터페이스, 팩토리, 래퍼)을 생성할 때 (3) 요청되지 않은 주석, 문서, JSDoc, 타입 주석을 추가할 때 (4) 요청되지 않은 새로운 종속성을 도입할 때 (5) 최소 편집 대신 파일 전체를 다시 작성할 때 (6) diff 범위가 사용자의 요청을 명백히 초과할 때 (7) 사용자가 "너무 많아", "거기는 건드리지 마", "X만 변경해", "간단하게", "그만"과 같은 신호를 보낼 때 (8) 발생할 수 없는 시나리오에 대한 오류 처리, 유효성 검사, 방어적 코드를 추가할 때 (9) 요청되지 않은 테스트, 설정 스캐폴딩, 문서를 생성할 때
Cleanup Cycles
100Detect and untangle circular dependencies. Runs madge/skott (TS), pycycle (Py), or compiler-only checks (Go/Rust). Auto-fixes leaf-extractable cycles; reports core cycles for human review. Use when the user asks to find circular imports, fix dependency cycles, or untangle module graph. Example queries — "find circular imports", "fix dependency cycles", "untangle our module graph", "why is madge complaining".
Typescript Advanced Types
100Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.