| name | markstream-custom-components |
| description | 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`. |
Markstream Custom Components
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.
Workflow
- Classify the request.
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.
- Prefer scoped mappings.
- Vue, Vue 2, Svelte, and shared Angular registration: use
setCustomComponents(customId, mapping) instead of global mappings whenever practical, and pass the same customId / custom-id.
- React custom tags: prefer renderer-local
streamingComponents for parser-backed nodes or htmlComponents for sanitized HTML props plus children. Use defineStreamingComponents(...) / for typed maps. Keep for built-in node overrides or shared legacy registration.
