1. Habit
  2. Skills
  3. Vue Debug Guides skill
vuejs-ai · 26K installs

Vue Debug Guides skill
Runs by itself, Vue warning in logs.

Vue warnings get fixed, not ignored.

Install the Vue Debug Guides skill and make it a habit: follow https://gethabit.dev/skills/vuejs-ai/vue-debug-guides.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

26K installs3K starsMIT licenceSource on GitHub ↗

Vue Debug Guides

by vuejs-ai · 26K installs

The skill

The vue debug guides skill gives Vue 3 developers an index of symptoms with matching fixes for runtime errors, warnings, async failures and SSR hydration bugs.

Only when you ask.

The habit

Vue warnings get fixed, not ignored.

↻ Runs by itselfVue warning in logs

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

Vue warning in logs. Runs in GitHub Actions or Claude Code routine.

  • ↻ Vue warning in logs
  • CI log contains [Vue warn] or a hydration mismatch

02

It checks its work

warning gone, tests pass. If a check fails, it tries again.

  • ✓the same warning no longer appears in the rerun log
  • ✓tests pass
  • ✓build passes

03

It remembers

symptom to guide log. The next run reads it first: symptoms seen before and the guide that fixed them.

loops/vue-warning-triage-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after fixing at most five warnings per run, with up to two retries each.

  1. 01

    Read the log

    The agent checks if this symptom was fixed before and which guide helped.

  2. 02

    Collect warnings

    It gathers the Vue errors and warnings from the latest run.

  3. 03

    Match a guide

    It finds the symptom in the skill's index, such as reactivity, watchers, templates or SSR, and opens that reference file.

  4. 04

    Apply the fix

    It changes the code the way the reference describes.

  5. 05

    Rerun and test

    It reruns the build and tests and checks the warning is gone.

  6. 06

    Record

    It writes the symptom, guide and result to the run log.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Vue Debug Guides skill helps.

Use it when

  • ✓ A Vue 3 app shows a runtime warning
  • ✓ SSR and client renders differ
  • ✓ Reactivity stops updating

Skip it when

  • – The app uses Vue 2 only
  • – You want general best practices

Questions

Vue Debug Guides skill, answered.

Does this cover best practices too?

No. The skill points to vue-best-practices for that and focuses on debugging.

Which Vue version is this for?

Vue 3, including SSR and hydration issues.

How do I install the Vue Debug Guides skill?

Copy the prompt at the top into your agent. It installs the skill from vuejs-ai/skills and sets up the habit. Or run npx skills add vuejs-ai/skills --skill vue-debug-guides.

Is the Vue Debug Guides skill free?

Yes. It is published under MIT. Habit is free too.

Vue Debug Guides. Now as a habit.

Install the Vue Debug Guides skill and make it a habit: follow https://gethabit.dev/skills/vuejs-ai/vue-debug-guides.md

  • Free
  • No account
  • Undo in one line

All vuejs-ai skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by vuejs-ai, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.