Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

Pinia — Claude Code skill: Vue state management

Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add antfu/skills --skill pinia -a claude-code
Open on GitHub

What pinia does

Pinia is Vue's official state management library, built with TypeScript support and compatibility for both Options API and Composition API. The skill equips the agent with guides on store definition, reactive state destructuring via storeToRefs(), action creation, and plugin-based extensibility.

The skill includes references on core concepts (stores, state, getters, actions, subscriptions), plugins, composables integration, store-to-store communication, unit testing with @pinia/testing, and Nuxt integration. For SSR, always call stores inside functions rather than at module scope.

Available on Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Installation uses npx skills add with a platform flag.

What it helps with

  • set up a store with state and actions
  • destructure state while keeping reactivity intact
  • coordinate communication between multiple stores
  • test components with mocked Pinia stores
  • integrate Pinia with Nuxt and server-side rendering

Example prompts for the agent

  • Create a user store with state and an action to fetch user data
  • Show me how to destructure state from a store without breaking reactivity
  • Write a test for a Vue component that uses a Pinia store

How to install pinia

1Skills CLI (Vercel)

npx skills add antfu/skills --skill pinia -a claude-code

2Manually: put the files in place

~/.claude/skills/pinia/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/pinia/

From the same set7

The whole set →
vitest Anthony Fu This skill guides work with Vitest tests, mocks, coverage, filtering, and fixtures. Use it when setting up tests or checking how Vitest fits a Vite project. Claude Code CX Codex Cursor +1 43,600installs vite Anthony Fu This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. Claude Code CX Codex Cursor +1 39,800installs vue Anthony Fu This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. Claude Code CX Codex Cursor +1 35,800installs nuxt Anthony Fu This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. Claude Code CX Codex Cursor +1 24,100installs pnpm Anthony Fu Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. Claude Code CX Codex Cursor +1 22,300installs unocss Anthony Fu A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it. Claude Code CX Codex Cursor +1 16,000installs

Similar

scroll-world oso95 This skill builds a landing page where scrolling drives a camera that dives into each scene and moves to the next with no cuts. Claude Code CX Codex Cursor +1 4,800installs firebase-hosting-basics Google LLC Deploys static sites and SPAs to Firebase Hosting CDN with SSL, preview channels, and custom domains. Claude Code CX Codex Cursor +1 169,800installs opentui anomalyco Gives your agent OpenTUI reference documentation: Core, React and Solid bindings, components, application APIs, testing and deployment. Claude Code CX Codex Cursor +1 3,700installs flutter-add-widget-test flutter A skill that teaches AI coders to write component-level Flutter tests using WidgetTester. Verifies how widgets render and respond to taps, scrolling, and text input. Claude Code CX Codex Cursor +1 39,000installs nextjs-on-cloudflare cloudflare Skill for deploying Next.js apps to Cloudflare Workers via vinext. Use for new projects, migrating existing apps, or choosing between vinext and OpenNext. Claude Code CX Codex Cursor +1 42,000installs vue-debug-guides github.com/vuejs-ai Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues. Claude Code CX Codex Cursor +1 26,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about pinia

How do I install Pinia skill in Claude Code?

Run npx skills add antfu/skills --skill pinia -a claude-code. The skill loads into ~/.claude/skills/pinia/SKILL.md and becomes available to the agent.

What does the Pinia skill do?

The skill provides reference docs for Pinia v4.0.3: how to define stores, work with state and actions, extend with plugins, test components, and integrate with Nuxt and SSR.

Do I need to set anything up before using the skill?

The skill is documentation only. To use Pinia in your project, install Vue and Pinia as npm packages.

Source text

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor