vue-best-practices — qbittorent qbittorrent-web, community, qbittorent, ide skills

v5.0.0

About this Skill

Perfect for Frontend Agents needing expert Vue 3 development guidance and TypeScript configuration optimization. Comprehensive Vue 3 development best practices, TypeScript configuration, tooling troubleshooting, testing patterns, and composition API gotchas. Covers vue-tsc, Volar, Vite configuration, Vue Router

# Core Topics

jianxcao jianxcao
[21]
[0]
Updated: 2/3/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution Locale and body language aligned
Review Score
7/11
Quality Score
42
Canonical Locale
en
Detected Body Locale
en

Perfect for Frontend Agents needing expert Vue 3 development guidance and TypeScript configuration optimization. Comprehensive Vue 3 development best practices, TypeScript configuration, tooling troubleshooting, testing patterns, and composition API gotchas. Covers vue-tsc, Volar, Vite configuration, Vue Router

Core Value

Empowers agents to develop scalable and maintainable Vue 3 applications with best practices for debugging and optimization using Vue Router, Vite, and Vitest, while leveraging TypeScript configuration and Composition API patterns.

Ideal Agent Persona

Perfect for Frontend Agents needing expert Vue 3 development guidance and TypeScript configuration optimization.

Capabilities Granted for vue-best-practices

Configuring Vue 3 projects with TypeScript for optimal performance
Debugging type checking issues with vue-tsc and Volar
Implementing efficient component testing with Vitest and Vue Router typed routes

! Prerequisites & Limits

  • Requires Vue 3 and TypeScript knowledge
  • Specific to Vue 3 ecosystem, not compatible with older Vue versions

Why this page is reference-only

  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is vue-best-practices?

Perfect for Frontend Agents needing expert Vue 3 development guidance and TypeScript configuration optimization. Comprehensive Vue 3 development best practices, TypeScript configuration, tooling troubleshooting, testing patterns, and composition API gotchas. Covers vue-tsc, Volar, Vite configuration, Vue Router

How do I install vue-best-practices?

Run the command: npx killer-skills add jianxcao/qbittorrent-web. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for vue-best-practices?

Key use cases include: Configuring Vue 3 projects with TypeScript for optimal performance, Debugging type checking issues with vue-tsc and Volar, Implementing efficient component testing with Vitest and Vue Router typed routes.

Which IDEs are compatible with vue-best-practices?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for vue-best-practices?

Requires Vue 3 and TypeScript knowledge. Specific to Vue 3 ecosystem, not compatible with older Vue versions.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add jianxcao/qbittorrent-web. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use vue-best-practices immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

vue-best-practices

Install vue-best-practices, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Vue Best Practices

Comprehensive development guidelines, TypeScript configuration, and best practices for Vue 3 applications.

When to Apply

  • Setting up or configuring Vue 3 + TypeScript projects
  • Debugging type checking issues with vue-tsc
  • Fixing IDE/editor integration with Volar
  • Configuring Vite for Vue projects
  • Working with Vue Router typed routes
  • Writing component tests with Vitest
  • Using Composition API patterns
  • Working with defineModel, defineProps, defineExpose
  • Writing reusable composables

Capability Rules

Rules that enable AI to solve problems it cannot solve without the skill.

Type Checking

RuleImpactDescription
vue-tsc-strict-templatesHIGHEnable strict template checking to catch undefined components
vue-define-model-genericsHIGHFix vue-tsc errors when using defineModel with generic components

vueCompilerOptions Settings

RuleImpactDescription
fallthrough-attributesHIGHType-check fallthrough attributes on wrapper components
strict-css-modulesMEDIUMCatch typos in CSS module class names at compile time
data-attributes-configMEDIUMAllow data-* attributes with strictTemplates enabled

Tooling & Configuration

