用途:在 SvelteKit 项目中正确使用 shadcn-svelte 组件。技能会检测项目环境、展示可用组件,并提供完整组件文档入口,帮助在构建 UI 时选对组件。
前提:项目需为 SvelteKit 应用且已初始化 shadcn-svelte。在已有 SvelteKit 项目中初始化:npx shadcn-svelte@latest init
使用方式:
- 检测项目:bash <skill-path>/scripts/detect.sh . 该脚本确认是否为 SvelteKit 项目(检查 svelte.config.js/ts 与 package.json 中的 @sveltejs/kit)、是否安装 shadcn-svelte(检查 components.json、bits-ui 或 shadcn-svelte)、列出 UI 目录中已装组件并给出文档地址。脚本以退出码 1 结束时,说明项目不符合条件,不应继续使用 shadcn-svelte 组件。
- 读文档:https://www.shadcn-svelte.com/llms.txt 提供按类别组织的组件索引及各组件 .md 文档链接,组件文档包含导入语句、用法示例、props、事件、插槽、变体、配置与无障碍信息。
- 选组件:先检测,再取 llms.txt,阅读目标组件文档;未安装则添加:npx shadcn-svelte@latest add <component-name>,可一次添加多个:npx shadcn-svelte@latest add button card dialog,列出全部可用组件:npx shadcn-svelte@latest add。
组件类别:布局(Aspect Ratio、Collapsible、Resizable、Scroll Area、Separator、Sidebar);表单与输入(Button、Calendar、Checkbox、Combobox、Date Picker、Input、Input OTP、Label、Radio Group、Range Calendar、Select、Slider、Switch、Textarea、Toggle、Toggle Group);数据展示(Accordion、Avatar、Badge、Card、Carousel、Chart、Table、Data Table);反馈(Alert、Alert Dialog、Progress、Skeleton、Sonner);浮层(Context Menu、Dialog、Drawer、Dropdown Menu、Hover Card、Menubar、Popover、Sheet、Tooltip);导航(Breadcrumb、Command、Pagination、Tabs);排版(Typography)。
导入模式:通常从项目 $lib/components/ui 目录导入,多子组件用命名空间导入,简单组件用命名导入。
准则:先检测再推荐;先读文档再使用,不猜测 props;导入前确认已安装;使用项目配置路径(依 components.json 可能不同);遵循 Svelte 5 模式(runes 与 snippet 组合);优先组合使用组件。