mcpField
S
svelte-components

svelte-components

github.com/spences10开发1691 次安装16 周前更新
代码仓库

关于 svelte-components

面向 Svelte 组件开发的技能，介绍组件库选择、表单和自定义元素，并提供组件库、Web Components 与表单模式的参考文件。

主要功能

  1. 01介绍 Bits UI、Ark UI 和 Melt UI
  2. 02使用 `form` 属性处理表单
  3. 03构建自定义元素
  4. 04使用 snippets 编写组件内容

适用场景

  1. 01选择 Svelte 组件库
  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 属性可轻松重置表单
  • 使用 snippets 在自定义选择选项中包裹富 HTML
  • 对于常规 Svelte 组件内容，使用 snippets/{@render}；原生 <slot> 用于自定义元素
  • 最后验证时间： 2026-05-14

评论

支持 Markdown