Pinia — скилл для Claude Code: управление состоянием Vue
Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue. Помогает при создании хранилищ, работе с состоянием, геттерами и действиями в Vue-приложениях.
npx skills add antfu/skills --skill pinia -a claude-codeЧто делает pinia
Pinia — официальная библиотека управления состоянием для Vue, разработанная с учётом TypeScript и поддерживающая оба стиля: Options API и Composition API. Скилл даёт агенту доступ к документации по определению хранилищ, работе с реактивностью через storeToRefs(), созданию действий и плагинов для расширения функциональности.
Внутри скилла — справочники по ядру (определение хранилищ, состояние, геттеры, действия, подписки), расширяемости (плагины), компонуемости (использование composables, связь между хранилищами), тестированию с @pinia/testing и интеграции с Nuxt. Важно: при работе с SSR нужно вызывать хранилища внутри функций, не на уровне модуля.
Скилл работает на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Установка требует команды вида npx skills add с указанием платформы.
Какие задачи решает
- определить структуру хранилища с состоянием и действиями
- сохранить реактивность при деструктуризации состояния
- организовать связь между несколькими хранилищами
- настроить тестирование компонентов с подменёнными хранилищами
- интегрировать Pinia с Nuxt и SSR
Примеры запросов агенту
- Помоги создать хранилище пользователя с состоянием и действиями для загрузки данных
- Как правильно деструктурировать состояние из хранилища, чтобы сохранить реактивность
- Напиши пример тестирования Vue-компонента, который использует Pinia
Как установить pinia
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill pinia -a claude-code2Вручную: положить файлы
~/.claude/skills/pinia/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/pinia/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill pinia -a codex2Вручную: положить файлы
.agents/skills/pinia/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill pinia -a cursor2Вручную: положить файлы
.cursor/skills/pinia/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install antfu/skills pinia2Вручную: положить файлы
.github/skills/pinia/SKILL.md1Через Skills CLI (Vercel)
npx skills add antfu/skills --skill pinia -a gemini-cli2Командой платформы
gemini skills install https://github.com/antfu/skills --path skills/piniaВручную: положить файлы
.devin/skills/pinia/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add antfu/skills --skill pinia -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора8
Весь набор →Похожие
Вопросы о pinia
Как установить скилл Pinia в Claude Code?
Выполни команду npx skills add antfu/skills --skill pinia -a claude-code. Скилл загрузится в ~/.claude/skills/pinia/SKILL.md и будет доступен агенту.
Что делает скилл Pinia?
Скилл добавляет справку по библиотеке Pinia (v4.0.3) — как определять хранилища, работать с состоянием и действиями, расширять функциональность плагинами, тестировать и интегрировать с Nuxt и SSR.
Нужна ли подготовка перед использованием скилла?
Скилл даёт справку, он не требует установки зависимостей. Для работы с Pinia в проекте нужна сама библиотека Vue и Pinia как npm-пакет.
Исходный текст
SKILL.md · MIT
--- name: pinia description: Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps. metadata: author: Anthony Fu version: "2026.9.25" source: Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills --- # Pinia Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration. > The skill is based on Pinia v4.0.3, generated at 2026-09-25. ## Core References | Topic | Description | Reference | |-------|-------------|-----------| | Stores | Defining stores, state, getters, actions, storeToRefs, subscriptions | [core-stores](references/core-stores.md) | ## Features ### Extensibility | Topic | Description | Reference | |-------|-------------|-----------| | Plugins | Extend stores with custom properties, state, and behavior | [features-plugins](references/features-plugins.md) | ### Composability | Topic | Description | Reference | |-------|-------------|-----------| | Composables | Using Vue composables within stores (VueUse, etc.) | [features-composables](references/features-composables.md) | | Composing Stores | Store-to-store communication, avoiding circular dependencies | [features-composing-stores](references/features-composing-stores.md) | ## Best Practices | Topic | Description | Reference | |-------|-------------|-----------| | Testing | Unit testing with @pinia/testing, mocking, stubbing | [best-practices-testing](references/best-practices-testing.md) | | Outside Components | Using stores in navigation guards, plugins, middlewares | [best-practices-outside-component](references/best-practices-outside-component.md) | ## Advanced | Topic | Description | Reference | |-------|-------------|-----------| | SSR | Server-side rendering, state hydration | [advanced-ssr](references/advanced-ssr.md) | | Nuxt | Nuxt integration, auto-imports, SSR best practices | [advanced-nuxt](references/advanced-nuxt.md) | | HMR | Hot module replacement for development | [advanced-hmr](references/advanced-hmr.md) | ## Key Recommendations - **Prefer Setup Stores** for complex logic, composables, and watchers - **Use `storeToRefs()`** when destructuring state/getters to preserve reactivity - **Actions can be destructured directly** - they're bound to the store - **Call stores inside functions** not at module scope, especially for SSR - **Add HMR support** to each store for better development experience - **Use `@pinia/testing`** for component tests with mocked stores
© Anthony Fu · MIT · antfu/skills