Agent Skills › kqcoxn/MaaPipelineEditor › x-markdown

x-markdown

GitHub

指导使用@ant-design/x-markdown进行Markdown渲染，涵盖基础渲染、LLM流式输出处理、自定义组件映射、插件主题配置及安全规范。

.agents/skills/ant-design-x/skills/x-markdown/SKILL.md kqcoxn/MaaPipelineEditor

需要渲染Markdown内容实现LLM流式输出渲染配置自定义组件映射处理聊天富文本展示

npx skills add kqcoxn/MaaPipelineEditor --skill x-markdown -g -y

More Options

Non-standard path

npx skills add https://github.com/kqcoxn/MaaPipelineEditor/tree/main/.agents/skills/ant-design-x/skills/x-markdown -g -y

Use without installing

npx skills use kqcoxn/MaaPipelineEditor@x-markdown

指定 Agent (Claude Code)

npx skills add kqcoxn/MaaPipelineEditor --skill x-markdown -a claude-code -g -y

安装 repo 全部 skill

npx skills add kqcoxn/MaaPipelineEditor --all -g -y

预览 repo 内 skill

npx skills add kqcoxn/MaaPipelineEditor --list

Frontmatter

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

🎯 技能定位

本技能专注解决一个问题：如何用 @ant-design/x-markdown 正确、稳定地渲染 Markdown 内容。

覆盖范围包括：

⚠️ x-markdown 不是聊天状态管理工具。它负责把已有消息内容渲染出来，不负责请求和消息流本身。

当你需要...	优先阅读	典型结果
用最小配置渲染 Markdown	CORE.md	用 `XMarkdown` 渲染基础内容
渲染 LLM 流式输出	STREAMING.md	正确处理 `hasNextChunk`、占位符、尾部指示器
把标签映射到业务组件	EXTENSIONS.md	为自定义标签、代码块、富内容组件建立稳定映射
增加插件或主题定制	EXTENSIONS.md	完成插件导入、主题类名接入、最小 CSS 覆盖
查看属性细节和默认值	API.md	获取 `XMarkdown` 与 streaming 的完整属性表

import { XMarkdown } from '@ant-design/x-markdown';

export default () => <XMarkdown content="# Hello" />;

场景	推荐技能组合	原因
聊天中的富文本回答	`x-chat-provider` → `x-request` → `use-x-chat` → `x-markdown`	前三者负责数据流，`x-markdown` 负责最终内容渲染
内置 Provider + Markdown 回复	`x-request` → `use-x-chat` → `x-markdown`	请求配置与渲染职责分离
独立的 Markdown 页面或文档视图	`x-markdown`	不需要聊天状态管理