mcpField
S
shadcn-sveltekit-design

shadcn-sveltekit-design

github.com/michael-obele设计与 UI58178 次安装4 周前更新
代码仓库

关于 shadcn-sveltekit-design

用于构建 SvelteKit 界面的设计技能，通过 MCP 工具核实 shadcn-svelte 组件。它引导开发者先查找文档中的基础组件，再编写 Svelte 5 代码，避免假定未经确认的 API。

主要功能

  1. 01通过 MCP 查询组件与文档
  2. 02设计需求梳理与视觉方向
  3. 03将已核实组件映射到布局
  4. 04SvelteKit 与 Svelte 5 编码指引
  5. 05官方组件 CLI 安装流程
  6. 06无障碍与响应式设计约束

适用场景

  1. 01根据功能需求规划 SvelteKit 页面
  2. 02实现前核对组件 API
  3. 03向项目添加官方 shadcn-svelte 组件
  4. 04在保留设计系统的前提下更新界面

MCP 相关

使用配置的 shadcn-svelte MCP 工具搜索、列出和获取组件、文档、图标及安装命令。MCP 不可用时，也说明了托管和本地配置方式。

安装

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

$npx skills add https://github.com/michael-obele/shadcn-svelte-mcp --skill shadcn-sveltekit-design

安装后在 Claude Code 中输入/shadcn-sveltekit-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/
evals.json
references/
mcp-workflow.md
ui-rules.md

详细介绍

Shadcn SvelteKit 设计

使用此技能创建精致的 SvelteKit UI，并依据已配置的 shadcn-svelte MCP 来确定组件方案，而不是依赖记忆。

前提条件

  • 请确保以下 MCP 工具可用：shadcn-svelte-search、shadcn-svelte-get、shadcn-svelte-list、shadcn-svelte-icons 和 bits-ui-get。
  • 如果缺少 MCP，请明确说明，并在继续前提供设置方案：托管地址为 https://shadcn.svelte-apps.me/mcp，本地 stdio 方式为 npx -y shadcn-svelte-mcp（Bun：bunx）。切勿假装某个组件或 API 存在；如果不得不在没有 MCP 的情况下开展工作，只能依据 shadcn-svelte 官方文档进行核实。
  • 对于计划使用的任何组件、区块、图表或文档页面，都以 shadcn-svelte-get 为准。
  • 对于上游已提供的任何库组件，默认通过官方 shadcn-svelte CLI 安装。

工作流

  1. 在设计前了解目标。 询问屏幕类型、受众、内容密度、品牌方向，以及工作是要保留现有视觉风格，还是引入新风格。

  2. 先探索，再编写。 如果用户对功能的描述比较模糊，请从 references/mcp-workflow.md 开始，并在编写 UI 代码前使用发现工具。

  3. 确立明确的视觉方向。 选择清晰的设计主张，避免流于普通的 SaaS UI。提前确定字体、配色逻辑、间距、层级和动效。

  4. 将设计映射到已核实的基础组件。 使用 MCP 确认真实存在的组件、区块、图表、文档和图标来构建布局。如果所需组件不可用，请说明情况并提出最接近的已核实替代方案。

  5. 编写 Svelte 优先的代码。 输出有效的 SvelteKit 和 Svelte 5 代码。切勿使用 React 属性、JSX 模式或 shadcn/ui React 指南。

  6. 说明所选的构建模块。 说明哪些组件或文档已核实，尤其是在用户要求提供实现指导或安装命令时。

  7. 安装供应商组件，而不是重新实现。 如果存在已核实的 shadcn-svelte 组件，请尽可能从 MCP 获取官方 CLI 命令；如果任务需要编辑项目，则亲自运行该命令。只有在 MCP 不可用时，才回退到 shadcn-svelte 官方文档。不要从头手写上游组件源码。可以围绕已安装组件编写包装器、组合、页面代码或项目专用变体。

输出格式

对于页面级工作，请按以下结构组织回复：

  1. 简短的设计概念说明。
  2. 将使用的、已核实的 shadcn-svelte 构建模块。
  3. SvelteKit 文件规划。
  4. 实现。

对于可复用组件，请按以下结构组织回复：

  1. 组件用途和状态。
  2. 所依赖的、已核实的基础组件或图标。
  3. 公共 API 或变体。
  4. 实现。

防护规则

  • 不要编造组件名称、CLI 命令或 props。
  • 如果可以通过 CLI 安装组件，就不要手动重新创建官方 shadcn-svelte 组件源码。
  • 使用网络搜索前，优先从 MCP 获取 CLI 命令。
  • 如果必须通过网络搜索 CLI 信息，只能信任 shadcn-svelte 官方文档中的命令，不要信任 shadcn/ui 或其他名称相似的库。
  • 仅将 shadcn-svelte-icons 用于 Lucide 图标。
  • 仅当 shadcn-svelte-get 提供 tooling.bitsUi.exactName 或 docs.bitsuiName 时，才使用 bits-ui-get，且仅用于了解更底层的原语细节。
  • 当 shadcn-svelte-get 和 bits-ui-get 内容重叠时，标准组件用法优先参考 shadcn-svelte-get；只有需要了解底层实现时，才将准确的原语名称传入 bits-ui-get。
  • 优先组合少量经过验证的组件，而不是囤积大量未经验证的组件。
  • 用户在现有设计系统中工作时，应保留该设计系统。
  • 妥善设计桌面端和移动端布局；不要把移动端布局当作事后补充。
  • 为仅含图标的按钮添加标签（aria-label），确保焦点状态清晰可见，并保留对话框和菜单的键盘导航功能。
  • 如果用户没有要求使用动效库，且项目中也没有使用动效库，则优先使用 Svelte 内置的 transition:、in:、out: 和 animate: 功能。

设计标准

如果任务涉及页面设计、视觉焕新、主题或可复用 UI，请阅读 references/ui-rules.md。

MCP 依据

如果需要了解确切的工具顺序、安装命令规则或防止幻觉的工作流，请阅读 references/mcp-workflow.md。

编辑器 Agent 配套方案

同一套以 MCP 为依据的工作流也以可安装的编辑器 Agent 形式提供，位于仓库根目录的 agents/ 中，包含 VS Code、Claude Code、Cursor、Windsurf/Devin 和 OpenCode 格式，以及适用于 Zed、Codex 和 Gemini CLI 的 AGENTS.md 片段。如果用户想将该工作流用作可选 Agent 或始终启用的规则，而非按需技能，请引导他们前往此处（参见 agents/README.md）。

评论

支持 Markdown