Agent skill

Agentic UI Usage

by antdigital-ai in antdigital-ai/agentic-ui

Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n).

Install Agentic UI Usage

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .claude/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .claude/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .agents/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .agents/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .cursor/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .cursor/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/antdigital-ai/agentic-ui.git --path .cursor/skills/agentic-ui-usage

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .gemini/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .gemini/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .github/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .github/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install antdigital-ai/agentic-ui agentic-ui-usage --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/antdigital-ai/agentic-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/agentic-ui-usage .opencode/skills/agentic-ui-usage && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "agentic-ui-usage" agent skill from https://github.com/antdigital-ai/agentic-ui/tree/main/.cursor/skills/agentic-ui-usage into .opencode/skills/agentic-ui-usage/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "agentic-ui-usage", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: agentic-ui-usage
GitHub stars: 224
Token cost: ~691 tokens
SKILL.md length: 122 words
Files: 1
Skills in repo: 22
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n).

Works in 5 steps: 智能体聊天整体布局 → 仅聊天区域（无三栏） → 消息列表与气泡 → …
Integrating the library
SKILL.md covers 安装与依赖, 引入方式, 典型使用场景 and API 与文档查阅, plus 1 more section
Calls pnpm

What it does

Agentic UI Usage is an agent skill from antdigital-ai/agentic-ui. Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n). Use when integrating the library, building chat/agent UI, or asking about component API from consumer perspective. Triggers on 使用 agentic-ui, 集成, 引入, 安装, chat UI, 智能体界面, 接入, import from agentic-ui, ConfigProvider, locale.

Its SKILL.md is about 690 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Internationalization. It works with Ant Design. The licence is MIT.

When your agent uses it

Integrating the library
Building chat/agent UI
Asking about component API from consumer perspective
Import from agentic-ui

Example prompts

“Use the agentic-ui-usage skill to guide how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n)”
“/agentic-ui-usage”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

智能体聊天整体布局
仅聊天区域（无三栏）
消息列表与气泡
编辑器与输入
国际化

What it can do on your machine

Read from SKILL.md and the folder at commit d0aed66. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Agentic UI Usage loads about 691 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 122 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~86
When it runs · the whole SKILL.md, loaded when a task matches: ~691

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from antdigital-ai/agentic-ui at commit d0aed66, republished under its MIT licence (© antdigital-ai). 122 words, ~691 tokens.

Download SKILL.mdSave it as .claude/skills/agentic-ui-usage/SKILL.md (or your agent's skills folder).

name: agentic-ui-usage
description: Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n). Use when integrating the library, building chat/agent UI, or asking about component API from consumer perspective. Triggers on 使用 agentic-ui, 集成, 引入, 安装, chat UI, 智能体界面, 接入, import from agentic-ui, ConfigProvider, locale.

Agentic UI 组件库使用指南

面向在业务项目中使用 @ant-design/agentic-ui 的开发者：安装、引入、常见场景与 API 查阅方式。

安装与依赖

bash

pnpm add @ant-design/agentic-ui
# 或 npm / yarn

Peer：react、react-dom >= 16.9.0（项目需已安装）。
运行时依赖：包内已含 antd、@ant-design/cssinjs 等，无需单独安装。
使用前确保项目已正确引入 Ant Design 样式或 CSS-in-JS 方案（与 antd 5 一致）。

引入方式

tsx

// 按需引入常用组件
import {
  AgenticLayout,
  ChatLayout,
  History,
  Workspace,
  Bubble,
  AIBubble,
  UserBubble,
  MarkdownInputField,
  MarkdownEditor,
  ThoughtChainList,
  ToolUseBar,
  TaskList,
  AgentRunBar,
  WelcomeMessage,
  ChatBootPage,
} from '@ant-design/agentic-ui';

// 类型
import type { HistoryItemProps, BubbleListProps } from '@ant-design/agentic-ui';

组件与类型均从 @ant-design/agentic-ui 单入口导出，无需从子路径导入。
若打包器支持 Tree Shaking，未用到的组件会被剔除。

典型使用场景

1. 智能体聊天整体布局

左栏历史 + 中间聊天 + 右侧工作区：

tsx

