mcpField
A
agentic-ui-development

agentic-ui-development

github.com/antdigital-ai开发23740 次安装2 周前更新
代码仓库

关于 agentic-ui-development

这是一个介绍 @ant-design/agentic-ui 开发流程、规范与组件清单的开发 Skill,面向该项目的贡献者。它汇总组件结构、测试和文档要求,并指引开发者查阅仓库规范及组件级 Skill。

主要功能

  1. 01项目编码与仓库规范入口
  2. 02组件目录与导出约定
  3. 03构建、测试及检查命令
  4. 04组件清单与新增流程

适用场景

  1. 01查找组件实现应遵循的规范
  2. 02为新组件补充导出、测试和文档
  3. 03运行项目构建、测试与代码检查

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/antdigital-ai/agentic-ui --skill agentic-ui-development

安装后在 Claude Code 中输入/agentic-ui-development确认已加载。

详细介绍

来自项目 README

Agentic UI 项目开发

@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(同全量 exclude + --coverage)
E2Epnpm 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/(如 checkDemoFiles.js、bumpVersion.js、generateDemoReport.js)。

组件清单(与 src/index.ts 对应)

  • 布局:AgenticLayout、Workspace、ChatLayout、ChatBootPage
  • 聊天气泡:Bubble(AIBubble、UserBubble、List)
  • 思维链/工具:ThoughtChainList、ToolUseBar、ToolUseBarThink
  • 任务/运行:AgentRunBar、TaskList
  • 历史:History
  • 编辑器/输入:MarkdownEditor、MarkdownInputField
  • Schema:SchemaForm、SchemaEditor、SchemaRenderer、validator
  • 插件:Plugins(chart、code、formatter、mermaid)
  • 基础 UI:AILabel、AnswerAlert、BackTo、Quote、WelcomeMessage
  • 通用子组件:ActionIconBox、ActionItemBox、Button、GradientText、LayoutHeader、Loading、Robot、SuggestionList、TextAnimate、TypingAnimation、VisualList、lotties

新组件/新功能时

  1. 遵循 AGENTS.md 的命名、Props/事件、Ref、样式(createStyles + token)、文件组织。
  2. 在 src/index.ts 增加导出;如有新组件 Skill,在 .cursor/skills/README.md 中补充一览。
  3. 补全类型、测试(覆盖率 ≥80%)与文档/Changelog(中英文)。

开发或排查时优先查 AGENTS.md 与对应 component-xxx Skill,再改源码与入口。

评论

支持 Markdown