Outlines best practices for Pinia state management, covering store definitions, testing, and plugins.
Install
mkdir -p .claude/skills/pinia && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3011" && unzip -o skill.zip -d .claude/skills/pinia && rm skill.zipInstalls to .claude/skills/pinia
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Define Pinia stores
- →Implement state, getters, and actions
- →Integrate stores with Vue components
- →Support unit testing with mocking
How it works
The skill provides patterns for defining stores and using Pinia features like storeToRefs and plugins within Vue applications.
Inputs & outputs
When to use pinia
- →Defining new Pinia stores
- →Implementing store actions and getters
- →Integrating stores with Vue components
- →Writing unit tests for stores
About this skill
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 v3.0.4, generated at 2026-01-28.
Core References
| Topic | Description | Reference |
|---|---|---|
| Stores | Defining stores, state, getters, actions, storeToRefs, subscriptions | core-stores |
Features
Extensibility
| Topic | Description | Reference |
|---|---|---|
| Plugins | Extend stores with custom properties, state, and behavior | features-plugins |
Composability
| Topic | Description | Reference |
|---|---|---|
| Composables | Using Vue composables within stores (VueUse, etc.) | features-composables |
| Composing Stores | Store-to-store communication, avoiding circular dependencies | features-composing-stores |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Testing | Unit testing with @pinia/testing, mocking, stubbing | best-practices-testing |
| Outside Components | Using stores in navigation guards, plugins, middlewares | best-practices-outside-component |
Advanced
| Topic | Description | Reference |
|---|---|---|
| SSR | Server-side rendering, state hydration | advanced-ssr |
| Nuxt | Nuxt integration, auto-imports, SSR best practices | advanced-nuxt |
| HMR | Hot module replacement for development | advanced-hmr |
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/testingfor component tests with mocked stores
When not to use it
- →Simple component-local state management
Limitations
- →Best practices depend on Pinia v3.0.4
How it compares
It offers structured best practices and patterns for Pinia rather than generic state management implementation.
Compared to similar skills
pinia side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| pinia (this skill) | 1 | 6mo | No flags | Intermediate |
| vue-best-practices | 19 | 5mo | No flags | Intermediate |
| vue-pages | 1 | 6mo | No flags | Intermediate |
| vue | 0 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-pages
JaguarJack
Generate Vue frontend pages using catch-table for CatchAdmin module with full component features.
vue
valibali
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
vue
TerminalSkills
|
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.