<AgenticLayout
  left={<History dataSource={sessions} onSelect={...} />}
  center={
    <ChatLayout
      header={...}
      content={<Bubble.List messages={messages} />}
      footer={<MarkdownInputField onSubmit={...} />}
    />
  }
  right={<Workspace tabs={[...]} />}
  header={{ leftCollapsed, rightCollapsed, onLeftCollapse, onRightCollapse }}
/>

2. 仅聊天区域（无三栏）

tsx

<ChatLayout
  content={<Bubble.List messages={messages} />}
  footer={<MarkdownInputField onSubmit={...} />}
/>

3. 消息列表与气泡

使用 Bubble.List + AIBubble / UserBubble 或直接传入 messages 与渲染约定。
流式、思维链、工具调用等由气泡与 ThoughtChainList、ToolUseBar 等配合展示。

4. 编辑器与输入

只读/展示：MarkdownEditor 只读模式或直接渲染 Markdown。
可编辑：MarkdownEditor 受控 + value / onChange。
输入框：MarkdownInputField 支持附件、语音、发送等，通过 onSubmit 等回调与后端对接。

5. 国际化

通过 Ant Design 的 ConfigProvider 传入 locale，与 antd 一致。
组件库内置中英文等 locale，可合并或覆盖：import { locale } from '@ant-design/agentic-ui'（具体以文档为准），再传给 ConfigProvider。

API 与文档查阅

组件 API：仓库内 docs/components/ 下各组件文档（如 agentic-layout.md、bubble.md），含 Props、受控/非受控说明。
Demo：docs/demos-pages/ 与站点 Demo 页（如 layout、chat、editor、markdown-input-field、workspace、history 等）对应实际用法。
类型：从 @ant-design/agentic-ui 导出，用 TypeScript 时可查看 .d.ts 或 IDE 提示。

使用注意

布局类（如 AgenticLayout、ChatLayout）需保证外层有合适宽高（如 100vh/100%）。
列表类（History、Bubble.List）注意数据源格式与文档中的类型定义一致。
主题与 token 随 Ant Design ConfigProvider 与主题配置生效，与 antd 5 一致。

在业务项目中接入、写页面或查 API 时，可优先参考本文与官方文档 Demo，再按需查阅各组件文档。

Files

Just SKILL.md in .cursor/skills/agentic-ui-usage of antdigital-ai/agentic-ui.

Open the folder on GitHubat commit d0aed66

Compare with similar skills

Agentic UI Usage next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Agentic UI Usage compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Agentic UI Usage this skillantdigital-ai/agentic-ui	224	—	~691	Automated safety check: Pass	MIT	yesterday
Building With Lobe UIlobehub/lobe-ui	2.2k	—	~2k	Automated safety check: Pass	MIT	today
Admin Template Project Initializersouthliu/south-admin-react	580	—	~519	Automated safety check: Pass	MIT	18 days ago
I18nerupts/erupt-web	116	—	~706	Automated safety check: Pass	Apache-2.0	yesterday
Nekocap Forms I18nnopol10/nekocap	105	—	~1.1k	Automated safety check: Pass	GPL-3.0	5 days ago
Impeccablebestofjs/bestofjs	3.1k	27 repos	~2.6k	Automated safety check: Pass	MIT	3 days ago

Similar skills

Building With Lobe UI
lobehub/lobe-ui
Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…
2.2k GitHub stars~2k tokensUpdated today
Frontend & DesignAuto-check passed
Admin Template Project Initializer
southliu/south-admin-react
Removes the south-admin-react template's demo pages, components and menu entries, after a dry-run preview and your confirmation, and cleans up the matching imports.
580 GitHub stars~519 tokensUpdated 18 days ago
Frontend & DesignAuto-check passed
I18n
erupts/erupt-web
i18n — add multilingual translations. An agent skill from erupts/erupt-web.
116 GitHub stars~706 tokensUpdated yesterday
Frontend & DesignAuto-check passed
Nekocap Forms I18n
nopol10/nekocap
A skill your agent uses when building or modifying a form, binding inputs, adding validation, or adding/changing any user-facing string in the nekocap frontend.
105 GitHub stars~1.1k tokensUpdated 5 days ago
Frontend & DesignAuto-check passed
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
3.1k GitHub starsUsed in 27 repos~2.6k tokens
Frontend & DesignAuto-check passed
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
83k GitHub stars~1.6k tokensUpdated today
Frontend & DesignAuto-check passed

