Agent skill · software engineering · assistant-ui
markdown
Renders assistant message text as markdown in assistant-ui. Use when wiring MarkdownTextPrimitive or the markdown-text element into MessagePrimitive.Parts, installing Shiki or Prism highlighting, adding KaTeX math or Mermaid diagrams, normalizing model-produced math delimiters, or choosing StreamdownTextPrimitive for block-aware streaming with optional code, math, Mermaid, and CJK plugins. Covers defer and smooth parsing behavior, code block overrides, and stream completion. For the surrounding unstyled message composition use primitives, and for installing or editing a styled renderer use elements.
Why this skill is useful
Provides specific implementation details and patterns for rendering markdown in a React application that the AI wouldn't reliably generate on its own.
What it needs
Requires @assistant-ui/react, @assistant-ui/react-markdown, katex, mermaid, react-shiki, react-syntax-highlighter installed locally. About 4k tokens when loaded. Last updated 2026-08-02. 20 stars on the source repository.
What this skill does
assistant-ui Markdown Always consult assistant-ui.com/llms.txt for the latest API. Assistant-ui has two renderers for an assistant text part. MarkdownTextPrimitive is the lightweight react-markdown path and the installed MarkdownText element is its styled implementation. StreamdownTextPrimitive is the alternative when block-aware streaming and optional Shiki, KaTeX, Mermaid, or CJK support are worth the larger renderer. References ./references/markdown-text.md -- install and compose MarkdownText, customize MarkdownTextPrimitive, and distinguish inline from fenced code ./references/syntax-highlighting.md -- install the Shiki or Prism renderer and select one per fenced language ./references/latex-mermaid.md -- configure KaTeX, normalize model math, preserve code spans, and gate Mermaid on stream completion ./references/streamdown.md -- use the Streamdown alternative, plugins, Tailwind sources, and deferred parsing Choose the renderer Use markdown-text when the app needs a small renderer, a custom react-markdown component map, or per-language SyntaxHighlighter and CodeHeader overrides. Add highlighting, math, and Mermaid only when the message format requires them. Use StreamdownTextPrimitive when a text part needs block-based streaming, incomplete markdown repair, or the optional code, math, Mermaid, and CJK plugins. It replaces the markdown renderer for that text part. Do not mount both renderers for the same part. Install and wire MarkdownText Install the renderer, which lands at components/assistant-ui/elements/markdown-text.tsx. MarkdownText reads the active message part itself. Render it only in the text branch, while other part kinds keep their own renderers. The thread element already includes this renderer. Compose it directly only when replacing the thread's message layout. Customize the primitive MarkdownTextPrimitive reads the surrounding text part through context, so it receives no text child or value prop. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills assistant-ui/markdown