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

vue-pinia-best-practices — скилл для Claude Code: Pinia и управление

Скилл с лучшими практиками Pinia: как избежать ошибок при настройке хранилищ, сохранить реактивность и правильно организовать state management в Vue-проекте.

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

Что делает vue-pinia-best-practices

Скилл собирает типичные проблемы при работе с Pinia и показывает, как их решать. Внутри — рекомендации по настройке хранилищ (setup stores), работе с реактивностью при деструктуризации, привязке методов в шаблонах и управлению состоянием фильтров. Каждая проблема ссылается на подробное объяснение: например, если десструктурирование хранилища ломает реактивность, скилл укажет на правильный подход.

Скилл включает паттерны для больших приложений с DevTools и лучшие практики, чтобы код был предсказуем и легче масштабировался.

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

  • Избежать ошибки «getActivePinia was called» при старте приложения
  • Сохранить реактивность при деструктуризации хранилища
  • Настроить setup stores так, чтобы DevTools видел всё состояние
  • Правильно вызывать методы хранилища в шаблонах
  • Организовать управление фильтрами и эфемерным состоянием

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

  • Подскажи, почему при деструктуризации хранилища UI не обновляется
  • Как настроить Pinia для production-приложения с DevTools
  • У меня ошибка getActivePinia was called при инициализации — что не так

Как установить vue-pinia-best-practices

1Через Skills CLI (Vercel)

npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code

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

~/.claude/skills/vue-pinia-best-practices/SKILL.md

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

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

Весь набор →

Похожие

design-review nexu-io Проводит визуальный аудит интерфейса, вносит точечные правки атомарными коммитами и сохраняет скриншоты до и после изменений. Пригодится для полировки свёрстанного UI перед релизом. Claude Code CX Codex Cursor +1 3 100установок flutter-expert https://github.com/Jeffallan Скилл для разработки кросс-платформных приложений на Flutter 3+ и Dart. Помогает с виджетами, управлением состоянием через Riverpod или Bloc, маршрутизацией GoRouter и оптимизацией производительности. Claude Code CX Codex Cursor +1 14 300установок ui-skills-root ibelick Маршрутизатор UI-задач, который определяет нужный скилл перед работой над интерфейсом. Запускается командой npx ui-skills start и помогает агенту выбрать минимальный контекст для решения. Claude Code CX Codex Cursor +1 7 100установок material-ui-nextjs mui Скилл для связки Material UI с Next.js: SSR, кеш Emotion, next/font, CSS-слои, Link и useSearchParams. Пригодится при настройке или отладке MUI в Next.js-приложении. Claude Code CX Codex Cursor +1 725установок expo-router expo Скилл для работы с файловой маршрутизацией, стеками, модалями и табами в Expo Router. Пригодится, если вы строите навигацию в мобильном приложении на React Native. Claude Code CX Codex Cursor +1 27 700установок expo-brownfield expo Помогает внедрить React Native и Expo в существующие нативные приложения на iOS и Android. Пригодится для точечной встройки экранов в SwiftUI, UIKit или Kotlin. Claude Code CX Codex Cursor +1 27 700установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о vue-pinia-best-practices

Как установить vue-pinia-best-practices в Claude Code?

Выполни npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code, потом открой ~/.claude/skills/vue-pinia-best-practices/SKILL.md.

Что такое vue-pinia-best-practices?

Это скилл с лучшими практиками Pinia для Vue 3. Содержит рекомендации по настройке хранилищ, реактивности, привязке методов и паттернам управления состоянием.

Когда нужна реактивная привязка к хранилищу, а когда можно деструктурировать?

Деструктуризация хранилища ломает реактивность. Чтобы сохранить реактивность в шаблоне, либо используй хранилище целиком (store.count), либо оборачивай в computed() в скрипте.

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

SKILL.md · MIT
---
name: vue-pinia-best-practices
description: "Pinia stores, state management patterns, store setup, and reactivity with stores."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
---

Pinia best practices, common gotchas, and state management patterns.

### Store Setup
- Getting "getActivePinia was called" error at startup → See [pinia-no-active-pinia-error](reference/pinia-no-active-pinia-error.md)
- Setup stores missing state in DevTools or SSR → See [pinia-setup-store-return-all-state](reference/pinia-setup-store-return-all-state.md)

### Reactivity
- Store destructuring stops updating UI reactively → See [pinia-store-destructuring-breaks-reactivity](reference/pinia-store-destructuring-breaks-reactivity.md)
- Store methods lose context in template calls → See [store-method-binding-parentheses](reference/store-method-binding-parentheses.md)

### State Patterns
- Filters reset on refresh or can't be shared → See [state-url-for-ephemeral-filters](reference/state-url-for-ephemeral-filters.md)
- Building production app without DevTools or conventions → See [state-use-pinia-for-large-apps](reference/state-use-pinia-for-large-apps.md)

© github.com/vuejs-ai · MIT · vuejs-ai/skills

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

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

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