Is this skill compatible with Pinia 3.0?

Yes, the skill is production-tested for Vue 3.5+ and Pinia 2.2.6 or 3.0+, ensuring compatibility with the latest reactivity features.

What are the primary benefits of the Pinia Colada skill?

The skill provides optimized code patterns that reduce token consumption by ~65% and includes a specialized catalog to prevent 12 common data-fetching errors like hydration mismatches and race conditions.

How does it handle optimistic UI updates?

It implements standard patterns using onMutate for snapshots, onError for rollbacks, and onSettled for final cache invalidation to ensure UI consistency.

Does this skill support Nuxt.js projects?

Yes, it includes specific instructions for @pinia/colada-nuxt, focusing on module ordering, SSR serialization, and preventing hydration errors during server-side rendering.

Can it help me migrate from TanStack Vue Query?

Absolutely. The skill contains a dedicated migration guide that outlines API differences, breaking changes, and provides patterns to transition your hooks to Pinia Colada.

Pinia Colada Data Fetching

Name: Pinia Colada Data Fetching
Author: secondsky

bysecondsky

•

開発者ツール

Implements production-ready data fetching and server state management for Vue and Nuxt applications using Pinia Colada.

概要

This skill provides Claude with expert-level guidance for implementing Pinia Colada in Vue 3 and Nuxt environments. It streamlines the creation of useQuery and useMutation hooks, manages complex query caching, and handles advanced scenarios like SSR hydration, optimistic updates, and reactive query keys. Designed to prevent 12 common architectural errors and save significant token costs, it ensures your data-fetching logic is type-safe, performant, and follows the latest composition API standards.

主な機能

21 GitHub stars
Specific SSR and hydration mismatch prevention for Nuxt applications
Optimistic UI update patterns with context-based rollbacks
Standardized useQuery and useMutation implementation patterns
Reactive query key management for dynamic data fetching
Automated query invalidation and cache management strategies

ユースケース

Implementing complex CRUD operations with synchronized cache invalidation
Building reactive dashboards with background polling and automatic refetching
Migrating existing Vue projects from TanStack Query to Pinia Colada

概要

主な機能

21 GitHub stars
Specific SSR and hydration mismatch prevention for Nuxt applications
Optimistic UI update patterns with context-based rollbacks
Standardized useQuery and useMutation implementation patterns
Reactive query key management for dynamic data fetching
Automated query invalidation and cache management strategies

ユースケース

Implementing complex CRUD operations with synchronized cache invalidation
Building reactive dashboards with background polling and automatic refetching
Migrating existing Vue projects from TanStack Query to Pinia Colada