sonvee/pinia
skills/pinia/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add sonvee/ai-skills piniaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 14, 2026, 2:52 AM59.7s4 files scanned
SKILL.md
- 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.
- author:
- Anthony Fu
- version:
- 2026.1.28
- 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 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, behavior, and persistence | 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/testingfor component tests with mocked stores
Related Skills
sonvee/nestjs-best-practices
development
VerifiedTrustedCommunity
NestJS best practices and architecture patterns for building production-ready applications. This skill should be used when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, and performance.
1SKILL.mdUpdated Apr 14, 2026
sonvee/my-coding-style
tools
VerifiedTrustedCommunity
编码时必须严格遵循我的编码风格，在进行 vue项目/nestjs项目/uniapp项目/js/ts 时应优先使用该技能，在写文档或其他编程语言时不使用该技能
1SKILL.mdUpdated Apr 14, 2026
sonvee/fullstack-init
development
VerifiedTrustedCommunity
用于初始化“全新的”前后端分离全栈项目脚手架与基础配置，默认目录结构为同仓库下的 `frontend/` + `backend/`。当用户表达要新建项目、初始化项目、搭建前后端分离仓库、创建 monorepo 全栈模板，或已经进入 `superteam` 模式并要求按 `fullstack-init + superteam` 流程启动一个新项目时，应优先使用本 skill。它适用于从零创建项目结构、根目录共享文件、前后端初始化流程与基础环境配置约定；不适用于现有项目中的功能开发、Bug 修复、单独初始化前端或后端、只调整 README / `.gitignore` / `.env.*`、或仅讨论技术方案而尚未真正开始初始化项目的场景。
1SKILL.mdUpdated Apr 14, 2026
sonvee/frontend-design
development
VerifiedTrustedCommunity
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
1SKILL.mdUpdated Apr 14, 2026