Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular. Use when Codex needs scoped `setCustomComponents`, renderer-local React `streamingComponents` or `htmlComponents`, Angular/Svelte `customComponents`, Vue app-scoped components, node override keys such as `image`, `code_block`, `mermaid`, or `link`, or nested renderers for tags such as `thinking`.
80
100%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Use this skill when the task is to change how Markstream renders specific nodes or custom tags.
Read references/patterns.md before choosing an override strategy.
built-in override: replace an existing renderer such as image, link, code_block, mermaid, d2, or inline_code.custom tag: support trusted HTML-like tags such as thinking.parser-level: requires token transforms or AST reshaping. Only then should you leave this skill and use low-level parser hooks.setCustomComponents(customId, mapping) instead of global mappings whenever practical, and pass the same customId / custom-id.streamingComponents for parser-backed nodes or htmlComponents for sanitized HTML props plus children. Use defineStreamingComponents(...) / defineHtmlComponents(...) for typed maps. Keep setCustomComponents for built-in node overrides or shared legacy registration.customComponents map when the override should not enter the shared registry.{ VueRendererMarkdown } from markstream-vue and install it with { components } when the override should be scoped to the Vue app instance.image, link, inline_code, mermaid) are easier than container nodes (heading, paragraph, list_item).mermaid, not code_block.node.content with a nested renderer.smooth-streaming to child renderers.streamingComponents automatically contributes its keys to the effective custom-tag list; do not duplicate those keys in customHtmlTags unless another parser path needs them.node, loading, indexKey, customId, and isDark.mermaid and infographic overrides, preserve estimatedPreviewHeightPx so async preview shells keep stable height during remounts.removeCustomComponents(customId) when the scope is no longer needed.customHtmlTags plus scoped custom components before parser hooks.docs/guide/component-overrides.mddocs/guide/custom-components.mddocs/guide/react-components.mddocs/guide/components.mddocs/guide/advanced.mdf25ebd5
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.