New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Pinia Skilld

by skilld-dev in skilld-dev/vue-ecosystem-skills

A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

MITAuto-check passedDevelopment

Install Pinia Skilld

skills CLI
$ npx skills add skilld-dev/vue-ecosystem-skills --skill pinia-skilld -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install skilld-dev/vue-ecosystem-skills pinia-skilld --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/pinia-skilld .claude/skills/pinia-skilld && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pinia-skilld
GitHub stars
181
Token cost
~1.5k tokens
SKILL.md length
499 words
Files
9 (incl. references)
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

  • Refactoring code that imports pinia
  • SKILL.md covers Requirements, Install and setup, Define a store and Use a store, plus 2 more sections
  • Calls npm
  • The Vue 3 store library

What it does

Pinia Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library. Covers pinia 4.x: option and setup stores, state, getters, actions, subscriptions, plugins, SSR hydration, testing, Options API map helpers, and v4 nostics diagnostics. Provides version-correct API usage and migration notes from v2 and v3.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/api.md`, `references/diagnostics.md` and `references/options-api.md`).

It sits in Development, covering Refactoring. It works with Vue.js and npm. The repository describes itself as: Agent Skills for the Vue ecosystem, written from current docs, issues, and releases. The licence is MIT.

When your agent uses it

  • Refactoring code that imports pinia
  • The Vue 3 store library

Example prompts

  • “/pinia-skilld”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit c8994af. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com
    • pinia.vuejs.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pinia Skilld loads about 1.5k tokens when it runs, and up to ~7.4k if it reads all its reference files. Until then it costs about 87 tokens; SKILL.md has 499 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~87
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 499 words, ~1,522 tokens.

Download SKILL.mdSave it as .claude/skills/pinia-skilld/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
pinia-skilld
description
Use when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library. Covers pinia 4.x: option and setup stores, state, getters, actions, subscriptions, plugins, SSR hydration, testing, Options API map helpers, and v4 nostics diagnostics. Provides version-correct API usage and migration notes from v2 and v3.

pinia@4.0.3

Source citations use package-relative paths from the prepared pinia 4.0.3 source: package.json, README.md, dist/pinia.js (runtime), dist/pinia.d.ts (types). Other citations are official documentation URLs.

Requirements

  • Vue ^3.5.11 peer [package.json:62]. Vue 2 is unsupported since v3.
  • @vue/devtools-api ^8.1.5 is a required, non-optional peer [package.json:60-68]. Install it alongside pinia: npm install pinia @vue/devtools-api [README.md:108-111], v4.0.0 release notes.
  • TypeScript >=5.6.0 optional peer [package.json:69-71].
  • ESM-only package: "type": "module", single export . to dist/pinia.js [package.json:42,47-50]. v4 removed CJS resolution; a require() fallback breaks.
  • @pinia/nuxt 1.x and @pinia/testing 2.x are the companion versions for pinia 4 (https://github.com/vuejs/pinia/releases).

Install and setup

ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

From [README.md:119-130]. In dev on the client, createPinia() registers the devtools plugin itself [dist/pinia.js:832,847].

Define a store

Two syntaxes. The id is a unique string, first argument in both [dist/pinia.d.ts:645,653].

ts
import { defineStore } from 'pinia'

// Option store: state/getters/actions
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// Setup store: refs are state, computed are getters, functions are actions
export const useTodos = defineStore('todos', () => {
  const todos = ref<Todo[]>([])
  const done = computed(() => todos.value.filter((t) => t.done))
  function add(todo: Todo) {
    todos.value.push(todo)
  }
  return { todos, done, add }
})

Rules for setup stores [dist/pinia.js:1178-1202]:

  • ref() and reactive() become state.
  • computed() becomes a getter.
  • Functions become actions, wrapped automatically for $onAction.
  • Return every state property. Pinia only picks up returned state, so private state breaks SSR hydration and devtools.

The setup function receives helpers: defineStore('id', ({ action }) => { ... }) [dist/pinia.js:1177, dist/pinia.d.ts:628-638]. action(fn, name?) makes a helper function trackable by $onAction when called within the store. Rarely needed; intended for advanced cases like Pinia Colada.

Use a store

Call useStore() inside setup() (or any composable). Every call returns the same store instance.

ts
const counter = useCounterStore()

counter.count++            // direct state mutation
counter.doubleCount        // getter
counter.increment()        // action

const { count, doubleCount } = storeToRefs(counter) // refs for destructuring

storeToRefs() converts state and getters to refs. It ignores actions and non-reactive properties [dist/pinia.js:1475-1489]. Destructure with it, never plain toRefs() or ...store, when you need reactivity.

Common operations:

  • Group changes into one devtools entry with store.$patch(obj) or $patch(fn). The function form must be synchronous [dist/pinia.d.ts:219-225] and suits array, Map, and Set edits [dist/pinia.js:964-975].
  • $reset() exists only on option stores. On a setup store it throws in dev [dist/pinia.js:1085-1087]; implement your own $reset in the returned object.
  • Assigning store.$state = {...} does not replace state; it calls $patch internally [dist/pinia.js:1207-1216].
  • Declare every state key in state() (or return it from setup), even when the initial value is undefined. New keys added later are not reactive.
  • Outside a component, pass the pinia instance: useStore(pinia). On the server this is mandatory; skipping it risks cross-request state pollution [dist/pinia.js:37-39].

Details: stores, subscriptions.

Show full SKILL.md (152 more words)Show less

Version notes and migration

v4.0.0, technically breaking only (https://github.com/vuejs/pinia/releases/tag/v4.0.0):

  • ESM-only distribution.
  • @vue/devtools-api upgraded to v8 and now a required install.
  • Errors and dev warnings refactored onto Nostics diagnostics, codes PINIA_R1001 to PINIA_R1007 [dist/pinia.js:18-56]. See diagnostics.
  • piniaSymbol is now part of the public exports [dist/pinia.js:1491].
  • storeToRefs() skips nullish values gracefully; $subscribe() ignores a duplicate callback instead of stacking a second watcher.

Still relevant from v3.0.0 (https://pinia.vuejs.org/cookbook/migration-v2-v3.html):

  • defineStore({ id: 'x', ... }) object-only signature removed. Use defineStore('x', { ... }).
  • PiniaStorePlugin type removed. Use PiniaPlugin.
  • Vue 2 support dropped. Vue 2 users stay on pinia v2.

Reference files

  • API surface: every public export with signatures and type helpers.
  • Stores: state, getters, actions, typing, composing stores, HMR.
  • Subscriptions: $subscribe, $onAction, MutationType, detached and flush options.
  • Plugins: pinia.use(), context, typing extensions, new state and options.
  • SSR: hydration, skipHydrate, per-request pinia, Nuxt.
  • Testing: setActivePinia, @pinia/testing 2.x usage.
  • Options API: map helpers without setup().
  • Diagnostics: dev-only PINIA_R100x catalog with fixes.

Official docs: https://pinia.vuejs.org

© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files (references) in skills/pinia-skilld of skilld-dev/vue-ecosystem-skills.

  • SKILL.md
  • references/api.md
  • references/diagnostics.md
  • references/options-api.md
  • references/plugins.md
  • references/ssr.md
  • references/stores.md
  • references/subscriptions.md
  • references/testing.md

Open the folder on GitHubat commit c8994af

Compare with similar skills

Pinia Skilld next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pinia Skilld compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pinia Skilld this skillskilld-dev/vue-ecosystem-skills181—~1.5kAutomated safety check: PassMIT
Cabloy Frontend Scaffoldcabloy/cabloy982—~4.1kAutomated safety check: PassMIT
Vue Best Practicesoyjt/uniapp-vue3-template6273 repos~667Automated safety check: PassMIT
Markbind Typescript MigrationMarkBind/markbind158—~2kAutomated safety check: PassMIT
Enforce Rules For Typescriptmoeru-ai/airi50k—~3.4kAutomated safety check: PassMIT
Verdaccio Change Implementationverdaccio/verdaccio18k—~1.3kAutomated safety check: PassMIT

Similar skills

  • Cabloy Frontend Scaffold

    cabloy/cabloy

    A skill your agent uses whenever the user wants the Zova frontend path in this Cabloy repo: create or extend pages, components, api or model beans, route/query/params work, metadata refresh…

    982 GitHub stars~4.1k tokensUpdated today
    DevelopmentAuto-check passed

  • Vue Best Practices

    oyjt/uniapp-vue3-template

    Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar.

    627 GitHub starsUsed in 3 repos~667 tokens
    DevelopmentAuto-check passed

  • Markbind Typescript Migration

    MarkBind/markbind

    Complete guide for migrating JavaScript files to TypeScript in the MarkBind project, including the two-commit strategy, import/export syntax conversion, and best practices.

    158 GitHub stars~2k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Enforce Rules For Typescript

    moeru-ai/airi

    Enforce AIRI's TypeScript and Vue source rules for imports, naming, comments, JSDoc, fallbacks, stateful and protocol code, and module design.

    50k GitHub stars~3.4k tokensUpdated today
    DevelopmentAuto-check passed

  • Verdaccio Change Implementation

    verdaccio/verdaccio

    A workflow for implementing a Verdaccio bug fix, feature or refactor: pick the release lines, check existing options, edit the owning layer, test and add a changeset.

    18k GitHub stars~1.3k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Enforce Rules For Unocss

    moeru-ai/airi

    Enforce AIRI's UnoCSS, Vue styling, shared UI component, animation, icon, and color-mode practices.

    50k GitHub stars~525 tokensUpdated today
    DevelopmentAuto-check passed

More from skilld-dev/vue-ecosystem-skills

All 34 skills in this repo

  • Floating UI Vue Skilld

    skilld-dev/vue-ecosystem-skills

    Floating UI for Vue (@floating-ui/vue@2.0.1). An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.3k tokensUpdated 15 days ago
    Auto-check passed

  • Formkit Core Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers…

    181 GitHub stars~2.1k tokensUpdated 15 days ago
    Auto-check passed

  • Pinia Colada Skilld

    skilld-dev/vue-ecosystem-skills

    Data fetching layer for Vue built on Pinia. An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.9k tokensUpdated 15 days ago
    Auto-check passed

  • Primevue Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3).

    181 GitHub stars~1.9k tokensUpdated 15 days ago
    Auto-check passed

  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated 15 days ago
    Auto-check passed

  • Reka UI Skilld

    skilld-dev/vue-ecosystem-skills

    Vue port of Radix UI Primitives (headless, accessible, unstyled).

    181 GitHub stars~2.1k tokensUpdated 15 days ago
    Auto-check passed

Works with

Categories

Questions about Pinia Skilld

What does Pinia Skilld do?

A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library. Pinia Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

When should I use Pinia Skilld?

Pinia Skilld fits situations like: refactoring code that imports pinia; the Vue 3 store library.

How do I install Pinia Skilld in Claude Code?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill pinia-skilld -a claude-code`. Or copy the skill folder (skills/pinia-skilld in skilld-dev/vue-ecosystem-skills) into .claude/skills/pinia-skilld in your project. Claude Code loads it when a task matches its description.

