svelte
Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
Security Assessment
About svelte
The Svelte skill provides comprehensive guidelines and best practices for building applications using Svelte 5, specifically focusing on integrating TanStack Query mutations and shadcn-svelte components. This skill aims to streamline the development process by offering structured patterns that enhance the user experience through effective state management during data mutations. By leveraging this skill, developers can ensure that their applications are efficient, maintainable, and user-friendly, minimizing common pitfalls associated with asynchronous operations and component organization.
Key features of this skill include detailed patterns for mutation handling using TanStack Query, instructions for organizing components with shadcn-svelte, and recommendations for styling and import patterns. The skill emphasizes the importance of context when managing mutations and provides a clear distinction between using createMutation and execute methods based on the file type. By following these guidelines, developers can achieve better organization of code, improved error handling, and a cleaner structure for their Svelte applications.
This skill is particularly useful for developers working on Svelte applications who want to implement data fetching and manipulation seamlessly. It targets frontend developers, particularly those familiar with Svelte and looking to enhance their applications with robust state management and UI component best practices. Whether you're a novice learning the ropes or an experienced developer aiming to refine your approach, the Svelte skill offers valuable insights and practical examples to improve your workflow.
FAQ
How do I handle mutations in Svelte using TanStack Query?
Always prefer `createMutation` for handling mutations, passing `onSuccess` and `onError` as the second argument to `.mutate()`.
Can I use `.execute()` in Svelte files?
Yes, but only in specific scenarios where you don't need loading states, are performing a one-off operation, or require fine-grained control over async flow.
What is the best way to organize my shadcn-svelte components?
Each component should be in its own folder under `$lib/components/ui/` with an `index.ts` export, following kebab-case naming conventions.
What import patterns should I follow for components?
Use namespace imports for multi-part components and named imports for single components. Always import Lucide icons individually.
Are there any limitations when using this skill?
The skill is focused on Svelte 5 and TanStack Query, so it may not cover specific use cases for other frameworks or versions.
Install svelte
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
EpicenterHQ/epicenter