Agent skill

svelte-components

Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

View SKILL.md on GitHub Repository
Stars 64
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/svelte-components

SKILL.md

Svelte Components

Quick Start

Component libraries: Bits UI (headless) | Ark UI | Melt UI (primitives)

Form trick: Use form attribute when form can't wrap inputs:

svelte
<form id="my-form" action="/submit"><!-- outside table --></form>
<table>
	<tr>
		<td><input form="my-form" name="email" /></td>
		<td><button form="my-form">Submit</button></td>
	</tr>
</table>

Web Components

javascript
// svelte.config.js
export default {
	compilerOptions: {
		customElement: true,
	},
};
svelte
<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />

<button><slot /></button>

Reference Files

  • component-libraries.md - Bits UI, Ark UI setup
  • web-components.md - Building custom elements
  • form-patterns.md - Advanced form handling

Notes

  • Bits UI 1.0: flexible, unstyled, accessible components for Svelte
  • Form defaultValue attribute enables easy form resets
  • Use snippets to wrap rich HTML in custom select options
  • Last verified: 2025-01-14

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

spences10/svelte-skills-kit

sveltekit-data-flow

SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().

64 1
Explore
spences10/svelte-skills-kit

sveltekit-structure

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

64 1
Explore
spences10/svelte-skills-kit

layerchart-svelte5

LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

64 1
Explore
spences10/svelte-skills-kit

svelte-runes

Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.

64 1
Explore
spences10/svelte-skills-kit

svelte-deployment

Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.

64 1
Explore
spences10/svelte-skills-kit

svelte-styling

64 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results