CtrlK
BlogDocsLog inGet started
Tessl Logo

x-markdown

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.

62

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/x-markdown/SKILL.md
SKILL.md
Quality
Evals
Security

🎯 Skill Positioning

This skill focuses on one job: render Markdown correctly and predictably with @ant-design/x-markdown.

It covers:

  • Basic rendering and package boundaries
  • LLM streaming output and incomplete syntax handling
  • Custom component mapping for rich chat or data-display blocks
  • Plugins, themes, and safe rendering defaults

Table of Contents

  • 📦 Package Boundaries
  • 🚀 Quick Start Decision Guide
  • 🛠 Recommended Workflow
  • 🚨 Development Rules
  • 🤝 Skill Collaboration
  • 🔗 Reference Resources

📦 Package Boundaries

LayerPackageResponsibility
UI layer@ant-design/xChat UI, bubble lists, sender, rich interaction components
Data layer@ant-design/x-sdkProviders, requests, streaming data flow, state management
Render layer@ant-design/x-markdownMarkdown parsing, streaming rendering, plugins, themes, custom renderers

⚠️ x-markdown is not a chat-state tool. Use it to render content after @ant-design/x and @ant-design/x-sdk have already produced the message data.

🚀 Quick Start Decision Guide

If you need to...Read firstTypical outcome
Render Markdown with the smallest setupCORE.mdXMarkdown renders trusted content with basic styling
Render LLM streaming chunksSTREAMING.mdCorrect hasNextChunk, placeholders, tail indicator, loading states
Replace tags with business componentsEXTENSIONS.mdStable components map for custom tags and code blocks
Add plugins or theme overridesEXTENSIONS.mdPlugin imports, theme class wiring, minimal CSS overrides
Check prop details and defaultsAPI.mdFull prop table for XMarkdown and streaming options

🛠 Recommended Workflow

  1. Start with CORE.md and get a plain render working first.
  2. Add STREAMING.md only when the content arrives chunk-by-chunk.
  3. Add EXTENSIONS.md when you need custom tags, plugins, syntax blocks, or themes.
  4. Use API.md to confirm prop names and defaults instead of guessing.

Minimal Setup Reminder

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

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

🚨 Development Rules

  • Prefer a stable components object. Do not create new inline component mappings on every render.
  • Use streaming.hasNextChunk = false on the final chunk, otherwise incomplete placeholders will not flush into final content.
  • Treat raw HTML carefully. Prefer escapeRawHtml when raw HTML should stay visible as text.
  • If raw HTML must be rendered, keep dompurifyConfig explicit and minimal.
  • Keep theme overrides small. Start from x-markdown-light or x-markdown-dark and override only the variables you need.
  • If a custom component depends on complete syntax, branch on streamStatus === 'done'.

🤝 Skill Collaboration

ScenarioRecommended skill combinationWhy
Rich assistant replies in chatx-chat-provider → x-request → use-x-chat → x-markdownProvider and request handle data flow, x-markdown handles final rendering
Built-in provider with Markdown repliesx-request → use-x-chat → x-markdownKeep request config and rendering concerns separate
Standalone Markdown page or docs viewerx-markdown onlyNo chat data flow needed

Boundary Rules

  • Use x-chat-provider when adapting an API shape.
  • Use x-request when configuring transport, auth, retries, or streaming separators.
  • Use use-x-chat when managing chat state in React.
  • Use x-markdown when the content itself needs Markdown parsing, streaming recovery, or rich component rendering.

🔗 Reference Resources

  • CORE.md - Package boundaries, install/setup, safe defaults, common render patterns
  • STREAMING.md - Chunked rendering, incomplete syntax recovery, loading vs done behavior
  • EXTENSIONS.md - Components, plugins, themes, custom tag guidance
  • API.md - Generated API reference from the official x-markdown docs

Official Docs

Repository
modelscope/ms-agent
Path

.agents/skills/x-markdown/SKILL.md

Commit

a56afcc

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill