skill Claude Code CX Codex Cursor GitHub Copilot
Open on GitHub
vue-testing-best-practices — Claude Code skill: setup and use
Skill offering Vue 3 testing patterns and best practices. It helps configure Vitest and write blackbox component tests without brittle assertions.
Install into Claude Code · Skills CLI (Vercel)
All methods and platforms ↓
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-codeWhat vue-testing-best-practices does
The skill provides guidelines for testing Vue 3 applications using Vitest and Vue Test Utils. It directs coding agents toward blackbox component testing. They will not break on refactoring.
It documents solutions for recurring issues, including missing Symbol(pinia) injection errors and locating teleported modal elements. For composables relying on inject or lifecycle hooks, it suggests wrapper helpers, while flushPromises prevents race conditions in asynchronous tests.
When a component relies on Pinia — a plain mount call fails here, and the test crashes unless testing plugins are registered.
What it helps with
- set up Vitest infrastructure for Vue 3 projects
- fix Symbol(pinia) injection errors during component testing
- test composables that rely on inject and lifecycle hooks
- locate elements rendered via Teleport inside test wrappers
- eliminate flaky async tests with flushPromises
Example prompts for the agent
- Write a component test for a form that uses Pinia and async actions
- How do I test a composable that uses inject and onMounted?
- Configure Vitest and Vue Test Utils for our Vue 3 app
How to install vue-testing-best-practices
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-code2Manually: put the files in place
~/.claude/skills/vue-testing-best-practices/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vue-testing-best-practices/
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a codex2Manually: put the files in place
.agents/skills/vue-testing-best-practices/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a cursor2Manually: put the files in place
.cursor/skills/vue-testing-best-practices/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-testing-best-practices2Manually: put the files in place
.github/skills/vue-testing-best-practices/SKILL.md1Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a gemini-cli2Platform CLI
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-testing-best-practicesManually: put the files in place
.devin/skills/vue-testing-best-practices/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set7
The whole set →
vue-best-practices Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables.
Claude Code CX Codex Cursor +1
42,700installs
vue-debug-guides Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues.
Claude Code CX Codex Cursor +1
26,700installs
vue-pinia-best-practices A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects.
Claude Code CX Codex Cursor +1
16,800installs
vue-router-best-practices Skill teaches AI coders Vue Router 4 patterns: navigation guards, route params handling, and component lifecycle synchronization. Prevents infinite redirects, memory leaks, and data desync.
Claude Code CX Codex Cursor +1
14,900installs
create-adaptable-composable Skill for writing reusable Vue composables that accept values, refs, or getters and work the same way in all cases. Use it when you need a library-grade composable that adapts to different input types.
Claude Code CX Codex Cursor +1
13,700installs
vue-options-api-best-practices Guidance for Vue 3 Options API components, covering TypeScript, method context, and lifecycle hook pitfalls. Useful when reviewing or writing Options API code.
Claude Code CX Codex Cursor +1
11,600installs
Similar
multi-reviewer-patterns This skill coordinates parallel reviews across code-quality dimensions and merges the results into one report. Use it when a change needs several review angles.
Claude Code CX Codex Cursor
9,800installs
pua-loop This skill runs iterative verification loops with explicit commands and stop conditions. Use it when an agent must check its work before finishing.
Claude Code CX Codex Cursor +1
1,800installs
probe-sdk
official Reference skill for the Zoom Probe SDK: checks browser compatibility, media permissions, audio or video diagnostics and network readiness before users join a meeting.
Claude Code CX Codex Cursor +1
2,100installs
argent-tv-interact Controls and inspects TV apps on Apple TV, Android TV, and Fire TV via argent. It inspects UI focus, executes D-pad remote navigation, inputs text, and captures screen images.
Claude Code CX Codex Cursor +1
20,800installs
debug-zoom-integration
official Traces broken Zoom integrations across auth, webhooks, SDK joins, MCP transport, and media sessions. Use it when an existing implementation fails.
Claude Code CX Codex Cursor +1
2,000installs
react-native-testing Skill for writing and reviewing React Native component tests with Testing Library. Covers queries, user interactions, async patterns, and supports v13 (React 18) and v14 (React 19+).
Claude Code CX Codex Cursor +1
5,300installs
improve-codebase-architecture This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review.
Claude Code
1,163,035installs
design-taste-frontend This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished.
Claude Code CX Codex Cursor +1
673,100installs
Questions about vue-testing-best-practices
How to install vue-testing-best-practices in Claude Code?
Run npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-code. The agent loads the skill rules into its project context.
What does vue-testing-best-practices do?
It guides AI agents through Vue 3 component and E2E testing workflows. It covers Vitest, Vue Test Utils, mock strategies, and Playwright integration.
How does it handle composables with lifecycle hooks?
It instructs the agent to mount composables inside helper wrapper components, allowing hooks like onMounted to execute in a valid component context.
Source text
SKILL.md · MIT
--- name: vue-testing-best-practices version: 1.0.0 license: MIT author: github.com/vuejs-ai description: Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing. --- Vue.js testing best practices, patterns, and common gotchas. ### Testing - Setting up test infrastructure for Vue 3 projects → See [testing-vitest-recommended-for-vue](reference/testing-vitest-recommended-for-vue.md) - Tests keep breaking when refactoring component internals → See [testing-component-blackbox-approach](reference/testing-component-blackbox-approach.md) - Tests fail intermittently with race conditions → See [testing-async-await-flushpromises](reference/testing-async-await-flushpromises.md) - Composables using lifecycle hooks or inject fail to test → See [testing-composables-helper-wrapper](reference/testing-composables-helper-wrapper.md) - Getting "injection Symbol(pinia) not found" errors in tests → See [testing-pinia-store-setup](reference/testing-pinia-store-setup.md) - Components with async setup won't render in tests → See [testing-suspense-async-components](reference/testing-suspense-async-components.md) - Snapshot tests keep passing despite broken functionality → See [testing-no-snapshot-only](reference/testing-no-snapshot-only.md) - Choosing end-to-end testing framework for Vue apps → See [testing-e2e-playwright-recommended](reference/testing-e2e-playwright-recommended.md) - Tests need to verify computed styles or real DOM events → See [testing-browser-vs-node-runners](reference/testing-browser-vs-node-runners.md) - Testing components created with defineAsyncComponent fails → See [async-component-testing](reference/async-component-testing.md) - Teleported modal content can't be found in wrapper queries → See [teleport-testing-complexity](reference/teleport-testing-complexity.md) ## Reference - [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing) - [Vue Test Utils](https://test-utils.vuejs.org/) - [Vitest Documentation](https://vitest.dev/) - [Playwright Documentation](https://playwright.dev/)
© github.com/vuejs-ai · MIT · vuejs-ai/skills
