mcpField
A
agentic-ui-development

agentic-ui-development

github.com/antdigital-ai開発23740 回インストール2 週間前に更新
リポジトリ

agentic-ui-development について

@ant-design/agentic-ui の開発フロー、規約、コンポーネント一覧をまとめた、コントリビューター向けの開発スキルです。リポジトリ構成やテスト、ドキュメントの指針を示し、全体規約とコンポーネント別スキルを参照できます。

主な機能

  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 対応