mcpField
A
agentic-ui-development

agentic-ui-development

github.com/antdigital-aiDevelopment23740 installsUpdated 2w ago
Repository

About agentic-ui-development

A development skill for contributors to @ant-design/agentic-ui, covering its workflow, conventions, and component inventory. It brings together repository structure, testing, and documentation guidance, and points to the relevant project and component-level rules.

Key features

  1. 01Repository and coding convention references
  2. 02Component structure and export conventions
  3. 03Build, test, and validation commands
  4. 04Component inventory and addition workflow

Use cases

  1. 01Check conventions before implementing a component
  2. 02Add exports, tests, and documentation for a component
  3. 03Run project builds, tests, and code checks

Install

Copy the command and run it in a terminal.

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

After installing, type/agentic-ui-developmentin Claude Code to confirm it loaded.

Details

From the project 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，再改源码与入口。

Comments

Markdown supported