skills.rest
aydadevelop
aydadevelopOFFICIAL
Explore all skills by this author →
GitHub

svelte

Guide Svelte 5 development with TanStack Query mutations and shadcn-svelte components.

Updated Aug 23, 2026
Search Tags:#svelte#ui development#tanstack query#component patterns#sveltekit#shadcn-svelte
One-click install
npx skills add https://github.com/aydadevelop/turborepo-starter --skill svelte-aydadevelop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/aydadevelop/turborepo-starter/tree/main/.agents/skills/svelte
Command: npx skills add https://github.com/aydadevelop/turborepo-starter --skill svelte-aydadevelop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides best practices and patterns for developing with Svelte 5, including efficient state management with TanStack Query, leveraging shadcn-svelte components, and structuring Svelte code for maintainability and performance.

Core Features & Use Cases

  • TanStack Query Mutations: Demonstrates the preferred pattern for handling data mutations in Svelte components for better state management and UX.
  • shadcn-svelte Integration: Guides on component organization, import patterns, and styling customization for shadcn-svelte.
  • Code Organization: Enforces patterns like inline props and self-contained components to improve code readability and reduce complexity.
  • Use Case: When building a new feature in a SvelteKit application that involves user input and data submission, use this Skill to ensure mutations are handled correctly and UI components are structured according to best practices.

Quick Start

Use the svelte skill to implement a data mutation using createMutation from TanStack Query within a Svelte component.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I handle data mutations in Svelte 5 with TanStack Query?▼

To handle data mutations in Svelte 5, use the createMutation pattern from TanStack Query within your components. This approach ensures efficient state management and improves user experience during data submission in SvelteKit applications.

What is the best way to structure Svelte 5 components for maintainability?▼

Structure Svelte 5 components by making them self-contained with inline props. This code organization pattern improves readability, reduces complexity, and ensures better state management when building user interfaces with shadcn-svelte.

Can I use shadcn-svelte with SvelteKit for UI development?▼

Yes, you can use shadcn-svelte with SvelteKit for UI development. This Skill guides component organization, import patterns, and styling customization to build maintainable user interfaces that follow Svelte 5 conventions.

Why does my Svelte 5 component state management become hard to maintain?▼

Svelte 5 state management becomes hard to maintain without proper patterns. Using TanStack Query mutations and enforcing self-contained components with inline props addresses these challenges by structuring code for better readability and performance.

What conventions do I need to follow for shadcn-svelte imports and styling?▼

For shadcn-svelte, you need to follow specific import and styling customization conventions. Adhering to these patterns alongside inline prop declarations ensures your Svelte components remain self-contained and maintainable.

Related Skills

Explore More Software Engineering Skills→
aguirrerjgaguirrerjg
1

svelte5-best-practices

Review Svelte 5 components for correct rune syntax and SvelteKit patterns.

Community
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
oakossoakoss
14

svelte

Provide Svelte 5 and SvelteKit patterns for reactivity, routing, and form actions.

Official
Intermediate
fgarofalo56fgarofalo56
6

tailwind-ui

Guide Tailwind CSS styling for responsive UI components with utility classes.

Community
Intermediate