🎯

vue-debug-guides

🎯Skill

from hyf0/vue-skills

What it does

Diagnoses and resolves Vue 3 runtime errors, async failures, hydration issues, and common component debugging challenges.

Overview

A Vue 3 debugging skill by hyf0 covering runtime errors, warnings, async failures, and SSR/hydration issues. Companion to vue-best-practices, focused specifically on diagnosing and fixing Vue issues.

Key Features

Reactivity debugging with hooks for tracing unexpected re-renders
Watcher debugging for async cleanup and memory leak prevention
Component issues: ref access, naming conflicts, multi-root styling
Props/emits troubleshooting: defineProps scope, event collision, double-firing
Template compilation errors and v-if/v-else edge cases

Who is this for?

Vue 3 developers encountering runtime errors, hydration mismatches, or component bugs who want Claude to systematically diagnose and fix the issue using documented solutions.

📦

Same repository

hyf0/vue-skills(8 items)

vue-debug-guides

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add hyf0/vue-skills --skill vue-debug-guides

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add hyf0/vue-skills --skill vue-debug-guides

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/vue-debug-guides/SKILL.md

SKILL.md

12,848Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

More from this repository7

🎯

vue-best-practices🎯Skill

A Vue 3 skill for AI agents providing Composition API and TypeScript best practices, common gotcha prevention, SSR guidance, and performance patterns for Claude Code and Cursor.

🎯

vue-pinia-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

create-adaptable-composable🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

vue-testing-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

vue-development-guides🎯Skill

Provides comprehensive Vue.js development guidelines and best practices for creating, refactoring, and reviewing Vue and Nuxt projects with a focus on code quality

🎯

pinia-best-practices🎯Skill

Provides Pinia state management best practices for Vue.js applications including store patterns, code organization, and performance optimization

🎯

vueuse-best-practices🎯Skill

Provides VueUse composable best practices for efficiently leveraging utility functions and reactive patterns in Vue.js applications