Agent skill

Agentic UI Development

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

Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui.

MITAuto-check passedFrontend & Design

Install Agentic UI Development

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

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

GitHub CLI
$ gh skill install antdigital-ai/agentic-ui agentic-ui-development --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-development .claude/skills/agentic-ui-development && 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/

Facts

Skill name
agentic-ui-development
GitHub stars
224
Token cost
~555 tokens
SKILL.md length
107 words
Files
1
Skills in repo
22
Repo updated
First seen
Licence
MIT

At a glance

Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui.

  • Works in 3 steps: 遵循 AGENTS.md… → 在 src/index.ts 增加导出;如有新组件 Skill,在… → 补全类型、测试(覆盖率 ≥80%)与文档/Changelog(中英文)。
  • Adding new components
  • SKILL.md covers 规范入口, 常用命令, 项目与组件结构 and 组件清单(与 src/index.ts 对应), plus 1 more section
  • Calls pnpm

What it does

Agentic UI Development is an agent skill from antdigital-ai/agentic-ui. Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui. Use when onboarding, adding new components, running build/test/docs, or asking about project structure, conventions, or component list. Triggers on agentic-ui, development workflow, 开发流程, 组件清单, 设计系统, 新组件, build, test, docs, AGENTS.md.

Its SKILL.md is about 560 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 Agent instruction files and Design systems. It works with Ant Design and pnpm. The licence is MIT.

When your agent uses it

  • Adding new components
  • Running build/test/docs
  • Asking about project structure
  • Development workflow

Example prompts

  • “Use the agentic-ui-development skill to guide development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui”
  • “/agentic-ui-development”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 遵循 AGENTS.md 的命名、Props/事件、Ref、样式(createStyles + token)、文件组织。
  2. 在 src/index.ts 增加导出;如有新组件 Skill,在 .cursor/skills/README.md 中补充一览。
  3. 补全类型、测试(覆盖率 ≥80%)与文档/Changelog(中英文)。

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 Development loads about 555 tokens when it runs. Until then it costs about 91 tokens; SKILL.md has 107 words of instructions outside code blocks.

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

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). 107 words, ~555 tokens.

Download SKILL.mdSave it as .claude/skills/agentic-ui-development/SKILL.md (or your agent's skills folder).
name
agentic-ui-development
description
Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui. Use when onboarding, adding new components, running build/test/docs, or asking about project structure, conventions, or component list. Triggers on agentic-ui, development workflow, 开发流程, 组件清单, 设计系统, 新组件, build, test, docs, AGENTS.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: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,再改源码与入口。

© antdigital-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

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

Open the folder on GitHubat commit d0aed66

Compare with similar skills

Agentic UI Development 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 Development compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Agentic UI Development this skillantdigital-ai/agentic-ui224—~555Automated safety check: PassMIT
Repo Healthcheck Nodecommercetools/ui-kit154—~1.6kAutomated safety check: NotesMIT
Using Docs Kitlobehub/lobe-ui2.2k—~2.8kAutomated safety check: PassMIT
Weft FrontendWeaveMindAI/weft2k—~8kAutomated safety check: NotesCustom licence
Building With Lobe UIlobehub/lobe-ui2.2k—~2kAutomated safety check: PassMIT
Local Testinglobehub/lobe-ui2.2k—~2.1kAutomated safety check: PassMIT

Similar skills

  • Repo Healthcheck Node

    commercetools/ui-kit

    Verify a Node.js/TypeScript repo's development environment is correctly set up.

    154 GitHub stars~1.6k tokensUpdated 4 days ago
    Frontend & DesignAuto-check: notes
  • Using Docs Kit

    lobehub/lobe-ui

    Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).

    2.2k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Weft Frontend

    WeaveMindAI/weft

    Read when the user wants a page, app or site for the program, and before dispatching the frontend-builder: the verified scaffold commands, the default stack (pnpm, SvelteKit, PostgreSQL, BetterAuth…

    2k GitHub stars~8k tokensUpdated yesterday
    Frontend & DesignAuto-check: notes
  • 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
  • Local Testing

    lobehub/lobe-ui

    Local browser verification for the lobe-ui component library and documentation site.

    2.2k GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Kampsy UI

    kampsy/ui

    Consumer guide to build UIs with kampsy-ui (Svelte 5 + Tailwind v4, Geist-inspired).

    288 GitHub stars~3.6k tokensUpdated 9 days ago
    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
  • Agentic UI Usage

    antdigital-ai/agentic-ui

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

    224 GitHub stars~691 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
  • 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

Questions about Agentic UI Development

What does Agentic UI Development do?

Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui. Agentic UI Development is an agent skill from antdigital-ai/agentic-ui. Guides development workflow, design system, scripts, and component inventory for @ant-design/agentic-ui.

When should I use Agentic UI Development?

Agentic UI Development fits situations like: adding new components; running build/test/docs; asking about project structure; development workflow.

How do I install Agentic UI Development in Claude Code?

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

How do I install Agentic UI Development in Codex?

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

Can I use Agentic UI Development 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-development -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-development, .gemini/skills/agentic-ui-development, .github/skills/agentic-ui-development and .opencode/skills/agentic-ui-development in your project.

What does Agentic UI Development need to run?

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

Does Agentic UI Development 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 Development 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 Development use?

Agentic UI Development 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 Development use?

About 555 tokens (SKILL.md is roughly 2.2k 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 Development?

Skills that share tags, products or a category with Agentic UI Development: Repo Healthcheck Node (commercetools/ui-kit, 154 stars), Using Docs Kit (lobehub/lobe-ui, 2.2k stars), Weft Frontend (WeaveMindAI/weft, 2k stars) and Building With Lobe UI (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Agentic UI Development?

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.