New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

X Components

by kqcoxn in kqcoxn/MaaPipelineEditor

使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和…

MITAuto-check passedDevelopment

Install X Components

skills CLI
$ npx skills add kqcoxn/MaaPipelineEditor --skill x-components -a claude-code

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

GitHub CLI
$ gh skill install kqcoxn/MaaPipelineEditor x-components --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/kqcoxn/MaaPipelineEditor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ant-design-x/skills/x-components .claude/skills/x-components && 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
x-components
GitHub stars
408
Token cost
~1.6k tokens
SKILL.md length
262 words
Files
4
Skills in repo
11
Repo updated
First seen
Licence
MIT

At a glance

使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和…

  • Works in 4 steps: 从 COMPONENTS.md 为每个交互阶段选择对应组件。 → 使用 PATTERNS.md 了解组件如何组合成完整页面。 → 在应用根节点用 XProvider 包裹（替代 antd 的… → …
  • Tasks that involve Diagrams
  • SKILL.md covers 目录, 最小完整示例 and 官方文档
  • Calls npm

What it does

X Components is an agent skill from kqcoxn/MaaPipelineEditor. 使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和 Notification。

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `reference/API.md`, `reference/COMPONENTS.md` and `reference/PATTERNS.md`).

It sits in Development, covering Diagrams. It works with Ant Design, Mermaid and xAI Grok. The repository describes itself as: ✨ 可视化构建 MaaFramework Pipeline 的下一代工作流 审阅&编辑&调试 工具，你的工程师牛牛！ ✨. The licence is MIT.

When your agent uses it

  • Tasks that involve Diagrams

Example prompts

  • “/x-components”

Requirements

  • Node.js

Workflow steps

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

  1. 从 COMPONENTS.md 为每个交互阶段选择对应组件。
  2. 使用 PATTERNS.md 了解组件如何组合成完整页面。
  3. 在应用根节点用 XProvider 包裹（替代 antd 的 ConfigProvider），配置国际化、主题和快捷键。
  4. 使用 API.md 确认精确的属性名 —— 不要靠猜测。

What it can do on your machine

Read from SKILL.md and the folder at commit e03dd0a. 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:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    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

X Components loads about 1.6k tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 262 words of instructions outside code blocks.

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

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 kqcoxn/MaaPipelineEditor at commit e03dd0a, republished under its MIT licence (© kqcoxn). 262 words, ~1,550 tokens.

Download SKILL.mdSave it as .claude/skills/x-components/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
x-components
description
使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和 Notification。
version
2.9.0

🎯 Skill 定位

本 Skill 覆盖 @ant-design/x 中所有 UI 组件 —— 这是一个基于 RICH 交互范式，用于构建 AI 驱动对话界面的 React 组件库。

涵盖组件选型、API 使用、组合模式及常见反模式。

前提说明：本 Skill 仅处理 UI 层。数据流和流式处理请参考 use-x-chat、x-chat-provider、x-request Skill。

目录

📦 包概述

包名职责
@ant-design/x本 Skill 覆盖的所有 UI 组件
@ant-design/x-sdk数据 Provider、请求、流式状态 —— 不在本 Skill 范围内
@ant-design/x-markdownBubble 内 Markdown 渲染 —— 参见 x-markdown Skill
bash
npm install @ant-design/x

@ant-design/x 扩展了 antd。如果你已经在用 ConfigProvider，请将其替换为 XProvider。

🗂️ 组件分组

基于 RICH 交互范式：

阶段组件
通用Bubble、Bubble.List、Conversations、Notification
唤醒Welcome、Prompts
表达Sender、Attachments、Suggestion
确认Think、ThoughtChain
反馈Actions、FileCard、Sources、CodeHighlighter、Mermaid、Folder
全局XProvider

🚀 快速选型指南

需求优先阅读
渲染对话气泡COMPONENTS.md → Bubble
构建聊天输入框COMPONENTS.md → Sender
会话列表与切换COMPONENTS.md → Conversations
展示 AI 思考过程COMPONENTS.md → ThoughtChain / Think
在消息下方添加操作按钮COMPONENTS.md → Actions
构建欢迎/引导页面COMPONENTS.md → Welcome + Prompts
输入框中展示文件附件COMPONENTS.md → Attachments
展示来源引用COMPONENTS.md → Sources
添加快捷命令建议COMPONENTS.md → Suggestion
展示层级文件/文件夹树COMPONENTS.md → Folder
组合完整聊天页面PATTERNS.md
查询具体属性API.md

