everhaven-state-pinia
Standard guide for building and organizing Pinia stores.
Install
mkdir -p .claude/skills/everhaven-state-pinia && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15183" && unzip -o skill.zip -d .claude/skills/everhaven-state-pinia && rm skill.zipInstalls to .claude/skills/everhaven-state-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.
Use when creating or updating Pinia stores. Covers store structure, naming, and state rules. Trigger keywords: Pinia, store, 状态管理, defineStore.Key capabilities
- →Define Pinia stores using setup-style defineStore
- →Export stores with clear, feature-based names
- →Keep state serializable and minimal
- →Use computed properties for derived values
- →Use functions for actions within stores
- →Separate state, getters, and actions clearly
How it works
The skill guides the creation and updating of Pinia stores by enforcing rules for structure, naming, state serializability, and the separation of state, getters, and actions.
Inputs & outputs
When to use everhaven-state-pinia
- →Creating a new state management store
- →Refactoring Pinia stores for consistency
- →Adding getters to a store
About this skill
Everhaven State (Pinia) Skill
Purpose
This skill standardizes how Pinia stores are defined and used in this project.
Where Things Live
- Stores: src/stores/**
Store Rules
- Use setup-style defineStore (composition API) like existing stores.
- Export stores as useXStore with a clear, feature-based name.
- Keep state serializable and minimal.
- Use computed for derived values and functions for actions.
- Avoid side effects at the top-level of store files; keep them inside actions.
Checklist
- Store file placed under src/stores.
- defineStore name is stable and unique.
- State, getters (computed), and actions are clearly separated.
When not to use it
- →When not using Pinia for state management
- →When side effects are desired at the top-level of store files
- →When a defineStore name is not stable or unique
Limitations
- →Side effects are not allowed at the top-level of store files
- →defineStore name must be stable and unique
- →Store files must be placed under src/stores
How it compares
This skill standardizes Pinia store definitions using setup-style composition API, ensuring consistency and best practices across the project, unlike ad-hoc store implementations.
Compared to similar skills
everhaven-state-pinia side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| everhaven-state-pinia (this skill) | 0 | — | No flags | Beginner |
| webf-quickstart | 1 | 7mo | Review | Beginner |
| raw-app | 0 | 2mo | Review | Beginner |
| new-composable | 0 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
webf-quickstart
openwebf
Get started with WebF development - setup WebF Go, create a React/Vue/Svelte project with Vite, and load your first app. Use when starting a new WebF project, onboarding new developers, or setting up development environment.
raw-app
windmill-labs
MUST use when creating raw apps.
new-composable
wesleyara
Use this skill when the user asks to create a new composable (useX) for the TrackGrowth app — reusable reactive logic such as frequency evaluation, streak calculation, theme, or backup. Triggers on "criar composable", "novo composable", "new composable", "useX".
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
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.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.