More from antdigital-ai/agentic-ui

All 22 skills in this repo

Markdown Syntax Guide
antdigital-ai/agentic-ui
指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景优先使用内置 chart（HTML 注释 chartType + 表格），只有当内置 chartType 都不能表达诉求时才回退 Mermaid。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法…
224 GitHub stars~3.1k tokensUpdated yesterday
Auto-check passed
Component Bubble
antdigital-ai/agentic-ui
Develop and extend Bubble components (AIBubble, UserBubble, Bubble list) for AI chat messages in @ant-design/agentic-ui.
224 GitHub stars~283 tokensUpdated yesterday
Auto-check passed
Component Schema
antdigital-ai/agentic-ui
Develop SchemaForm, SchemaEditor, SchemaRenderer and validator in @ant-design/agentic-ui for low-code and JSON Schema.
224 GitHub stars~247 tokensUpdated yesterday
Auto-check passed
Agentic UI Development
antdigital-ai/agentic-ui
Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui.
224 GitHub stars~555 tokensUpdated yesterday
Auto-check passed
Component Agentic Layout
antdigital-ai/agentic-ui
Develop AgenticLayout (left-center-right layout with header) in @ant-design/agentic-ui.
224 GitHub stars~1.2k tokensUpdated yesterday
Auto-check passed
Gh Create PR
antdigital-ai/agentic-ui
使用 GitHub CLI (gh) 推送当前分支并创建或更新 PR。在用户说「提 PR」「新建 PR」「用 gh 建 PR」「submit PR」「create pull request」时使用。
224 GitHub stars~416 tokensUpdated yesterday
Auto-check passed

Works with

Ant Design

Questions about Agentic UI Usage

What does Agentic UI Usage do?

Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n). Agentic UI Usage is an agent skill from antdigital-ai/agentic-ui. Guides how to use @ant-design/agentic-ui in applications (install, import, layout, chat, editor, i18n).

When should I use Agentic UI Usage?

Agentic UI Usage fits situations like: integrating the library; building chat/agent UI; asking about component API from consumer perspective; import from agentic-ui.

How do I install Agentic UI Usage in Claude Code?

Run `npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a claude-code`. Or copy the skill folder (.cursor/skills/agentic-ui-usage in antdigital-ai/agentic-ui) into .claude/skills/agentic-ui-usage in your project. Claude Code loads it when a task matches its description.

How do I install Agentic UI Usage in Codex?

Run `npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a codex`. Or copy the skill folder (.cursor/skills/agentic-ui-usage in antdigital-ai/agentic-ui) into .agents/skills/agentic-ui-usage in your project. Codex loads it when a task matches its description.

Can I use Agentic UI Usage in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add antdigital-ai/agentic-ui --skill agentic-ui-usage -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/agentic-ui-usage, .gemini/skills/agentic-ui-usage, .github/skills/agentic-ui-usage and .opencode/skills/agentic-ui-usage in your project.

What does Agentic UI Usage need to run?

Going by SKILL.md and its folder, Agentic UI Usage needs the command-line tools its instructions call (pnpm).

Does Agentic UI Usage access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Agentic UI Usage safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Agentic UI Usage use?

Agentic UI Usage is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Agentic UI Usage use?

About 691 tokens (SKILL.md is roughly 2.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Agentic UI Usage?

Skills that share tags, products or a category with Agentic UI Usage: Building With Lobe UI (lobehub/lobe-ui, 2.2k stars), Admin Template Project Initializer (southliu/south-admin-react, 580 stars), I18n (erupts/erupt-web, 116 stars) and Nekocap Forms I18n (nopol10/nekocap, 105 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Agentic UI Usage?

antdigital-ai (a GitHub organization) maintains it in antdigital-ai/agentic-ui, which has 224 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 6, 2026.

Source: antdigital-ai/agentic-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Agentic UI Usage

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Agentic UI 组件库使用指南

安装与依赖

引入方式

典型使用场景

1. 智能体聊天整体布局

2. 仅聊天区域（无三栏）

3. 消息列表与气泡

4. 编辑器与输入

5. 国际化

API 与文档查阅

使用注意

Files

Compare with similar skills

Similar skills

More from antdigital-ai/agentic-ui

Related

Questions about Agentic UI Usage