🛠 推荐工作流

  1. 从 COMPONENTS.md 为每个交互阶段选择对应组件。
  2. 使用 PATTERNS.md 了解组件如何组合成完整页面。
  3. 在应用根节点用 XProvider 包裹（替代 antd 的 ConfigProvider），配置国际化、主题和快捷键。
  4. 使用 API.md 确认精确的属性名 —— 不要靠猜测。

最小完整示例

tsx
import { XProvider, Welcome, Prompts, Bubble, Sender } from '@ant-design/x';

export default () => (
  <XProvider>
    <Welcome title="你好！" description="有什么可以帮助你的？" />
    <Prompts
      items={[{ key: '1', label: '你能做什么？' }]}
      onItemClick={(info) => console.log(info.data.label)}
    />
    <Bubble.List items={[{ key: '1', content: 'Hello World', placement: 'end' }]} />
    <Sender onSubmit={(msg) => console.log(msg)} />
  </XProvider>
);

🚨 开发规则

  • 始终在应用根节点使用 XProvider —— 它替代了 antd 的 ConfigProvider，并启用国际化、方向以及 x 专属快捷键。
  • 在循环中用 Bubble.List 而非 Bubble —— Bubble.List 处理滚动锚定、自动滚动和基于角色的布局；手动 map Bubble 会丢失这些能力。
  • 保持 Bubble 和 Bubble.List 的 components 属性稳定 —— 内联对象创建会导致重渲染并重置打字动画。
  • 流式期间设置 streaming={true}，最终 chunk 时设置 streaming={false} —— 永久保持 true 会破坏完成状态。
  • ThoughtChain vs Think：多步工具/Agent 调用链用 ThoughtChain；单块可折叠的推理展示用 Think。
  • Actions.Copy、Actions.Feedback、Actions.Audio 是预设子组件 —— 优先使用它们，不要自己重新实现。
  • Sender 的 onSubmit vs onChange：onSubmit 在发送按钮或 Enter 键时触发；onChange 在每次按键时触发 —— 不要混淆。
  • 不要在 Bubble 的 content 字符串中直接渲染 Mermaid 或 CodeHighlighter —— 请使用 contentRender 或 components 映射。

🤝 Skill 协作

场景Skill 组合
完整 AI 聊天应用x-chat-provider → x-request → use-x-chat → x-components → x-markdown
只构建 UI 结构仅 x-components
Bubble 回复中展示 Markdownx-components + x-markdown
只处理流式数据流use-x-chat + x-request

🔗 参考资源

  • COMPONENTS.md —— 逐组件指南，包含使用方法、核心属性和示例
  • PATTERNS.md —— 完整页面组合模式和集成方案
  • API.md —— 从官方组件文档自动生成的属性参考，覆盖全部 17 个组件

官方文档

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

Files

SKILL.md and 3 other files in .agents/skills/ant-design-x/skills/x-components of kqcoxn/MaaPipelineEditor.

  • SKILL.md
  • reference/API.md
  • reference/COMPONENTS.md
  • reference/PATTERNS.md

Open the folder on GitHubat commit e03dd0a

Compare with similar skills

X Components 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.

X Components compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
X Components this skillkqcoxn/MaaPipelineEditor408—~1.6kAutomated safety check: PassMIT
Component Pluginsantdigital-ai/agentic-ui224—~236Automated safety check: PassMIT
Markdown Syntax Guideantdigital-ai/agentic-ui224—~3.1kAutomated safety check: PassMIT
Archify Diagramstt-a1i/archify79k—~2.9kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design45k1 repos~7.5kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT

Similar skills

  • Component Plugins

    antdigital-ai/agentic-ui

    Develop chart, code, mermaid, katex, formatter plugins for MarkdownEditor in @ant-design/agentic-ui.

    224 GitHub stars~236 tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • 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 2 days ago
    Documents & OfficeAuto-check passed

  • Archify Diagrams

    tt-a1i/archify

    Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.

    79k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    45k GitHub starsUsed in 1 repo~7.5k tokens
    DevelopmentAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated 6 days ago
    DevelopmentAuto-check: notes

  • Code Graph Mermaid Diagrams

    trailofbits/skills

    Official

    Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.

    7.4k GitHub starsUsed in 1 repo~1.7k tokens
    DevelopmentAuto-check passed

