vue-best-practices — vue 3 typescript configuration qbittorrent-web, community, vue 3 typescript configuration, ide skills, vue router typed routes, vitest component testing, Claude Code, Cursor, Windsurf

v5.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing expert Vue 3 development guidance and TypeScript configuration optimization. vue-best-practices is a set of guidelines and configurations for building robust and maintainable Vue 3 applications with TypeScript.

Features

Configures Vite for Vue projects
Enables typed routes with Vue Router
Supports component testing with Vitest
Utilizes Composition API patterns
Works with defineModel, defineProps, and defineExpose
Integrates with Volar for IDE/editor support

# Core Topics

vue 3 typescript configuration vue router typed routes vitest component testing
jianxcao jianxcao
[21]
[0]
Updated: 2/3/2026

Agent Capability Analysis

The vue-best-practices skill by jianxcao is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for vue 3 typescript configuration, vue router typed routes, vitest component testing.

Ideal Agent Persona

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

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.

↓ 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
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

vue-best-practices

Install vue-best-practices, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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

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. vue-best-practices is a set of guidelines and configurations for building robust and maintainable Vue 3 applications with TypeScript.

How do I install vue-best-practices?

Run the command: npx killer-skills add jianxcao/qbittorrent-web/vue-best-practices. 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/vue-best-practices. 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.

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

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI