How do I install the Component Shared skill?

Run npx skillmds@latest add antdigital-ai/component-shared in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Component Shared safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Component Shared?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Component Shared free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Component Shared?

antdigital-ai (@antdigital-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Component Shared by antdigital-ai — Agent Skill

Name: Component Shared
Author: antdigital-ai

Component Shared

Develop shared UI components (ActionIconBox, ActionItemBox, Button, GradientText, LayoutHeader, Loading, Robot, SuggestionList, TextAnimate, TypingAnimation, VisualList, lotties) in @ant-design/agentic-ui. Use when building buttons, headers, loading, robot avatar, suggestions, or animations. Triggers on ActionIconBox, Button, LayoutHeader, Loading, Robot, SuggestionList, TextAnimate, TypingAnimation, lotties.

File contents

通用子组件开发

项目内共享的 UI 组件：按钮、头部、加载、机器人头像、建议列表、动画等。

源码位置

入口：src/index.ts 中「基础 UI 组件」「通用子组件」导出
目录：src/Components/（ActionIconBox、ActionItemBox、Button、GradientText、LayoutHeader、Loading、Robot、SuggestionList、TextAnimate、TypingAnimation、VisualList）
动效：src/Components/lotties/、src/Components/effects/
按钮变体：IconButton、ToggleButton、SwitchButton 见 Components/Button/

主要能力

Button：图标/切换/开关等变体
LayoutHeader：布局头部，供 AgenticLayout、ChatLayout 使用
Loading / Robot：加载态与机器人头像
SuggestionList：建议列表，常与输入框配合
TextAnimate / TypingAnimation：文字与打字机动画
ActionIconBox / ActionItemBox：操作图标与操作项容器

开发规范

使用 token 与 createStyles；事件使用 on 前缀。
与各业务组件（Bubble、ChatLayout 等）组合时保持 API 与风格一致。

修改通用组件时，参考 src/Components/ 与 AGENTS.md。

Frequently asked questions