К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

Pinia — скилл для Claude Code: управление состоянием Vue

Скилл Pinia добавляет в Claude Code справку по официальной библиотеке управления состоянием Vue. Помогает при создании хранилищ, работе с состоянием, геттерами и действиями в Vue-приложениях.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add antfu/skills --skill pinia -a claude-code
Открыть на GitHub

Что делает pinia

Pinia — официальная библиотека управления состоянием для Vue, разработанная с учётом TypeScript и поддерживающая оба стиля: Options API и Composition API. Скилл даёт агенту доступ к документации по определению хранилищ, работе с реактивностью через storeToRefs(), созданию действий и плагинов для расширения функциональности.

Внутри скилла — справочники по ядру (определение хранилищ, состояние, геттеры, действия, подписки), расширяемости (плагины), компонуемости (использование composables, связь между хранилищами), тестированию с @pinia/testing и интеграции с Nuxt. Важно: при работе с SSR нужно вызывать хранилища внутри функций, не на уровне модуля.

Скилл работает на Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Установка требует команды вида npx skills add с указанием платформы.

Какие задачи решает

  • определить структуру хранилища с состоянием и действиями
  • сохранить реактивность при деструктуризации состояния
  • организовать связь между несколькими хранилищами
  • настроить тестирование компонентов с подменёнными хранилищами
  • интегрировать Pinia с Nuxt и SSR

Примеры запросов агенту

  • Помоги создать хранилище пользователя с состоянием и действиями для загрузки данных
  • Как правильно деструктурировать состояние из хранилища, чтобы сохранить реактивность
  • Напиши пример тестирования Vue-компонента, который использует Pinia

Как установить pinia

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/pinia/

Из того же набора8

Весь набор →
vitest Anthony Fu Скилл помогает писать тесты на Vitest, настраивать моки и покрытие. Пригодится, когда нужно разобраться с фильтрацией тестов или фикстурами. Claude Code CX Codex Cursor +1 43 600установок vite Anthony Fu Скилл помогает настраивать Vite, писать плагины и собирать SSR-приложения. Пригодится для проектов с vite.config.ts и миграции на Rolldown. Claude Code CX Codex Cursor +1 39 800установок vue Anthony Fu Скилл подсказывает агенту, как писать Vue 3-компоненты через Composition API и script setup. Нужен при работе с Vue SFC и реактивностью. Claude Code CX Codex Cursor +1 35 800установок nuxt Anthony Fu Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. Помогает агенту писать серверные маршруты, работать с useFetch, middleware и гибридным рендерингом. Claude Code CX Codex Cursor +1 24 100установок pnpm Anthony Fu Скилл для работы с pnpm, менеджером пакетов Node.js со строгим разрешением зависимостей. Нужен, если в проекте используются рабочие пространства, каталоги версий, патчи или переопределения зависимостей. Claude Code CX Codex Cursor +1 22 300установок unocss Anthony Fu Скилл даёт агенту справочник по UnoCSS: конфиг, правила, шорткаты, пресеты и трансформеры. Пригодится при настройке проекта на UnoCSS или при переносе знаний Tailwind на него. Claude Code CX Codex Cursor +1 16 000установок nitro Anthony Fu Скилл подтягивает знания о Nitro v3: файловые маршруты, route rules, кэш, хранилище и пресеты деплоя. Пригодится, когда агент правит nitro.config или пишет обработчики H3. Claude Code CX Codex Cursor +1 2 600установок

Похожие

scroll-world oso95 Скилл собирает лендинг, где скролл управляет камерой: она влетает внутрь сцены и без склеек переходит к следующей. Claude Code CX Codex Cursor +1 4 800установок firebase-hosting-basics Google LLC Разворачивает статические сайты и SPA на Firebase Hosting CDN с SSL, preview-каналами и кастомными доменами. Claude Code CX Codex Cursor +1 169 800установок opentui anomalyco Подключает к агенту справочную документацию OpenTUI: Core, React и Solid, компоненты, API приложений, тестирование и деплой. Claude Code CX Codex Cursor +1 3 700установок flutter-add-widget-test flutter Скилл помогает писать компонентные тесты Flutter с помощью WidgetTester. Проверяет, как виджет отображается и реагирует на касания, скролл и ввод текста. Claude Code CX Codex Cursor +1 39 000установок nextjs-on-cloudflare cloudflare Скилл для развёртывания Next.js приложений на Cloudflare Workers через vinext. Используй для новых проектов, миграции существующих приложений или выбора между vinext и OpenNext. Claude Code CX Codex Cursor +1 42 000установок vue-debug-guides github.com/vuejs-ai Скилл для диагностики ошибок Vue 3: реактивность, watchers, компоненты, шаблоны и hydration. Когда агент видит баг во Vue-проекте, он находит причину по каталогу типовых проблем. Claude Code CX Codex Cursor +1 26 700установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о pinia

Как установить скилл Pinia в Claude Code?

Выполни команду npx skills add antfu/skills --skill pinia -a claude-code. Скилл загрузится в ~/.claude/skills/pinia/SKILL.md и будет доступен агенту.

Что делает скилл Pinia?

Скилл добавляет справку по библиотеке Pinia (v4.0.3) — как определять хранилища, работать с состоянием и действиями, расширять функциональность плагинами, тестировать и интегрировать с Nuxt и SSR.

Нужна ли подготовка перед использованием скилла?

Скилл даёт справку, он не требует установки зависимостей. Для работы с Pinia в проекте нужна сама библиотека Vue и Pinia как npm-пакет.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой