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. 03构建 Web Components
  4. 04富 HTML 选择项处理

适用场景

  1. 01为 Svelte 项目选择组件库
  2. 02处理表单无法包裹输入框的场景
  3. 03将 Svelte 组件编译为自定义元素

安装

复制下面的命令，在终端中运行。

$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