Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
references/component-libraries.mdreferences/form-patterns.mdreferences/web-components.mdComponent 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>
// svelte.config.js
export default {
compilerOptions: {
customElement: true,
},
};
<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />
<button><slot /></button>
defaultValue attribute enables easy form resets