More from kqcoxn/MaaPipelineEditor

All 11 skills in this repo

  • Ant Design

    kqcoxn/MaaPipelineEditor

    Decision guide for antd 6.x, Ant Design Pro 5/ProComponents, Ant Design X v2, and the offline @ant-design/cli.

    408 GitHub starsUsed in 1 repo~1.1k tokens
    Auto-check passed

  • Maafw

    kqcoxn/MaaPipelineEditor

    MaaFramework 开发与集成指南。当任务涉及 MaaFramework 项目结构、Pipeline 协议、ProjectInterface V2 协议、自定义识别/动作（Custom/Agent）、Python/NodeJS/CSharp 等语言 Binding 集成、控制器配置、回调协议或运行时行为时使用。

    408 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Use X Chat

    kqcoxn/MaaPipelineEditor

    专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理、多会话管理等. An agent skill from kqcoxn/MaaPipelineEditor.

    408 GitHub stars~3k tokensUpdated today
    Auto-check passed

  • X Card

    kqcoxn/MaaPipelineEditor

    当需要用 @ant-design/x-card 让 AI Agent 动态渲染富交互 UI 时使用——涵盖 XCard.Box、XCard.Card、A2UI v0.9 命令、数据绑定、Catalog、Actions 和流式渲染模式。

    408 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • X Chat Provider

    kqcoxn/MaaPipelineEditor

    专注于自定义 Chat Provider 的实现，帮助将任意流式接口适配为 Ant Design X 标准格式. An agent skill from kqcoxn/MaaPipelineEditor.

    408 GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • X Markdown

    kqcoxn/MaaPipelineEditor

    当任务涉及 @ant-design/x-markdown 的 Markdown 渲染、流式输出、自定义组件映射、插件、主题或聊天富内容展示时使用。

    408 GitHub stars~862 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about X Components

What does X Components do?

使用 @ant-design/x 组件库构建 AI 对话 UI 时使用 —— 涵盖 Bubble、Sender、Conversations、Prompts、ThoughtChain、Actions、Welcome、Attachments、Sources、Suggestion、Think、FileCard、CodeHighlighter、Mermaid、Folder、XProvider 和…. X Components is an agent skill from kqcoxn/MaaPipelineEditor.

When should I use X Components?

X Components fits situations like: tasks that involve Diagrams.

How do I install X Components in Claude Code?

Run `npx skills add kqcoxn/MaaPipelineEditor --skill x-components -a claude-code`. Or copy the skill folder (.agents/skills/ant-design-x/skills/x-components in kqcoxn/MaaPipelineEditor) into .claude/skills/x-components in your project. Claude Code loads it when a task matches its description.

How do I install X Components in Codex?

Run `npx skills add kqcoxn/MaaPipelineEditor --skill x-components -a codex`. Or copy the skill folder (.agents/skills/ant-design-x/skills/x-components in kqcoxn/MaaPipelineEditor) into .agents/skills/x-components in your project. Codex loads it when a task matches its description.

Can I use X Components 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 kqcoxn/MaaPipelineEditor --skill x-components -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/x-components, .gemini/skills/x-components, .github/skills/x-components and .opencode/skills/x-components in your project.

What does X Components need to run?

Going by SKILL.md and its folder, X Components needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does X Components access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is X Components 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 X Components use?

X Components 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 X Components use?

About 1.6k tokens (SKILL.md is roughly 6.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 X Components?

Skills that share tags, products or a category with X Components: Component Plugins (antdigital-ai/agentic-ui, 224 stars), Markdown Syntax Guide (antdigital-ai/agentic-ui, 224 stars), Archify Diagrams (tt-a1i/archify, 79k stars) and Diagram Design (cathrynlavery/diagram-design, 45k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains X Components?

kqcoxn (a GitHub user) maintains it in kqcoxn/MaaPipelineEditor, which has 408 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 8, 2026.

Source: kqcoxn/MaaPipelineEditor on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.