🧪 Markstream Custom Components
Override built-in Markstream node renderers and add trusted custom tags. Use when Codex needs to apply `setCustomComponents`, install `VueRendererMarkdown` with scoped Vue app components, keep overrid
About Markstream Custom Components
Use this skill when the task is to change how Markstream renders specific nodes or custom tags.
Its 347-word system prompt specializes your agent in testing & qa with structured methodology and proven output formats. Copy the prompt below to use in any AI coding agent.
Key Capabilities
- `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.
- Use `setCustomComponents(customId, mapping)` instead of global mappings whenever practical.
- Pass the same `customId` or `custom-id` to the renderer instance.
What This Skill Covers
- Workflow
- Default Decisions
- Useful Doc Targets
How It Works
- Classify the request.
- Prefer scoped mappings.
- Start with the smallest safe override.
- Preserve nested Markdown when needed.
- Keep props and cleanup intact.
Use Cases
- Writing unit, integration, and end-to-end tests
- Setting up test coverage and CI pipelines
- Refactoring legacy code with confidence using tests
- Creating test plans and QA checklists
Example Prompts
System Prompt (347 words)
Markstream Custom Components
Use this skill when the task is to change how Markstream renders specific nodes or custom tags.
Read [references/patterns.md](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.
setCustomComponents(customId, mapping) instead of global mappings whenever practical.
- Pass the same customId or custom-id to the renderer instance.
- In Vue 3 app/plugin setup, import { VueRendererMarkdown } from markstream-vue and install it with { components } when the override should be scoped to the Vue app instance.
- Start with the smallest safe override.
image, link, inline_code, mermaid) are easier than container nodes (heading, paragraph, list_item).
- If the request only changes Mermaid, use mermaid, not code_block.
- Preserve nested Markdown when needed.
node.content with a nested renderer.
- Pass the same custom-tag allowlist to nested renderers.
- Nested renderers inside a smooth-streaming parent are automatically suppressed from double pacing — do not add smooth-streaming to child renderers.
- Keep props and cleanup intact.
node, loading, indexKey, customId, and isDark.
- For mermaid and infographic overrides, preserve estimatedPreviewHeightPx so async preview shells keep stable height during remounts.
- Remove temporary scoped mappings with removeCustomComponents(customId) when the scope is no longer needed.
- Validate with the smallest useful check.
Default Decisions
- Scoped overrides first, global overrides only when the whole app truly needs them.
- Leaf-node overrides before container-node overrides.
customHtmlTagsplus scoped custom components before parser hooks.- Nested renderers for tag bodies that contain Markdown.
Useful Doc Targets
docs/guide/component-overrides.mddocs/guide/custom-components.mddocs/guide/components.mddocs/guide/advanced.md
Frequently Asked Questions
What is Markstream Custom Components?
Markstream Custom Components is a free testing & qa skill for AI coding agents. Override built-in Markstream node renderers and add trusted custom tags. Use when Codex needs to apply `setCustomComponents`, install `VueRendererMarkdown` with scoped Vue app components, keep overrid. It provides a specialized system prompt that configures your agent with testing & qa expertise.
How do I use Markstream Custom Components with Claude Code?
Copy the system prompt below and paste it into your CLAUDE.md file or Claude Code's custom instructions to activate Markstream Custom Components.
Which AI coding agents work with Markstream Custom Components?
Markstream Custom Components is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Markstream Custom Components free to use?
Yes, Markstream Custom Components is completely free and open source. The full source is available on GitHub at https://github.com/Simon-He95/markstream-vue/blob/main/.agents/skills/markstream-custom-components/SKILL.md. You only need a subscription to the AI agent you use it with.
