svelte

Guide Svelte component mutations with TanStack Query and shadcn-svelte patterns.

4.7k|374|Updated Mar 16, 2023
One-click install
npx skills add https://github.com/EpicenterHQ/epicenter --skill svelte-epicenterhq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/EpicenterHQ/epicenter/tree/main/.agents/skills/svelte
Command: npx skills add https://github.com/EpicenterHQ/epicenter --skill svelte-epicenterhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Guides engineers to implement robust, scalable UI interactions in Svelte by detailing mutation usage, component organization, and styling practices.

Core Features & Use Cases

  • Mutation patterns in Svelte using TanStack Query (e.g., createMutation) and inline callbacks for contextual handling.
  • Component organization and import patterns for shadcn-svelte UI, including folder structure and self-contained components.
  • Self-contained component patterns to encapsulate UI logic (dialogs, modals) without parent state pollution.

Quick Start

Create a small Svelte component that uses createMutation and inline props typing, and build it with shadcn-svelte components following the patterns described.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I structure Svelte components to avoid polluting parent state with dialogs and modals?

Self-contained Svelte component patterns encapsulate UI logic like dialogs and modals without parent state pollution. Organizing components into dedicated folder structures ensures UI interactions remain isolated, scalable, and maintainable across modern web apps.

What is the best way to handle mutations in Svelte using TanStack Query?

Handling mutations in Svelte with TanStack Query involves using createMutation alongside inline callbacks for contextual handling. This pattern guides robust stateful UI interactions by managing mutation state directly within the component scope.

How do I type props in Svelte without prefixing callback handlers?

Typing props in Svelte is done inline to satisfy strict typing conventions. Callbacks should avoid handle-prefixed naming, instead using descriptive action verbs to maintain consistent component patterns and clean import conventions.

Can I use shadcn-svelte UI components with custom folder and import patterns?

shadcn-svelte UI components support custom folder structures and import patterns. Implementing self-contained components ensures consistent usage of styling utilities while maintaining organized, scalable UI architecture across the application.

Does this Svelte pattern require TypeScript for inline props typing?

TypeScript is used for inline props typing in these Svelte component patterns. Satisfying strict typing conventions ensures robust stateful UI interactions, guiding mutation usage and consistent styling practices across modern web apps.

Why should I avoid handle-prefixed callback names in Svelte component patterns?

Avoiding handle-prefixed callback names in Svelte component patterns ensures cleaner, more descriptive action verbs. This convention supports self-contained components, consistent styling utilities, and scalable UI interactions without parent state pollution.