How do I install Pinia Skilld in Codex?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill pinia-skilld -a codex`. Or copy the skill folder (skills/pinia-skilld in skilld-dev/vue-ecosystem-skills) into .agents/skills/pinia-skilld in your project. Codex loads it when a task matches its description.

Can I use Pinia Skilld in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add skilld-dev/vue-ecosystem-skills --skill pinia-skilld -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pinia-skilld, .gemini/skills/pinia-skilld, .github/skills/pinia-skilld and .opencode/skills/pinia-skilld in your project.

What does Pinia Skilld need to run?

Going by SKILL.md and its folder, Pinia Skilld needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Pinia Skilld access the network?

SKILL.md names 2 domains. As links in the text: github.com and pinia.vuejs.org. This is read from the text; nothing was executed.

Is Pinia Skilld safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pinia Skilld use?

Pinia Skilld is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pinia Skilld use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.9k tokens, read only when the agent opens those files.

What are the alternatives to Pinia Skilld?

Skills that share tags, products or a category with Pinia Skilld: Cabloy Frontend Scaffold (cabloy/cabloy, 982 stars), Vue Best Practices (oyjt/uniapp-vue3-template, 627 stars), Markbind Typescript Migration (MarkBind/markbind, 158 stars) and Enforce Rules For Typescript (moeru-ai/airi, 50k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pinia Skilld?

skilld-dev (a GitHub organization) maintains it in skilld-dev/vue-ecosystem-skills, which has 181 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 22, 2026.

Source: skilld-dev/vue-ecosystem-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.