vue-debug-guides

The vue-debug-guides skill provides a structured reference for diagnosing and resolving common Vue 3 runtime errors, reactivity issues, and component lifecycle bugs.

14.1K
Installs
7
Use cases
5/10
Quality

Is vue-debug-guides safe to install?

Safe to install

Safe to install: our audit of vue-debug-guides's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill acts as a documentation index and does not execute code or perform file operations.

How we audit skills: our security review methodology.

Who is this skill for?

Vue 3 developers diagnosing runtime errors, warnings, and hydration issues.

What can you do with it?

  • Troubleshooting reactivity issues like unexpected re-renders or state update failures.
  • Debugging computed property side effects and dependency tracking errors.
  • Resolving watcher timing and async cleanup problems.
  • Fixing component communication issues with props, emits, and slots.
  • Addressing template compilation errors and v-model behavior quirks.
  • Handling TypeScript-specific Vue integration challenges.
  • Diagnosing SSR and hydration mismatches.

How good is this skill?

Quality score: 5/10. The skill provides a comprehensive and well-organized index of common Vue 3 debugging scenarios, making it highly useful for developers encountering specific framework gotchas.

What does the skill file contain?

SKILL.md
Vue 3 debugging and error handling for runtime issues, warnings, async failures, and hydration bugs.
For development best practices and common gotchas, use `vue-best-practices`.

### Reactivity
- Tracing unexpected re-renders and state updates → See [reactivity-debugging-hooks](reference/reactivity-debugging-hooks.md)
- Ref values not updating due to missing .value access → See [ref-value-access](reference/ref-value-access.md)
- State stops updating after destructuring reactive objects → See [reactive-destructuring](reference/reactive-destructuring.md)
- Refs inside arrays, Maps, or Sets not u...

Frequently asked questions

What types of Vue 3 issues does this skill cover?

It covers reactivity, computed properties, watchers, components, props, emits, templates, template refs, forms, events, lifecycle hooks, slots, provide/inject, composables, animations, TypeScript integration, async components, and render functions.

Does this skill fix the code automatically?

No, it provides diagnostic guides and references for common Vue 3 issues to assist the developer in fixing the code.

Data sourced from hyf0/vue-skills on GitHub. Install counts from skills.sh. The summary and security audit are derived from the skill's source files: every command and URL listed appears verbatim in the source.

Related skills

frontend-design

618.4K

AI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs

The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.

nonedesignfrontendanthropics

shadcn

217.3K

Developers building UI components and design systems using shadcn/ui

The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.

highuicomponentsshadcn

systematic-debugging

173.2K

Software engineers and AI agents tasked with resolving bugs, test failures, or unexpected system behaviors

A structured methodology for debugging technical issues by prioritizing root cause identification over symptom-based patching. It mandates a four-phase process: root cause investigation, pattern analysis, hypothesis testing, and implementation, while providing specific protocols for handling persistent failures and architectural concerns.

highdebuggingtroubleshootingobra

convex-performance-audit

79.2K

Developers working with Convex applications who need to optimize slow features, resolve high-resource usage, or address transaction contention

The convex-performance-audit skill provides a structured workflow for diagnosing and resolving performance issues in Convex applications, including read amplification, OCC conflicts, subscription costs, and function limits.

highconvexperformanceget-convex