mcpField
S
svelte-components

svelte-components

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

svelte-components について

Svelte 開発者向けに、コンポーネントライブラリ、フォーム処理、Web Components の実装を案内するリファレンススキルです。具体的なパターンを参照できる資料も含みます。

主な機能

  1. 01Bits UI、Ark UI、Melt UI の案内
  2. 02フォーム属性とリセットパターン
  3. 03Web Components の構築
  4. 04リッチ HTML の選択肢への対応

活用シーン

  1. 01Svelte プロジェクトでのライブラリ選定
  2. 02入力欄を囲めないフォームへの対応
  3. 03Svelte コンポーネントのカスタム要素化

インストール

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

$npx skills add https://github.com/spences10/svelte-skills-kit --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 をカスタムセレクトオプションでラップします
  • 最終確認日： 2025-01-14

コメント

Markdown 対応