mcpField
S
svelte-components

svelte-components

github.com/spences10Development94538 installsUpdated 2w ago
Repository

About svelte-components

A reference skill for Svelte developers covering component libraries, form handling, and Web Components. It also points to focused references for common implementation patterns.

Key features

  1. 01Bits UI, Ark UI, and Melt UI guidance
  2. 02Form attributes and reset patterns
  3. 03Building Web Components
  4. 04Handling rich HTML select options

Use cases

  1. 01Choosing a component library for a Svelte project
  2. 02Handling forms that cannot wrap inputs
  3. 03Compiling Svelte components as custom elements

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spences10/svelte-skills-kit --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" />

<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
  • Last verified: 2025-01-14

Comments

Markdown supported