How does this skill handle TanStack Query mutations?

It prioritizes using createMutation in .svelte files, recommending that onSuccess and onError callbacks be passed directly to the .mutate() function for better access to local component state.

What is the recommended import pattern for shadcn-svelte?

The skill prefers namespace imports (e.g., import * as Dialog) for multi-part components and named imports for single components to maintain clean and readable code.

Why use self-contained components over parent state management?

Self-contained components reduce state pollution in parent components, improve encapsulation, and simplify the mental model by keeping logic like dialog triggers and actions localized.

Does this skill work with TypeScript files?

Yes, it provides specific guidance for .ts files, such as using .execute() for mutations since createMutation requires Svelte component context.

Svelte 5 Development & Patterns

Name: Svelte 5 Development & Patterns
Author: EpicenterHQ

byEpicenterHQ

•

3,817

開発者ツール

Provides standardized patterns for Svelte 5 components, TanStack Query mutations, and shadcn-svelte integration to build scalable web applications.

概要

This skill equips Claude with advanced Svelte 5 implementation strategies, focusing on modern reactive patterns and efficient UI development. It enforces best practices for TanStack Query mutations within Svelte files, streamlines the use of shadcn-svelte components through organized folder structures and namespace imports, and promotes a self-contained component philosophy to reduce parent state pollution. By utilizing these domain-specific guidelines, developers can ensure their Svelte applications remain clean, maintainable, and idiomatic while leveraging the full power of the Svelte 5 reactivity system and the shadcn-svelte ecosystem.

主な機能

Context-aware handling for TypeScript (.ts) vs. Svelte (.svelte) files
shadcn-svelte component organization and namespace import conventions
Optimized Lucide icon import strategies for bundle efficiency
3,817 GitHub stars
Self-contained component patterns to minimize parent state complexity
Standardized TanStack Query mutation patterns for Svelte 5

ユースケース

Building complex interactive forms and data-driven dashboards with Svelte 5
Refactoring component logic to follow composition-over-inheritance patterns
Implementing scalable UI systems using shadcn-svelte and Tailwind CSS

概要

主な機能

Context-aware handling for TypeScript (.ts) vs. Svelte (.svelte) files
shadcn-svelte component organization and namespace import conventions
Optimized Lucide icon import strategies for bundle efficiency
3,817 GitHub stars
Self-contained component patterns to minimize parent state complexity
Standardized TanStack Query mutation patterns for Svelte 5

ユースケース

Building complex interactive forms and data-driven dashboards with Svelte 5
Refactoring component logic to follow composition-over-inheritance patterns
Implementing scalable UI systems using shadcn-svelte and Tailwind CSS