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

•

Developer Tools

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.

Key Features

01Context-aware handling for TypeScript (.ts) vs. Svelte (.svelte) files

02shadcn-svelte component organization and namespace import conventions

03Optimized Lucide icon import strategies for bundle efficiency

043,817 GitHub stars

05Self-contained component patterns to minimize parent state complexity

06Standardized TanStack Query mutation patterns for Svelte 5

Use Cases

01Building complex interactive forms and data-driven dashboards with Svelte 5

02Refactoring component logic to follow composition-over-inheritance patterns

03Implementing scalable UI systems using shadcn-svelte and Tailwind CSS

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add epicenterhq/epicenter svelte

For use in Claude.ai and ChatGPT

Download Skill