RuleImpactDescription
vue-tsc-typescript-compatibilityHIGHFix vue-tsc and TypeScript version incompatibility issues
volar-3-breaking-changesHIGHFix editor integration after Volar/vue-language-server 3.0 upgrade
module-resolution-bundlerHIGHFix "Cannot find module" errors after @vue/tsconfig upgrade
unplugin-auto-import-conflictsHIGHFix component types resolving as any with unplugin conflicts
codeactions-save-performanceHIGHFix 30-60 second save delays in large Vue projects

Vite Configuration

RuleImpactDescription
path-alias-vue-sfcHIGHFix resolve.alias failures in Vue SFC files
duplicate-plugin-detectionMEDIUMDetect and fix duplicate Vue plugin registration

Component Patterns

RuleImpactDescription
use-template-ref-genericsMEDIUMFix incorrect type inference for refs to generic components
define-model-update-eventMEDIUMFix runtime errors from unexpected undefined in model updates
with-defaults-union-typesMEDIUMFix incorrect default value behavior with union type props
verbatim-module-syntaxMEDIUMFix Vite dev server errors with type-only imports
deep-watch-numericMEDIUMEnable efficient array mutation watching with Vue 3.5+ numeric deep

Template Patterns

RuleImpactDescription
vue-directive-commentsHIGHControl template type checking with @vue-ignore, @vue-skip directives

SFC Patterns

RuleImpactDescription
script-setup-jsdocMEDIUMAdd JSDoc documentation to script setup components

Vue Router

RuleImpactDescription
vue-router-typed-paramsMEDIUMFix route params type narrowing with unplugin-vue-router

Testing Patterns

RuleImpactDescription
teleport-testingHIGHTest teleported content (modals, tooltips)

TypeScript Patterns

RuleImpactDescription
vueuse-emits-conflictMEDIUMFix $emit type conflicts with VueUse element composables

Efficiency Rules

Rules that help AI solve problems more effectively and consistently.

Vite Configuration

RuleImpactDescription
runtime-env-variablesHIGHImplement runtime environment variables for multi-env deployments
hmr-vue-ssrMEDIUMFix HMR issues in Vue SSR applications

Component Patterns

RuleImpactDescription
define-expose-typesMEDIUMFix "Property does not exist" errors when accessing exposed methods
provide-inject-typesMEDIUMEnable type-safe dependency injection with InjectionKey

Vue Router

RuleImpactDescription
route-meta-typesHIGHExtend RouteMeta interface for type-safe metadata
scroll-behavior-typesMEDIUMProperly type scrollBehavior function
dynamic-routes-typingMEDIUMType-safe dynamic route configuration

Testing Patterns

RuleImpactDescription
suspense-testingHIGHTest async components with Suspense properly
pinia-store-mockingHIGHMock Pinia stores correctly with Vitest
router-mockingHIGHMock Vue Router with useRoute and useRouter
vue-test-utils-typesMEDIUMFix wrapper.vm property access types in Vue Test Utils

Composition API Patterns

RuleImpactDescription
reactive-destructuringHIGHAvoid reactivity loss when destructuring reactive objects
composable-cleanupHIGHPrevent memory leaks in composables with proper cleanup
ref-unwrappingMEDIUMUnderstand ref auto-unwrapping in reactive objects
watcheffect-trackingMEDIUMFix conditional dependency tracking in watchEffect

SFC Patterns

RuleImpactDescription
script-setup-patternsHIGHBest practices for script setup syntax
css-v-bindMEDIUMSafely use reactive values in CSS

TypeScript Patterns

RuleImpactDescription
component-type-helpersHIGHExtract component prop and emit types
event-handler-typingMEDIUMType event handlers correctly

Reference

Related Skills

Looking for an alternative to vue-best-practices or another community skill for your workflow? Explore these related open-source skills.

View All

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

333.8k
0
AI

widget-generator

Logo of f
f

Generate customizable widget plugins for the prompts.chat feed system

149.6k
0
AI

flags

Logo of vercel
vercel

The React Framework

138.4k
0
Browser

pr-review

Logo of pytorch
pytorch

Tensors and Dynamic neural networks in Python with strong GPU acceleration

98.6k
0
Developer