Communitygithub.com

Pinia

Vue 공식 상태 관리 라이브러리로, 타입 안전성과 확장성을 제공합니다. 스토어 정의, state/getters/actions 사용, Vue 앱에서 스토어 패턴 구현 시 활용하세요.

Pinia란 무엇인가요?

Pinia는 Vue의 공식 상태 관리 라이브러리로, 직관적이고 타입 안전한 API를 제공합니다. Options API와 Composition API 스타일을 모두 지원하며, TypeScript 및 개발자 도구와의 통합이 원활합니다. 이 스킬은 Pinia v3.0.4를 기반으로 하며, 스토어 정의, 상태 관리, getters, actions, 플러그인, SSR, Nuxt 통합, HMR, 테스트 등 다양한 주제를 다룹니다. 개발자는 스토어 간 통신, 컴포저블 사용, 서버 사이드 렌더링에서의 상태 수화 등 고급 패턴을 참조할 수 있습니다. 특히 Setup Store를 선호하고, 반응성을 유지하기 위해 `storeToRefs()`를 사용하며, SSR 환경에서 모듈 스코프가 아닌 함수 내부에서 스토어를 호출하는 등의 모범 사례를 강조합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ComeOnOliver/skillshub/tree/HEAD/skills/antfu/skills/pinia
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Pinia은(는) 무엇을 하나요?

Pinia는 Vue의 공식 상태 관리 라이브러리로, 직관적이고 타입 안전하게 설계되었습니다. Options API와 Composition API 스타일을 모두 지원하며, 일급 TypeScript 지원 및 개발자 도구 통합을 제공합니다.

이 스킬은 Pinia v3.0.4를 기반으로 하며, 2026-01-28에 생성되었습니다.

핵심 참조

주제설명참조
스토어스토어 정의, state, getters, actions, storeToRefs, 구독핵심-스토어

기능

확장성

주제설명참조
플러그인사용자 정의 속성, 상태 및 동작으로 스토어 확장기능-플러그인

조합성

주제설명참조
컴포저블스토어 내에서 Vue 컴포저블 사용 (VueUse 등)기능-컴포저블
스토어 조합스토어 간 통신, 순환 의존성 방지기능-스토어-조합

모범 사례

주제설명참조
테스트@pinia/testing을 사용한 단위 테스트, 모킹, 스터빙모범-사례-테스트
컴포넌트 외부 사용네비게이션 가드, 플러그인, 미들웨어에서 스토어 사용모범-사례-컴포넌트-외부

고급

주제설명참조
SSR서버 사이드 렌더링, 상태 수화고급-ssr
NuxtNuxt 통합, 자동 임포트, SSR 모범 사례고급-nuxt
HMR개발을 위한 핫 모듈 교체고급-hmr

주요 권장 사항

  • 복잡한 로직, 컴포저블 및 감시자에는 Setup Store를 선호하세요.
  • state/getters를 구조 분해할 때는 반응성을 유지하기 위해 storeToRefs()를 사용하세요.
  • actions는 직접 구조 분해할 수 있습니다. - 스토어에 바인딩되어 있습니다.
  • SSR을 위해 스토어는 모듈 스코프가 아닌 함수 내부에서 호출하세요.
  • 더 나은 개발 경험을 위해 각 스토어에 HMR 지원을 추가하세요.
  • 모킹된 스토어로 컴포넌트를 테스트할 때는 @pinia/testing을 사용하세요.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ComeOnOliver/skillshub

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

ComeOnOliver/skillshub

Next.js 16+ 和 Turbopack — 增量打包、文件系统缓存、开发速度，以及何时使用 Turbopack 与 webpack。

ComeOnOliver/skillshub

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.

ComeOnOliver/skillshub

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, video), and create real time alerts for events from live streams or desktop capture.

ComeOnOliver/skillshub

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

ComeOnOliver/skillshub

Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.

ComeOnOliver/skillshub

Provides Tamagui patterns for config v4, compiler optimization, styled context, and cross-platform styling. Must use when working with Tamagui projects (tamagui.config.ts, @tamagui imports).

ComeOnOliver/skillshub

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

ComeOnOliver/skillshub

Create high-converting, visually distinctive landing pages. Use when building marketing pages, product launches, SaaS homepages, or any single-page conversion-focused website. Guides section-by-section composition with anti-AI-slop principles.

ComeOnOliver/skillshub

Auto-loaded context for Portfolio Buddy 2 development. Use for ANY task involving: React 19 development, TypeScript, portfolio analysis features, metrics calculations, trading strategy comparison, or working with the Portfolio Buddy 2 codebase. Contains tech stack, known issues, and architectural constraints.

ComeOnOliver/skillshub

Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.

ComeOnOliver/skillshub

Implement UI using Shadcn MCP (atoms/theme) and 21st.dev MCP (complex sections). Use when adding buttons, layouts, or generating landing pages.

ComeOnOliver/skillshub

A conceptual skill for building an API client in Next.js that handles JWT tokens

ComeOnOliver/skillshub

Best practices and patterns for Next.js App Router, Server Actions, and Routing in this project.

ComeOnOliver/skillshub

The Design System, Theme, and UX rules for the Physical AI Hub.

ComeOnOliver/skillshub

Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

ComeOnOliver/skillshub

This document captures learnings from fixing keyboard navigation issues when floating components (Select, DropdownMenu, Popover) have CSS open/close animations.

ComeOnOliver/skillshub

Build Next.js 16 applications with correct patterns and distinctive design. Use when creating pages, layouts, dynamic routes, upgrading from Next.js 15, or implementing proxy.ts. Covers breaking changes (async params/searchParams, Turbopack, cacheComponents) and frontend aesthetics. NOT when building non-React or backend-only applications.

ComeOnOliver/skillshub

Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.

ComeOnOliver/skillshub

Build interfaces that resonate, not just render. This skill enforces bold, intentional

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community