SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场shadcn-component-discovery

shadcn-component-discovery

前端与建站

查看项目

更新于 10-15 18:05

技能介绍

用途

shadcn Component Discovery 的核心用途是在编写任何自定义 UI 代码之前，先在整个 shadcn 生态系统中发现兼容的组件和注册表。它的核心理念是“先搜索再构建”：大多数 UI 需求在 shadcn 生态中已有解决方案，花 10 秒检查注册表的成本，几乎总是低于自己重新构建一个已经存在的组件。

该技能特别关注用户尚未配置的注册表，帮助用户发现并选择可能还不知道的注册表，例如 Magic UI（动画）、Aceternity（首屏区块）、AI Elements（聊天界面）、ElevenLabs UI（语音组件）等。

与官方 shadcn 技能的关系

官方 shadcn 技能（随 CLI v4 发布）搜索的是用户 components.json 中声明的注册表，适合在用户已经决定使用哪些注册表之后使用。本技能填补的是上游空白：生态级认知。它帮助用户发现和选择尚未配置的注册表。当两个技能都适用时，本技能先运行（发现），然后由官方技能接管安装和项目感知工作。

主要能力

  • 生态级组件发现：跨整个 shadcn 生态搜索组件，包括用户尚未配置的注册表。
  • 主动触发：在用户要求构建表格、表单、弹窗、侧边栏、仪表盘、认证页、落地区块、动画、轮播、图表等标准 UI 模式时主动激活。
  • 显式搜索：支持用户直接请求搜索，例如“找一个用于……的组件”“有没有 shadcn 组件可以……”“搜索注册表……”“有什么现成的……”“有没有好的某类组件？”等。
  • 注册表推荐：根据用户描述的需求推荐合适的注册表，并链接到注册表网站供浏览。
  • 结果呈现：以简洁可扫描的格式呈现 2 至 3 个推荐结果，包含注册表限定名称、一句话描述、适配原因和安装命令。
  • 执行选择：支持安装所选组件、查看更多结果、查看代码示例或转为自定义构建。

使用方式

第一步：澄清需求

搜索前确认功能（必须做什么，例如可排序、可筛选、可分页的表格）、风格（动画、极简、无障碍优先、密集、粗野主义等）和约束（是否支持键盘导航、拖拽、移动优先、SSR 等）。

第二步：搜索

根据工具可用性有三种路径：

路径 A：官方 shadcn MCP（首选）。如果 shadcn MCP 服务器正在运行（通过 npx shadcn@latest mcp init 或等效方式配置），直接使用其工具：

  1. mcp__shadcn__search_items_in_registries

    • registries: ["@shadcn", "@blocks", "@animate-ui", "@reui", "@diceui"]
    • query: "<search term>"
    • limit: 10

  2. 对有价值的结果获取完整详情： mcp__shadcn__view_items_in_registries

    • items: ["@registry/component-name", "@registry/other"]

  3. 获取实现示例： mcp__shadcn__get_item_examples_from_registries

    • query: "<component>-demo"

  4. 获取安装命令： mcp__shadcn__get_add_command_for_items

    • items: ["@registry/chosen-component"]

MCP 只搜索用户 components.json 中配置的注册表。如果用户需要更专业的组件，建议先将相关注册表添加到 components.json。

路径 B：shadcn CLI（无 MCP，但有 shadcn 项目）。如果有 components.json 但未配置 MCP，使用 CLI v3 命令：

在已配置的注册表中搜索

npx shadcn@latest search "<term>"

安装前预览组件

npx shadcn@latest view @registry/component-name

列出注册表中所有可用内容

npx shadcn@latest list @registry

建议添加 MCP 以获得更好的智能体集成：npx shadcn@latest mcp init。

路径 C：无项目上下文。如果还没有 shadcn 项目，或用户只是在探索：根据描述的需求推荐注册表；直接链接到注册表网站供浏览；在用户确定方向后，提供帮助设置 shadcn 项目（npx shadcn@latest init）。

第三步：呈现发现结果

根据上下文匹配响应格式，保持可扫描。主动检查时保持五行以内；显式搜索时列出前几个匹配项，包含注册表限定名称、一句话描述、适配原因和安装命令；当有 3 个以上真正可行的选项且权衡不同时，使用简短表格并附推荐和安装命令。

第四步：执行选择

安装所选组件：运行 add 命令，然后根据需要自定义；查看更多：返回额外匹配项；查看代码：通过 get_item_examples_from_registries 或注册表演示 URL 获取示例；自定义构建：继续，但参考最接近的现有组件了解组合模式（CVA、cn()、data-slot、语义令牌）。

搜索策略

有效查询词：简短具体的名词效果最好，查询保持 1 至 3 个词。例如数据展示用 table、data-grid、list；用户输入用 form、input、field、select、combobox；导航用 sidebar、nav、menu、tabs、breadcrumb；反馈用 toast、sonner、alert、notification；浮层用 dialog、modal、sheet、popover、drawer；媒体用 carousel、gallery、image；动画用 animate、motion、transition；布局用 card、section、hero、grid、stack；日期时间用 calendar、date-picker、date-range。

注册表专长快速选择：核心 UI 原语查 @shadcn；页面区块和预构建块查 @blocks、Tailark、HextaUI；数据网格和高级表格查 @reui；动画组件查 @animate-ui、Magic UI、Aceternity UI；AI/聊天界面查 AI Elements、assistant-ui；无障碍优先（React Aria）查 @diceui、JollyUI、Intent UI；语音/音频查 ElevenLabs UI；营销/落地页查 Tailark、Eldora UI；风格变体（粗野主义、复古、玻璃）参见 references/registries.md。

适用场景

  • 用户要求构建表格、表单、弹窗、侧边栏、仪表盘、认证页、落地区块、动画、轮播、图表等标准 UI 模式。
  • 用户描述的功能隐含 UI 需求，例如“添加用户账户管理”隐含表格，“让用户选择日期范围”隐含日期选择器。
  • 用户提到构建“像 X 一样”的东西，其中 X 是常见模式。
  • 用户直接请求搜索组件或注册表。
  • 用户直接提到特定注册表，如 @animate-ui、Magic UI、Aceternity、Tailark 等。

限制

  • 官方 shadcn MCP 只搜索用户 components.json 中配置的注册表，无法搜索未配置的注册表。
  • 本技能本身不安装组件，安装由官方 shadcn 技能或 CLI 完成。
  • 不推荐未维护或已废弃的注册表。
  • 呈现注册表时，如果用户尚未配置，需要提及 components.json 步骤。
  • 资料中未提供具体的收费、价格或平台限制信息。

资源

  • 注册表目录：references/registries.md
  • 官方 shadcn 文档：https://ui.shadcn.com
  • 官方 shadcn MCP 文档：https://ui.shadcn.com/docs/mcp
  • 注册表浏览器：https://registry.directory
  • 组件索引：https://shadcnregistry.com