x-components

Q: How do I install x-components?

Run npx skills add https://github.com/ant-design/x --skill x-components in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/x-components/ (personal) or .claude/skills/x-components/ (project).

by ant-designAI & Agents

Use when building AI chat UIs with @ant-design/x components — covers Bubble, Sender, Conversations, Prompts, ThoughtChain, Actions, Welcome, Attachments, Sources, Suggestion, Think, FileCard, CodeHighlighter, Mermaid, Folder, XProvider, and Notification.

Installs: 88
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/ant-design/x --skill x-components

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads x-components automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

🎯 Skill Positioning

This skill covers all UI components in @ant-design/x — the React component library for building AI-driven chat interfaces based on the RICH interaction paradigm.

It covers component selection, API usage, composition patterns, and common anti-patterns.

Prerequisite: This skill handles UI only. For data flow and streaming, see use-x-chat, x-chat-provider, x-request skills.

📦 Package Overview
🗂️ Component Groups
🚀 Quick Start Decision Guide
🛠 Recommended Workflow
🚨 Development Rules
🤝 Skill Collaboration
🔗 Reference Resources

📦 Package Overview

Package	Responsibility
`@ant-design/x`	All UI components in this skill
`@ant-design/x-sdk`	Data providers, request, streaming state — not covered here
`@ant-design/x-markdown`	Markdown rendering inside Bubble — see `x-markdown` skill

npm install @ant-design/x

@ant-design/x extends antd. If you use ConfigProvider, replace it with XProvider.

🗂️ Component Groups

Based on the RICH interaction paradigm:

Stage	Components
General	`Bubble`, `Bubble.List`, `Conversations`, `Notification`
Wake	`Welcome`, `Prompts`
Express	`Sender`, `Attachments`, `Suggestion`
Confirmation	`Think`, `ThoughtChain`
Feedback	`Actions`, `FileCard`, `Sources`, `CodeHighlighter`, `Mermaid`, `Folder`
Global	`XProvider`

🚀 Quick Start Decision Guide

If you need to...	Read first
Render a chat message bubble	COMPONENTS.md → Bubble
Build a chat input box	COMPONENTS.md → Sender
List and switch conversations	COMPONENTS.md → Conversations
Show AI thinking process	COMPONENTS.md → ThoughtChain / Think
Add action buttons below a message	COMPONENTS.md → Actions
Build a welcome / onboarding screen	COMPONENTS.md → Welcome + Prompts
Show file attachments in input	COMPONENTS.md → Attachments
Show source citations	COMPONENTS.md → Sources
Add quick command suggestions	COMPONENTS.md → Suggestion
Display a hierarchical file/folder tree	COMPONENTS.md → Folder
Wire a complete chat page	PATTERNS.md
Look up a specific prop	API.md

🛠 Recommended Workflow

Pick components from COMPONENTS.md for each interaction stage.
Use PATTERNS.md to understand how components compose into full pages.
Wrap the app root with XProvider (replaces antd's ConfigProvider) for locale, theme, and shortcut keys.
Use API.md for precise prop names — do not guess them.

Minimal Full-Page Example

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

export default () => (
  <XProvider>
    <Welcome title="Hello!" description="How can I help you?" />
    <Prompts
      items={[{ key: '1', label: 'What can you do?' }]}
      onItemClick={(info) => console.log(info.data.label)}
    />
    <Bubble.List items={[{ key: '1', content: 'Hello World', placement: 'end' }]} />
    <Sender onSubmit={(msg) => console.log(msg)} />
  </XProvider>
);

🚨 Development Rules

Always use XProvider at the app root — it supersedes antd's ConfigProvider and enables locale, direction, and x-specific shortcut keys.
Bubble.List not Bubble in loops — Bubble.List handles scroll anchoring, auto-scroll, and role-based layout; mapping Bubble manually loses these.
Keep components prop stable in Bubble and Bubble.List — inline object creation causes re-renders and resets typing animations.
Set streaming={true} during stream, streaming={false} on final chunk — leaving it true permanently breaks the done state.
ThoughtChain vs Think: use ThoughtChain for multi-step tool/agent call chains; use Think for a collapsible single-block reasoning display.
Actions.Copy, Actions.Feedback, Actions.Audio are preset sub-components — prefer them over building custom equivalents.
Sender onSubmit vs onChange: onSubmit fires on send button or Enter key; onChange fires on every keystroke — do not conflate them.
Never render Mermaid or CodeHighlighter inside a Bubble content string — use contentRender or the components map instead.

🤝 Skill Collaboration

Scenario	Skill combination
Full AI chat app	`x-chat-provider` → `x-request` → `use-x-chat` → `x-components` → `x-markdown`
Just building UI structure	`x-components` only
Markdown in bubble replies	`x-components` + `x-markdown`
Streaming data flow only	`use-x-chat` + `x-request`

🔗 Reference Resources

COMPONENTS.md — Component-by-component guide with usage, key props, and examples
PATTERNS.md — Full-page composition patterns and integration recipes
API.md — Auto-generated prop reference from official component docs — covers all 17 components

Official Documentation

FAQ

What does the x-components skill do?

How do I install x-components?

Run npx skills add https://github.com/ant-design/x --skill x-components in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/x-components/ (personal) or .claude/skills/x-components/ (project).

Which AI agents can use x-components?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is x-components safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains x-components?

It is published by ant-design in ant-design/x. It has 88 recorded installs.

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs

x-components

Install

Install

Describe the task

Review the result

SKILL.md

🎯 Skill Positioning

Table of Contents

📦 Package Overview

🗂️ Component Groups

🚀 Quick Start Decision Guide

🛠 Recommended Workflow

Minimal Full-Page Example

🚨 Development Rules

🤝 Skill Collaboration

🔗 Reference Resources

Official Documentation

FAQ

More from ant-design/x

x-markdown

use-x-chat

x-request

x-chat-provider

x-card

Popular ai & agents skills

google-agents-cli-publish

google-agents-cli-eval

skill-creator

codex-pet

full-output-enforcement

executing-plans