Agent Skills
返回列表
💻

React组件库文档服务

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 安装 @org-rn88lg3j/react-compo-kit

技能介绍

它解决什么问题

在 Celo 链上开发 Web3 应用时，通常会用到 Composer Kit 这套 React 组件库。组件覆盖面广——钱包、支付、NFT、Token 管理等都有，但实际开发中有三个反复出现的麻烦：组件太多，记不住全名和归属分类；某个组件的 prop 类型、必填项要靠翻文档确认；想看一段可跑的示例还得切到浏览器。这个技能把文档查询塞进 MCP 工具调用里，让模型在编码流程中直接查组件信息、拿示例代码，不用中断工作流去翻网页。

它如何工作

技能本身不含业务逻辑，模型是路由层：理解意图、选工具、抽参数，代码只负责调 API。

典型流程：

  1. 检查密钥：先看 scripts.config.settings.api_key 是否为空，空则通过 AskUserQuestion 向用户询问，拿到后调 scripts.config.set_api_key(key) 保存
  2. 选工具：按用户意图从 8 个函数里挑一个，例如查组件详情就选 scripts.tools.get_component
  3. 抽参数：参数不完整同样用 AskUserQuestion 追问，比如缺 component_name 就问要哪个组件
  4. 关键字调用：一律按关键字传参，如 scripts.tools.get_component(component_name='wallet')
  5. 整理返回：工具返回 result["raw"]、result["success"]、result["message"]，把 raw 里的 JSON 整理后展示

八个工具覆盖了常见查询场景：list_components 看组件库全貌；get_component 查单个组件的源码、props 和用法；get_component_props 拿 prop 明细（类型、是否必填）；get_component_example 取真实示例代码，可选 example_type 筛 basic/advanced；search_components 按关键词搜组件；get_components_by_category 按分类（如钱包集成、支付交易、NFT 组件）批量拿；get_installation_guide 拿各包管理器的安装步骤；get_celo_composer_cli_info 查 Celo Composer CLI create 命令的 flags 用法。

适用边界与注意点

  • 密钥是硬前提：没配 XBY_APIKEY 时禁止自行搜索或编造数据，必须先问用户拿
  • 它是文档检索工具，不负责生成、编译或部署组件代码
  • 交互轮数取决于请求的明确度，参数含糊时会触发追问
  • example_type、package_manager 等参数可选，不填走默认逻辑（如包管理器默认 npm）

使用场景

  • 开发 Celo 链上 DApp 时，需要确认 Composer Kit 某个组件的 props 类型与必填项
  • 新接手项目，要快速列出 Composer Kit 全部组件及分类，建立整体认知
  • 集成支付组件前，想获取官方文档中的真实示例代码做参考
  • 准备用 Celo Composer CLI 初始化项目，查 create 命令各 flags 的用法

适合人员

  • 在 Celo 链上开发 DApp 的前端工程师，需要在编码时快速查组件 API 与示例代码
  • 刚接手 Composer Kit 项目的开发者，想短时间内摸清组件库全貌与分类体系
  • 负责评审组件用法的团队技术负责人，需要核对 props 明细与官方示例是否一致
  • 用 Celo Composer CLI 搭建项目骨架的工程师，需要确认 create 命令参数后配置初始化流程