// Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.
| name | x-markdown |
| version | 2.7.0 |
| description | Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content. |
This skill focuses on one job: render Markdown correctly and predictably with @ant-design/x-markdown.
It covers:
| Layer | Package | Responsibility |
|---|---|---|
| UI layer | @ant-design/x | Chat UI, bubble lists, sender, rich interaction components |
| Data layer | @ant-design/x-sdk | Providers, requests, streaming data flow, state management |
| Render layer | @ant-design/x-markdown | Markdown parsing, streaming rendering, plugins, themes, custom renderers |
⚠️
x-markdownis not a chat-state tool. Use it to render content after@ant-design/xand@ant-design/x-sdkhave already produced the message data.
| If you need to... | Read first | Typical outcome |
|---|---|---|
| Render Markdown with the smallest setup | CORE.md | XMarkdown renders trusted content with basic styling |
| Render LLM streaming chunks | STREAMING.md | Correct hasNextChunk, placeholders, tail indicator, loading states |
| Replace tags with business components | EXTENSIONS.md | Stable components map for custom tags and code blocks |
| Add plugins or theme overrides | EXTENSIONS.md | Plugin imports, theme class wiring, minimal CSS overrides |
| Check prop details and defaults | API.md | Full prop table for XMarkdown and streaming options |
import { XMarkdown } from '@ant-design/x-markdown';
export default () => <XMarkdown content="# Hello" />;
components object. Do not create new inline component mappings on every render.streaming.hasNextChunk = false on the final chunk, otherwise incomplete placeholders will not flush into final content.escapeRawHtml when raw HTML should stay visible as text.dompurifyConfig explicit and minimal.x-markdown-light or x-markdown-dark and override only the variables you need.streamStatus === 'done'.| Scenario | Recommended skill combination | Why |
|---|---|---|
| Rich assistant replies in chat | x-chat-provider → x-request → use-x-chat → x-markdown | Provider and request handle data flow, x-markdown handles final rendering |
| Built-in provider with Markdown replies | x-request → use-x-chat → x-markdown | Keep request config and rendering concerns separate |
| Standalone Markdown page or docs viewer | x-markdown only | No chat data flow needed |
x-chat-provider when adapting an API shape.x-request when configuring transport, auth, retries, or streaming separators.use-x-chat when managing chat state in React.x-markdown when the content itself needs Markdown parsing, streaming recovery, or rich component rendering.x-markdown docsFocus on explaining how to use the useXChat Hook, including custom Provider integration, message management, error handling, multi-conversation management, and more
Use when building AI-driven UIs with @ant-design/x-card — covers XCard.Box, XCard.Card, A2UI v0.9 commands, data binding, catalogs, actions, and streaming patterns.
Focus on implementing custom Chat Provider, helping to adapt any streaming interface to Ant Design X standard format
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.
Focus on explaining the practical configuration and usage of XRequest, providing accurate configuration instructions based on official documentation
专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理、多会话管理等