SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsagentic-ui-development

agentic-ui-development

Frontend & websites

View repository

Updated 10-16 05:00

About this skill

Agentic UI Project Development

The overall development process, conventions, and component list for @ant-design/agentic-ui. For specific component implementations, see each component-xxx Skill。

Conventions Entry

  • Coding and Repository Conventions: Repository root AGENTS.md(naming, TypeScript, styles, testing, Git/PR, Changelog).
  • Component-level Conventions: Each .cursor/skills/component-xxx/SKILL.md is consistent with AGENTS.md.

Common Commands

Purpose Command
Documentation Site pnpm start（http://localhost:8000）
Build pnpm run build
Unit Tests Daily pnpm test(lean); full pnpm run test:full（--mode full); coverage pnpm run test:coverage / full pnpm run test:coverage:full(same as full exclude + --coverage）
E2E pnpm run test:e2e, debug pnpm run test:e2e:debug
Lint pnpm run lint、pnpm tsc
Format pnpm run prettier

Project and Component Structure

  • Source Code：src/, a single component directory contains ComponentName.tsx、style.ts、types.ts、index.tsx, subcomponents/hooks/utils as needed.
  • Export Entry：src/index.ts exports by functional area; new components must be declared here and in the corresponding component's index .
  • Documentation：docs/, Dumi configuration .dumirc.ts。
  • Testing：tests/（Vitest）、e2e/（Playwright）。
  • Script：scripts/(e.g. checkDemoFiles.js、bumpVersion.js、generateDemoReport.js）。

Component List (corresponding to src/index.ts)

  • Layout: AgenticLayout, Workspace, ChatLayout, ChatBootPage
  • Chat Bubbles: Bubble (AIBubble, UserBubble, List)
  • Thought Chain/Tools: ThoughtChainList, ToolUseBar, ToolUseBarThink
  • Task/Run: AgentRunBar, TaskList
  • History: History
  • Editor/Input: MarkdownEditor, MarkdownInputField
  • Schema：SchemaForm、SchemaEditor、SchemaRenderer、validator
  • Plugins: Plugins (chart, code, formatter, mermaid)
  • Basic UI: AILabel, AnswerAlert, BackTo, Quote, WelcomeMessage
  • Common Subcomponents: ActionIconBox, ActionItemBox, Button, GradientText, LayoutHeader, Loading, Robot, SuggestionList, TextAnimate, TypingAnimation, VisualList, lotties

For New Components/New Features

  1. Follow AGENTS.md for naming, Props/events, Ref, styles (createStyles + token), and file organization.
  2. Add exports in src/index.ts ; if there is a new component Skill, add an overview in .cursor/skills/README.md .
  3. Complete types, tests (coverage ≥80%), and documentation/Changelog (Chinese and English).

When developing or troubleshooting, check AGENTS.md and the corresponding component-xxx Skill first, then modify the source code and entry point.