Toolverse
All skills
Frontend

svelte

by EpicenterHQ

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.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
EpicenterHQ
Category
Frontend
Views
27
GitHub repo

About this skill

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.

How to use

  1. Zainstaluj umiejętność w swoim projekcie Svelte, dodając ją do konfiguracji agenta. Upewnij się, że masz zainstalowane zależności: @tanstack/svelte-query, shadcn-svelte oraz odpowiednie biblioteki UI.

  2. Gdy piszesz komponent Svelte wymagający mutacji (np. usuwanie, aktualizacja danych), użyj wzorca createMutation z TanStack Query zamiast ręcznego zarządzania stanami. Umiejętność dostarczy Ci prawidłową strukturę importów i inicjalizacji.

  3. W funkcji mutacji zawsze przekaż callbacki onSuccess i onError jako drugi argument do .mutate(). To pozwala Ci uzyskać dostęp do lokalnego stanu komponentu i obsługić powodzenie lub błąd z pełnym kontekstem.

  4. Wewnątrz callbacku onSuccess obsługuj logikę po pomyślnym wykonaniu — zamykanie dialogów, wyświetlanie powiadomień, nawigację. W onError wyświetl komunikat błędu użytkownikowi z informacjami z odpowiedzi serwera.

  5. Użyj właściwości isPending z obiektu mutacji do wyłączania przycisków i wyświetlania stanów ładowania. Umiejętność zapewnia automatyczne zarządzanie tymi stanami bez dodatkowego kodu.

  6. Dla logiki w plikach TypeScript (.ts) zamiast Svelte, stosuj wzorzec .execute() zamiast createMutation, aby zachować spójność z architekturą projektu.

Related skills

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116