SuperAPI AI 工具集

agentic-ui-development

前端与建站

查看项目

更新于 10-16 05:00

技能介绍

用途:本技能面向 @ant-design/agentic-ui 项目,提供整体开发流程、规范与组件清单,用于上手项目、新增组件、运行测试与构建等场景。具体组件实现见各 component-xxx Skill。

规范入口:编码与仓库规范见仓库根目录 AGENTS.md,涵盖命名、TypeScript、样式、测试、Git/PR、Changelog;组件级约定见各 .cursor/skills/component-xxx/SKILL.md,与 AGENTS.md 保持一致。

常用命令:文档站点 pnpm start(http://localhost:8000);构建 pnpm run build;单元测试日常 pnpm test(精简),全量 pnpm run test:full(--mode full),覆盖率 pnpm run test:coverage 或全量 pnpm run test:coverage:full;E2E pnpm run test:e2e,调试 pnpm run test:e2e:debug;检查 pnpm run lint、pnpm tsc;格式化 pnpm run prettier。

项目结构:源码在 src/,单组件目录含 ComponentName.tsx、style.ts、types.ts、index.tsx,子组件/hooks/utils 按需;导出入口 src/index.ts 按功能分区导出,新增组件需在此处与对应组件 index 中声明;文档在 docs/,Dumi 配置 .dumirc.ts;测试在 tests/(Vitest)与 e2e/(Playwright);脚本在 scripts/。

组件清单:布局(AgenticLayout、Workspace、ChatLayout、ChatBootPage)、聊天气泡(Bubble 及 AIBubble、UserBubble、List)、思维链/工具(ThoughtChainList、ToolUseBar、ToolUseBarThink)、任务/运行(AgentRunBar、TaskList)、历史(History)、编辑器/输入(MarkdownEditor、MarkdownInputField)、Schema(SchemaForm、SchemaEditor、SchemaRenderer、validator)、插件(chart、code、formatter、mermaid)、基础 UI(AILabel、AnswerAlert、BackTo、Quote、WelcomeMessage)及通用子组件。

新增组件/功能:遵循 AGENTS.md 的命名、Props/事件、Ref、样式(createStyles + token)、文件组织;在 src/index.ts 增加导出,如有新组件 Skill 在 .cursor/skills/README.md 补充一览;补全类型、测试(覆盖率 ≥80%)与文档/Changelog(中英文)。开发或排查时优先查 AGENTS.md 与对应 component-xxx Skill,再改源码与入口。