What is component-bubble?

A set of instructions for building chat message bubbles in the Agentic UI library, including messages from an AI assistant, messages from a user, and lists of messages.

Use it when adding or changing AI chat messages, user messages, message lists, collapsible reasoning, tool-call displays, copying, or voice actions.

It identifies the components and conventions for displaying streaming replies, loading or error states, tool activity, and message actions.

How antdigital-ai/agentic-ui configures Cursor

Reuse

Borrowing it

Nothing to install: this file belongs to antdigital-ai/agentic-ui. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/antdigital-ai/agentic-ui/main/.cursor/skills/component-bubble/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/antdigital-ai/agentic-ui

Made for: Cursor.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/antdigital-ai/agentic-ui/component-bubble/github.svg)](https://agentmods.dev/skills/antdigital-ai/agentic-ui/component-bubble)

Your own site

<a href="https://agentmods.dev/skills/antdigital-ai/agentic-ui/component-bubble"><img src="https://agentmods.dev/badge/skills/antdigital-ai/agentic-ui/component-bubble/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/antdigital-ai/agentic-ui/component-bubble"><img src="https://agentmods.dev/badge/skills/antdigital-ai/agentic-ui/component-bubble.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 440 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00074	$0.00440
Opus 5.5	$0.00030	$0.00176
Sonnet 5.5	$0.00015	$0.00088
Haiku 4.5	$0.00007	$0.00044

Measured 2mo ago against content hash 3f9306ad1ba0, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

component-bubble scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.cursor/skills/component-bubble/SKILL.md · 41 lines

What it actually says

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 兼容。

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 41 lines · 74 tokens per session scan A 3f9306ad1ba0

Subscribe to this mod's changes

component-bubble is a skill published in the GitHub repository antdigital-ai/agentic-ui (237 stars, last pushed 24d ago), licensed MIT. It adds 74 tokens to every session and 440 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Frontend

component-bubble next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
component-bubbleantdigital-ai/agentic-ui	Skill	237	24d ago	MIT	A	74	Cursor
imagegenopenai/codex	Skill	133k	today	Apache-2.0	A	113	Codex
playwright-climicrosoft/playwright	Skill	99k	yesterday	Apache-2.0	A	19	Claude Code
local-ai-agentsmicrosoft/ai-agents-for-beginners	Skill	79k	4d ago	MIT	A	200	Claude Code, Codex
systematic-debuggingobra/superpowers	Skill	313k	3d ago	MIT	A	21	Claude Code
next-cache-components-adoptionvercel/next.js	Skill	143k	today	MIT	A	95	Claude Code
next-partial-prefetching-adoptionvercel/next.js	Skill	143k	today	MIT	A	103	Claude Code

agentic-ui: Skill for Cursor