скилл Claude Code CX Codex Cursor GitHub Copilot
Открыть на GitHub
vue-testing-best-practices — скилл для Claude Code
Скилл с правилами и паттернами тестирования приложений на Vue 3. Помогает настроить Vitest и писать тесты компонентов без ошибок внедрения зависимостей.
Установить в Claude Code · Через Skills CLI (Vercel)
Все способы и платформы ↓
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-codeЧто делает vue-testing-best-practices
Скилл содержит набор рекомендаций по тестированию Vue 3 с помощью фреймворка Vitest и библиотеки Vue Test Utils. Он ориентирует агента на тестирование компонентов как чёрного ящика. Они не сломаются при рефакторинге.
Внутри разобраны частые затруднения: ошибки injection Symbol(pinia) not found и поиск элементов, вынесенных наружу через Teleport. Для проверки composables с хуками жизненного цикла скилл предлагает вспомогательные обёртки, а против гонок в асинхронных тестах применяет flushPromises.
Если компонент использует хранилище Pinia — обычного вызова mount здесь мало, тест упадёт без правильного плагина тестирования.
Какие задачи решает
- настроить тестовое окружение на Vitest для Vue 3
- убрать ошибку Symbol(pinia) при монтировании компонентов
- протестировать composables с вызовами inject и хуками жизненного цикла
- найти в DOM элементы модальных окон, вынесенных через Teleport
- устранить плавающие сбои в асинхронных тестах с помощью flushPromises
Примеры запросов агенту
- Помоги написать тест для компонента с Pinia и асинхронным Suspense
- Как протестировать composable, использующий onMounted и inject?
- Настрой конфигурацию Vitest для проекта на Vue 3
Как установить vue-testing-best-practices
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/vue-testing-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vue-testing-best-practices/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a codex2Вручную: положить файлы
.agents/skills/vue-testing-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/vue-testing-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-testing-best-practices2Вручную: положить файлы
.github/skills/vue-testing-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-testing-best-practicesВручную: положить файлы
.devin/skills/vue-testing-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора7
Весь набор →
vue-best-practices Задаёт стандарты разработки на Vue 3 с Composition API и TypeScript. Пригодится при написании SFC-компонентов, composables и настройке реактивности.
Claude Code CX Codex Cursor +1
42 700установок
vue-debug-guides Скилл для диагностики ошибок Vue 3: реактивность, watchers, компоненты, шаблоны и hydration. Когда агент видит баг во Vue-проекте, он находит причину по каталогу типовых проблем.
Claude Code CX Codex Cursor +1
26 700установок
vue-pinia-best-practices Скилл с лучшими практиками Pinia: как избежать ошибок при настройке хранилищ, сохранить реактивность и правильно организовать state management в Vue-проекте.
Claude Code CX Codex Cursor +1
16 800установок
vue-router-best-practices Скилл обучает ИИ-кодера правилам Vue Router 4: навигационные гварды, обработка параметров маршрутов и синхронизация с жизненным циклом компонента. Помогает избежать бесконечных редиректов, утечек памяти и рассинхронизации данных.
Claude Code CX Codex Cursor +1
14 900установок
create-adaptable-composable Скилл для создания переиспользуемых Vue composable, которые принимают значения, рефы или геттеры и работают одинаково во всех случаях. Пригодится, когда нужна библиотечная composable, адаптивная к разным типам входов.
Claude Code CX Codex Cursor +1
13 700установок
vue-options-api-best-practices Помогает писать компоненты Vue 3 в стиле Options API и разбирать типичные ошибки с TypeScript, методами и хуками жизненного цикла.
Claude Code CX Codex Cursor +1
11 600установок
Похожие
multi-reviewer-patterns Скилл координирует параллельные ревью по разным аспектам кода и сводит находки в один отчёт. Пригодится для сложных изменений и проверки приоритетов.
Claude Code CX Codex Cursor
9 800установок
pua-loop Скилл запускает итеративные циклы проверки с явными командами верификации и условиями остановки. Пригодится для повторной проверки результата агентом.
Claude Code CX Codex Cursor +1
1 800установок
probe-sdk
официальный Справочный скилл по Zoom Probe SDK: проверяет совместимость браузера, доступ к камере и микрофону, диагностику аудио и видео и готовность сети перед подключением к встрече.
Claude Code CX Codex Cursor +1
2 100установок
argent-tv-interact Управляет ТВ-приложениями на Apple TV, Android TV и Fire TV через argent. Позволяет проверять фокус элементов, нажимать кнопки пульта D-pad, вводить текст и снимать скриншоты.
Claude Code CX Codex Cursor +1
20 800установок
debug-zoom-integration
официальный Разбирает сбои в интеграциях Zoom: от авторизации и вебхуков до SDK, MCP-транспорта и медиасессий. Нужен, когда код уже собран, но не работает.
Claude Code CX Codex Cursor +1
2 000установок
react-native-testing Скилл для написания и проверки тестов компонентов React Native с помощью Testing Library. Покрывает запросы, взаимодействия, асинхронные паттерны и работает с версиями v13 (React 18) и v14 (React 19+).
Claude Code CX Codex Cursor +1
5 300установок
improve-codebase-architecture Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом.
Claude Code
1 163 035установок
design-taste-frontend Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным.
Claude Code CX Codex Cursor +1
673 100установок
Вопросы о vue-testing-best-practices
Как установить vue-testing-best-practices в Claude Code?
Выполните команду npx skills add vuejs-ai/skills --skill vue-testing-best-practices -a claude-code. Скилл сразу станет доступен вашему агенту.
Что делает vue-testing-best-practices?
Он предоставляет агенту готовые инструкции по юнит-тестированию и E2E-тестам для Vue 3. Правила охватывают работу с Vitest, Vue Test Utils, моками и Playwright.
Как скилл решает проблему с Symbol(pinia)?
Он направляет агента на подключение createTestingPinia или передачу экземпляра Pinia в global.plugins при вызове mount.
Исходный текст
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
