ui-data-layer

Manage Svelte data fetching and caching with TanStack Query v6.

1|2|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/lepahc/kynetic-spec --skill ui-data-layer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-data-layer
Source: https://github.com/lepahc/kynetic-spec/tree/main/.agents/skills/ui-data-layer
Command: npx skills add https://github.com/lepahc/kynetic-spec --skill ui-data-layer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pattern-driven data fetching and cache management for Svelte apps using TanStack Query v6.

Core Features & Use Cases

  • Standardized query keys and thunk-based options for queries and mutations.
  • Centralized WebSocket-driven invalidation with automatic revalidation of active queries.
  • Guidance for static mode compatibility and safe data-layer patterns.

Quick Start

Enable the UI data layer patterns in your Svelte project with TanStack Query v6.

Frequently Asked Questions about ui-data-layer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage Svelte data fetching with TanStack Query v6?▼

You can manage Svelte data fetching by applying standardized query keys, thunk-based options for queries and mutations, and centralized WebSocket invalidation to handle cache management effectively.

What is the best way to invalidate TanStack Query cache via WebSocket in Svelte?▼

Centralized WebSocket-driven invalidation automatically triggers revalidation of active queries, ensuring your Svelte UI cache stays synchronized with real-time server updates without manual refetch logic.

Does this data fetching pattern support Svelte static mode?▼

Yes, the pattern provides explicit guidance for static mode compatibility and safe data-layer patterns, ensuring your Svelte application renders correctly without breaking during static generation.

How do I structure typed query keys for mutations in Svelte?▼

Typed query keys are structured using thunk-based options for queries and mutations, standardizing identifiers across your Svelte application to ensure reliable cache management and invalidation.

Can I use centralized WebSocket invalidation for active queries in Svelte?▼

Yes, centralized WebSocket invalidation automatically revalidates active queries in your Svelte application, keeping the UI data layer synchronized with real-time server state changes.