用途:该技能用于在 Svelte 生态中管理 UI 组件,通过 MCP 工具协助选择组件库、安装组件、规划组件层级并做主题定制,主要面向 SvelteKit 项目。
主要能力:覆盖 shadcn-svelte(shadcn/ui 的 Svelte 版本)、Skeleton UI、Melt UI(无头组件)以及用 Tailwind CSS 从零构建的自定义组件。支持简单组件添加与多组件功能构建两类流程;后者适用于需要 3 个以上组件、需要组件层级规划或构建完整表单、仪表盘、弹窗等场景。
使用方式:先确认项目结构,如 ls src/routes/ src/lib/。shadcn-svelte 初始化用 npx shadcn-svelte@latest init,添加组件用 npx shadcn-svelte@latest add button 等,组件位于 src/lib/components/ui/,主题在 src/app.css,配置为 components.json。Skeleton UI 用 npm install @skeletonlabs/skeleton,并在 app.css 中 @import '@skeletonlabs/skeleton/theme'。Melt UI 用 npm install @melt-ui/svelte。自定义组件用 Tailwind CSS 与 Svelte 语法编写。实现后运行 shadcn___get_audit_checklist 审计。
适用场景:SvelteKit 项目中的表单、布局、反馈、导航与数据展示类组件开发,可结合 SvelteKit 表单动作、渐进增强、Svelte stores 与内置过渡动画。
限制:资料未提供该技能的收费、价格、平台支持范围与效果数据;具体组件清单与完整工作流需参考其 references/workflows.md,本介绍未展开。