Vue Best Practices
Skill Verifiziert AktivMUST 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.
Funktionen
- 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`
Anwendungsfälle
- 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
Nicht-Ziele
- 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
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skillsQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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.