Agent skill · software engineering · vercel
streamdown
Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues.
Why this skill is useful
Provides specific integration patterns and configuration steps for Streamdown that the AI wouldn't reliably generate on its own.
What it needs
Requires @streamdown/cjk, @streamdown/code, @streamdown/math, @streamdown/mermaid, streamdown, tailwindcss installed locally. About 3k tokens when loaded. Last updated 2026-07-21. 5,479 stars on the source repository.
What this skill does
Streamdown Streaming-optimized React Markdown renderer. Drop-in replacement for react-markdown with built-in streaming support, security, and interactive controls. Quick Setup 1. Install Optional plugins (install only what's needed): 2. Configure Tailwind CSS (Required) This is the most commonly missed step. Streamdown uses Tailwind for styling and the dist files must be scanned. Tailwind v4 — add to globals.css: Add plugin @source lines only for packages you have installed (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths: Code: @source "../nodemodules/@streamdown/code/dist/.js"; CJK: @source "../nodemodules/@streamdown/cjk/dist/.js"; Math: @source "../nodemodules/@streamdown/math/dist/.js"; Mermaid: @source "../nodemodules/@streamdown/mermaid/dist/.js"; Tailwind v3 — add to tailwind.config.js: 3. Basic Usage 4. With AI Streaming (Vercel AI SDK) 5. Static Mode (Blogs, Docs) Key Props Prop Type Default Purpose ------ ------ --------- --------- children string — Markdown content mode "streaming" \ "static" "streaming" Rendering mode plugins { code?, mermaid?, math?, cjk? } — Feature plugins isAnimating boolean false Streaming indicator caret "block" \ "circle" — Cursor style components Components — Custom element overrides controls boolean \ object true Interactive buttons; download: { filename } sets custom download names linkSafety LinkSafetyConfig { enabled: true } Link confirmation modal shikiTheme [light, dark] ['github-light', 'github-dark'] Code themes className string — Container class allowedElements string[] all Tag names to allow disallowedElements string[] [] Tag names to disallow allowElement AllowElement — Custom element filter unwrapDisallowed boolean false Keep children of disallowed elements skipHtml boolean false Ignore raw HTML urlTransform UrlTransform defaultUrlTransform Transform/sanitize URLs For full API reference, see references/api.md. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vercel/streamdown--91bf71