vue-options-api-best-practices — скилл для Claude Code: Vue 3 Options
Помогает писать компоненты Vue 3 в стиле Options API и разбирать типичные ошибки с TypeScript, методами и хуками жизненного цикла.
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-codeЧто делает vue-options-api-best-practices
Скилл собирает рекомендации по Options API: настройке вывода типов для свойств компонентов, типизации this, обработчиков событий и сложных props. Ссылки ведут к отдельным справочным материалам с примерами решений только на Options API.
Для методов и хуков он разбирает проблемы с контекстом компонента, а для методов с задержкой — совместное состояние между экземплярами. Это важно учитывать, если несколько экземпляров компонента вызывают один такой метод. Установка для Claude Code выполняется через npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code; файл скилла находится в ~/.claude/skills/vue-options-api-best-practices/SKILL.md.
Какие задачи решает
- настроить вывод типов для свойств компонента
- типизировать контекст
thisв Options API - исправить потерю контекста в методах и хуках жизненного цикла
- разобраться с общим состоянием методов с задержкой
- описать типы сложных
propsи вычисляемых свойств
Примеры запросов агенту
- Проверь мой компонент Vue 3 на ошибки типизации Options API, особенно в `props` и `this`.
- Подскажи, почему метод компонента теряет контекст, и предложи решение для Options API.
- Проверь хук жизненного цикла и метод с задержкой на проблемы при создании нескольких экземпляров компонента.
Как установить vue-options-api-best-practices
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/vue-options-api-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vue-options-api-best-practices/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a codex2Вручную: положить файлы
.agents/skills/vue-options-api-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/vue-options-api-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-options-api-best-practices2Вручную: положить файлы
.github/skills/vue-options-api-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-options-api-best-practicesВручную: положить файлы
.devin/skills/vue-options-api-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора7
Весь набор →Похожие
Вопросы о vue-options-api-best-practices
Как установить vue-options-api-best-practices в Claude Code?
Выполните npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code. Файл скилла появится по пути ~/.claude/skills/vue-options-api-best-practices/SKILL.md.
Что делает vue-options-api-best-practices?
Скилл даёт рекомендации по Vue 3 Options API, включая интеграцию с TypeScript, контекст this, методы и хуки жизненного цикла. Справочные материалы показывают решения именно в стиле Options API.
Как скилл помогает с TypeScript в Options API?
Он указывает на материалы о типах свойств компонента, обработчиков событий, сложных props, внедрённых свойств и вычисляемых значений.
Исходный текст
SKILL.md · MIT
--- name: vue-options-api-best-practices description: "Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only." version: 2.0.0 license: MIT author: github.com/vuejs-ai --- Vue.js Options API best practices, TypeScript integration, and common gotchas. ### TypeScript - Need to enable TypeScript type inference for component properties → See [ts-options-api-use-definecomponent](reference/ts-options-api-use-definecomponent.md) - Enabling type safety for Options API this context → See [ts-strict-mode-options-api](reference/ts-strict-mode-options-api.md) - Using old TypeScript versions with prop validators → See [ts-options-api-arrow-functions-validators](reference/ts-options-api-arrow-functions-validators.md) - Event handler parameters need proper type safety → See [ts-options-api-type-event-handlers](reference/ts-options-api-type-event-handlers.md) - Need to type object or array props with interfaces → See [ts-options-api-proptype-complex-types](reference/ts-options-api-proptype-complex-types.md) - Injected properties missing TypeScript types completely → See [ts-options-api-provide-inject-limitations](reference/ts-options-api-provide-inject-limitations.md) - Complex computed properties lack clear type documentation → See [ts-options-api-computed-return-types](reference/ts-options-api-computed-return-types.md) ### Methods & Lifecycle - Methods aren't binding to component instance context → See [no-arrow-functions-in-methods](reference/no-arrow-functions-in-methods.md) - Lifecycle hooks losing access to component data → See [no-arrow-functions-in-lifecycle-hooks](reference/no-arrow-functions-in-lifecycle-hooks.md) - Debounced functions sharing state across component instances → See [stateful-methods-lifecycle](reference/stateful-methods-lifecycle.md)
© github.com/vuejs-ai · MIT · vuejs-ai/skills
