agentic-ui-development
Installation
SKILL.md
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:coverage |
| 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/(如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
新组件/新功能时
- 遵循 AGENTS.md 的命名、Props/事件、Ref、样式(createStyles + token)、文件组织。
- 在
src/index.ts增加导出;如有新组件 Skill,在.cursor/skills/README.md中补充一览。 - 补全类型、测试(覆盖率 ≥80%)与文档/Changelog(中英文)。
开发或排查时优先查 AGENTS.md 与对应 component-xxx Skill,再改源码与入口。
Related skills
More from antdigital-ai/agentic-ui
gh-create-pr
使用 GitHub CLI (gh) 推送当前分支并创建或更新 PR。在用户说「提 PR」「新建 PR」「用 gh 建 PR」「submit PR」「create pull request」时使用。
1component-plugins
Develop chart, code, mermaid, katex, formatter plugins for MarkdownEditor in @ant-design/agentic-ui. Use when adding or customizing chart/code/mermaid/formula rendering or code format. Triggers on plugin, chart, mermaid, code highlight, katex, formatter, LineChart, BarChart, Mermaid, CodeBlock.
1markdown-syntax-guide
指导用户使用 Markdown Editor / Markdown 渲染器的扩展语法。在用户询问如何写表格、视频、图表、卡片、提示块、Mermaid、apaasify 等语法时使用。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 语法, 怎么写, how to write table chart video card.
1