mcpField
S
svelte-components

svelte-components

github.com/spences10開発1691 回インストール16 週間前に更新
リポジトリ

svelte-components について

Svelte のコンポーネント開発向けスキルです。コンポーネントライブラリの選択、フォーム、カスタム要素を扱い、関連する参考ファイルも案内します。

主な機能

  1. 01Bits UI、Ark UI、Melt UI の案内
  2. 02`form` 属性を使ったフォーム処理
  3. 03カスタム要素の作成
  4. 04スニペットによるコンポーネント内容の記述

活用シーン

  1. 01Svelte コンポーネントライブラリの選定
  2. 02フォーム外にある入力要素の処理
  3. 03カスタム要素の作成
  4. 04リッチな選択肢やコンポーネント内容の構築

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/svelte-componentsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

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

詳細

Svelte コンポーネント

クイックスタート

コンポーネントライブラリ： Bits UI（ヘッドレス）｜Ark UI｜Melt UI （プリミティブ）

フォームのヒント： フォームで入力要素を囲めない場合は、form 属性を使用します。

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

Web コンポーネント

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


<svelte:options customElement="my-button" />


<button><slot /></button>

参考ファイル

メモ

  • Bits UI 1.0：柔軟で、スタイルが適用されておらず、Svelte 向けのアクセシブルなコンポーネント
  • フォームの defaultValue 属性を使用すると、フォームを簡単にリセットできます
  • スニペットを使って、カスタムの選択肢にリッチ HTML をラップします
  • 通常の Svelte コンポーネントのコンテンツにはスニペット／{@render} を使用します。ネイティブの <slot> はカスタム要素向けです
  • 最終確認日： 2026-05-14

コメント

Markdown 対応