Asi svelte-components

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

install

source · Clone the upstream repo

git clone https://github.com/plurigrid/asi

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/plurigrid/asi "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/svelte-components" ~/.claude/skills/plurigrid-asi-svelte-components && rm -rf "$T"

manifest: skills/svelte-components/SKILL.md

source content

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:

<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

// svelte.config.js
export default {
	compilerOptions: {
		customElement: true,
	},
};

<!-- 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