원클릭으로 Manus에서 모든 스킬 실행

component-bubble

스타216

포크35

업데이트2026년 3월 13일 03:31

Develop and extend Bubble components (AIBubble, UserBubble, Bubble list) for AI chat messages in @ant-design/agentic-ui. Use when building chat bubbles, message content, streaming display, thought chain in bubble, or voice/copy actions. Triggers on bubble, chat message, AIBubble, UserBubble, message list.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

antdigital-ai

antdigital-ai/agentic-ui

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

소프트웨어 개발자컴퓨터 및 수학직·SOC 15-1252

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

component-task-list

antdigital-ai/agentic-ui

Develop TaskList for step or task status display in @ant-design/agentic-ui. Use when showing task items, expand/collapse, status icons, or thought chain in tasks. Triggers on TaskList, task list, task item, step list, TaskItem, TaskStatus.

2026-05-28216

component-agentic-layout

antdigital-ai/agentic-ui

Develop AgenticLayout (left-center-right layout with header) in @ant-design/agentic-ui. Use when building app shell, sidebar layout, or three-column layout. Triggers on AgenticLayout, layout, left center right, header, sidebar.

2026-05-12216

markdown-syntax-guide

antdigital-ai/agentic-ui

指导用户使用 @ant-design/agentic-ui 的 Markdown Editor / Renderer 扩展语法。图表场景**优先使用内置 chart**（HTML 注释 `chartType` + 表格），**只有当内置 chartType 都不能表达诉求时才回退 Mermaid**。Triggers on keywords like 表格, 视频, 图表, 卡片, 提示块, 流程图, 语法, 怎么写, how to write table chart video card mermaid.

2026-05-11216

agentic-ui-development

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.

2026-04-24216

agentic-ui-usage

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.

2026-03-13216

component-agent-run-bar

antdigital-ai/agentic-ui

Develop AgentRunBar for agent run control (play, pause, stop) in @ant-design/agentic-ui. Use when building run/pause/stop UI, task status bar, or agent control. Triggers on AgentRunBar, run bar, play pause stop, agent control, TASK_STATUS.

2026-03-13216

name	component-bubble
description	Develop and extend Bubble components (AIBubble, UserBubble, Bubble list) for AI chat messages in @ant-design/agentic-ui. Use when building chat bubbles, message content, streaming display, thought chain in bubble, or voice/copy actions. Triggers on bubble, chat message, AIBubble, UserBubble, message list.

Bubble 组件开发

聊天气泡相关组件的开发与扩展，包括 AI 消息气泡、用户消息气泡和气泡列表。

源码位置

主入口与导出：src/Bubble/index.tsx
AI 气泡：src/Bubble/AIBubble
用户气泡：src/Bubble/UserBubble
通用容器：src/Bubble/Bubble.tsx
列表：src/Bubble/List
类型：src/Bubble/type.ts、src/Bubble/types/

主要导出

AIBubble, UserBubble, Bubble, runRender
PureAIBubble, PureUserBubble, PureBubble, PureBubbleList
BubbleConfigProvide 及相关 context

开发规范

样式使用 @ant-design/cssinjs 的 createStyles，颜色/间距使用 token。
事件回调使用 on 前缀（如 onClick、onCopy）。
支持 classNames、styles 做 Semantic 样式扩展。
参考项目根目录 AGENTS.md 的命名与 API 规范。

常用能力

AIBubble：流式内容、思维链折叠、状态（success/error/loading）、工具调用展示。
UserBubble：用户头像、多模态内容、操作按钮。
List：气泡列表、自动滚动、空状态。

开发或修改气泡相关功能时，优先查阅上述源码与 AGENTS.md，并保持与现有 API 兼容。