Markstream Custom Components

Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Solid, 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`.

3,046 stars 188 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Simon-He95/markstream-vue --skill markstream-custom-components

Manual install

git clone --depth 1 https://github.com/Simon-He95/markstream-vue.git /tmp/markstream-vue
mkdir -p ~/.claude/skills
cp -r /tmp/markstream-vue/.agents/skills/markstream-custom-components ~/.claude/skills/markstream-custom-components

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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.

For SolidJS/SolidStart, follow [markstream-solid](../markstream-solid/SKILL.md) and the Solid API reference. Prefer renderer-local or `MarkstreamProvider` overrides, keep prop reads reactive, and use typed callbacks/render props rather than Vue emits/slots.

## Workflow

1. 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.
2. 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(...)` / `defineHtmlComponents(...)` for typed maps. Keep `setCustomComponents` for built-in node overrides or shared legacy registration.

Read the full skill on GitHub

Details

Skill name: markstream-custom-components
Repository: Simon-He95/markstream-vue
Path: .agents/skills/markstream-custom-components/SKILL.md
License: MIT
Repo updated: 31 October 2026
Listed in: heilcheng/awesome-agent-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Markstream Custom Components skill do?

How do I install the Markstream Custom Components skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Simon-He95/markstream-vue --skill markstream-custom-components. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Markstream Custom Components popular?

It lives in Simon-He95/markstream-vue, which has 3,046 GitHub stars and 188 forks, and is included in 2 curated skill lists.

Related skills

Markstream Angular

Simon-He95/markstream-vue

Integrate the alpha markstream-angular package into an Angular 20+ app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.

Frontend & DesignIn 2 lists188

Markstream Install

Simon-He95/markstream-vue

Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, markstream-svelte, or markstream-solid into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode and built-in, plain, or custom code-block paths, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.

Frontend & DesignIn 2 lists188

Markstream Migration

Simon-He95/markstream-vue

Audit and migrate existing Markdown rendering to Markstream, or upgrade a markstream-vue 1.x integration to 2.x. Use when Codex needs to replace another renderer, classify direct vs custom vs plugin-heavy adoption, preserve behavior during adoption, migrate custom renderers into scoped Markstream overrides, decide when `nodes` streaming is worth adopting, or replace removed 1.x code-block dependencies, APIs, preview payloads, and parser types.

Software DevelopmentIn 2 lists188

Markstream Nuxt

Simon-He95/markstream-vue

Integrate markstream-vue into a Nuxt 3 or Nuxt 4 app. Use when Codex needs client-only boundaries, SSR-safe setup, browser-only peer gating, worker-aware initialization, renderer `mode` selection, or a safe `MarkdownRender` integration inside pages, components, or Nuxt plugins.

Frontend & DesignIn 2 lists188

React Native Best Practices

1.7k

callstackincubator/agent-skills

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

Frontend & DesignIn 1 list117

Markstream React

Simon-He95/markstream-vue

Integrate the beta markstream-react package into a React 18+ or Next app. Use when Codex needs to add the React renderer, choose the root, `next`, or `server` entrypoint, import CSS correctly, choose between `content` and `nodes`, keep client boundaries safe, add renderer-local `streamingComponents` or `htmlComponents`, use parser transforms, or prepare a repo for `react-markdown` migration.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.