SuperAPI AI 工具集

create-component

编程与开发

查看项目

更新于 10-16 08:48

技能介绍

用途:在 gluestack-ui(跨平台 React Native/Expo UI 库)中创建一个新组件,按既有的复合组件 API(compound component API)模式,用引导式工作流完成从规划到实现的设计过程。

主要能力与流程:工作流分为 8 个阶段。先进入 Plan Mode,通过 AskUserQuestion 收集组件名称、分类、目的、动画库偏好等需求;随后用 WebSearch 调研同类组件的最佳实践、无障碍模式与实现方式,并阅读 CONTRIBUTING.md 及 accordion、button、alert-dialog、creator 等示例来分析既有模式;再进行 API 设计、取舍分析(如受控/非受控状态、动画实现、定位方式)和模式匹配,全程设 6 个用户确认点。

使用方式与约束:始终先进入 Plan Mode;必须先调研既有组件再提出模式;使用 AskUserQuestion 收集偏好;涉及取舍需先讨论;多部件组件遵循复合组件 API。不得编辑 apps/*/components/ui/ 下生成文件,只改 src/;不手动改 apps/ 目录(经 mappers 自动同步)。样式须使用 src/components/ui/gluestack-ui-provider/config.ts 中的最新颜色令牌,如 bg-background、text-foreground,不硬编码颜色。导入须正确,例如 @gluestack-ui/core/bottomsheet/creator 而非 @gluestack-ui/bottomsheet。导出须在 packages/gluestack-core/src/[component]/index.tsx 做 barrel 导出并配置 package.json typesVersions。动画库须尊重用户选择。

适用场景:为 gluestack-ui 新增或扩展组件,追求 API 一致性与可访问性时使用。限制:该技能面向特定仓库结构与规范,仓库路径与命令等未在资料中完整提供,具体依赖包、版本与配置细节暂未提供。