Pinia

From the author

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.

— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Pinia is the official state management library for Vue, offering an intuitive API for managing application state. It supports both Options and Composition API styles, provides first-class TypeScript support, and includes built-in devtools integration. The library facilitates store creation, state management, and complex logic handling through actions and getters, with specific support for server-side rendering and Nuxt integration.

What it does

Defines stores using Options or Composition API patterns
Provides reactive state management with getters and actions
Supports store-to-store communication and composable integration
Enables store extensibility through custom plugins
Facilitates server-side rendering and state hydration
Supports hot module replacement for development workflows

When to use it

When implementing centralized state management in Vue applications
When requiring type-safe store definitions in TypeScript projects
When building Nuxt applications needing integrated state handling
When needing to preserve state during development via HMR
When testing components that rely on shared store state

Advantages

First-class TypeScript support for type-safe stores
Seamless integration with Nuxt and server-side rendering
Flexible store definition styles for different architectural needs
Built-in support for devtools and hot module replacement
Extensible architecture via plugin system

Usage examples

“How do I define a basic store in Pinia?”: You use the defineStore function to create a store, providing a unique ID and either an object for Options API or a function for Composition API.
“How can I preserve state during development?”: You can implement Hot Module Replacement (HMR) by using the acceptHMRUpdate function within your store definition file.
“How do I use a store inside a Nuxt middleware?”: You access the store by passing the pinia instance from useNuxtApp to your store function, ensuring it is available in the middleware context.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/antfu/pinia/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip pinia.zip -d .agents/skills
```

Documentation by Anthony Fu

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

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

Files

ATTRIBUTION.mdAdded by AutoGineer892 B
GENERATION.md135 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md2.7 KiB
references/advanced-hmr.md1.4 KiB
references/advanced-nuxt.md2.6 KiB
references/advanced-ssr.md2.4 KiB
references/best-practices-outside-component.md2.2 KiB
references/best-practices-testing.md4.7 KiB
references/core-stores.md7.6 KiB
references/features-composables.md2.7 KiB
references/features-composing-stores.md2.6 KiB
references/features-plugins.md3.6 KiB

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download pinia.zip