Frameworks
Best Svelte Agent Skills
27 Svelte skills for AI coding assistants — ranked by popularity.
This collection provides targeted skill files for AI agents like Claude Code, Cursor, and Codex, specifically calibrated for the Svelte ecosystem. By integrating these `.md` files into your agent's context, you provide it with precise instructions on Svelte 5 runes, SvelteKit routing patterns, and UI library implementations. Whether you are building complex forms with TanStack Form, designing interfaces with Skeleton Labs, or structuring a full SvelteKit application, these skills eliminate repetitive prompting. Developers can select modules that match their current stack to ensure the agent follows established architecture, such as feature-sliced design or consistent component composition. This setup moves beyond general coding assistance, offering your AI a clear rulebook for your specific project requirements. It is a practical way to maintain code quality while working with the latest Svelte features.
Top Svelte skills
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
skeleton-svelte
martinemde
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating layouts, or working with Skeleton-specific features in Svelte 5 and SvelteKit 2+ projects.
svelte-expert
Raudbjorn
Expert Svelte/SvelteKit development assistant for building components, utilities, and applications. Use when creating Svelte components, SvelteKit applications, implementing reactive patterns, handling state management, working with stores, transitions, animations, or any Svelte/SvelteKit development task. Includes comprehensive documentation access, code validation with svelte-autofixer, and playground link generation.
svelte5-development
splinesreticulating
Comprehensive Svelte 5 and SvelteKit development guidance. Use this skill when building Svelte components, working with runes, or developing SvelteKit applications. Covers reactive patterns, component architecture, routing, and data loading.
sveltekit-structure
spences10
SvelteKit structure guidance. Use for routing, layouts, error handling, and SSR. Covers file naming (+page vs +layout vs +server), nested layouts, error boundaries, and hydration.
tanstack-form
exceptionless
TanStack Form with Zod validation in Svelte 5. Form state management, field validation, error handling, and ProblemDetails integration. Keywords: TanStack Form, createForm, Field, form validation, zod schema, form errors, onSubmit, onSubmitAsync, problemDetailsToFormErrors
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
tanstack-query
exceptionless
Data fetching and caching with TanStack Query in Svelte. Query patterns, mutations, cache invalidation, WebSocket-driven updates, and optimistic updates. Keywords: createQuery, createMutation, TanStack Query, query keys, cache invalidation, optimistic updates, refetch, stale time, @exceptionless/fetchclient, WebSocket
svelte
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.
svelte-migrate
temporalio
Migrate a Svelte 4 component to Svelte 5 runes syntax. Use when asked to migrate, convert, or upgrade a .svelte file to Svelte 5.
admin-crud-page
svelte-society
Create admin dashboard pages with tables, forms, and actions
component-builder
svelte-society
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.
page-builder
svelte-society
Patterns for building list and detail pages with forms, filters, and data fetching
using-remote-functions
svelte-society
Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.
svelte-code-writer
svelte-society
CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating or editing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
raw-app
windmill-labs
MUST use when creating raw apps.
worklog-design
regisx001
>
uncodixfy
BrammekeTV
Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.
e2etest
ak110
>-
ui-review
hoyvoh
UI/UX audit skill for reviewing existing interfaces. Invoke when user asks to review UI, audit the frontend, check design quality, or review UX. Analyzes code structure, accessibility, visual consistency, responsiveness, and UX patterns. Outputs structured findings with severity and fix suggestions.
formisch-usage
sandros94
Form handling with Formisch, the type-safe form library for modern frameworks. Use when the user needs to create forms, handle form state, validate form inputs, or work with Formisch.
sveltekit-adapters
sextondjc
Use when selecting, configuring, or troubleshooting SvelteKit adapters for deployment to Node.js, static hosts, Vercel, Cloudflare, and other targets.
land
PacificStudio
Land an OpenASE PR by syncing with main, resolving conflicts, waiting for CI,
push
PacificStudio
Push current branch changes to origin and create or update the corresponding
How to choose a Svelte skill
Evaluate these skills based on the specific phase of your project. If you are starting a new application, prioritize the structure and architecture skills. When you reach UI development, pull in the design and component-specific modules like Skeleton or Tailwind-based systems. Check the skill documentation to ensure it matches your version requirements, especially regarding Svelte 5 runes versus older syntax. Select tools that explicitly address your pain points, such as form state management or directory organization, rather than loading unnecessary context that may dilute agent performance.