mcpField
S
svelte-components

svelte-components

github.com/spences10Development1691 installsUpdated 16w ago
Repository

About svelte-components

A Svelte component-development skill covering component-library choices, forms, and custom elements. It also points to reference files for component libraries, web components, and form patterns.

Key features

  1. 01Guidance on Bits UI, Ark UI, and Melt UI
  2. 02Form handling with the `form` attribute
  3. 03Building custom elements
  4. 04Using snippets for component content

Use cases

  1. 01Choosing a Svelte component library
  2. 02Handling inputs outside a form wrapper
  3. 03Creating custom elements
  4. 04Building rich select options or component content

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spences10/skills --skill svelte-components

After installing, type/svelte-componentsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
component-libraries.md
form-patterns.md
web-components.md

Details

From the project README

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" />

<!-- Native <slot> is appropriate inside custom elements. -->
<button><slot /></button>

Reference Files

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
  • Use snippets/{@render} for normal Svelte component content; native <slot> is for custom elements
  • Last verified: 2026-05-14

Comments

Markdown supported