mcpbeat

Pinia

antfu/pinia

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.

This is a copy. The original lives at christophacham/pinia.

8k tokens
context cost
the whole folder, loaded on every use
11
files
instructions only
0
copies elsewhere
how many repositories repackaged it
5703
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/antfu/skills --skill pinia

The instruction itself

8 sections, as written by the author

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/testing for component tests with mocked stores

How to use it

Copy the folder

Take antfu/pinia from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.