Markstream custom components

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-custom-components

AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 1,987+ agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.

Install

npx -y skills add sickn33/agentic-awesome-skills --skill markstream-custom-components

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Override Markstream node renderers and add trusted custom tags across Vue, React, Svelte, and Angular using scoped or renderer-local mappings.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.0 KB, 502 tokens by cl100k_base, as published. Nobody here has run it

Markstream Custom Components

Overview

Customize specific Markstream nodes or trusted custom tags without replacing the parser or leaking global renderer state. Read references/patterns.md first.

When to Use

Use to replace built-ins such as image, link, code_block, mermaid, or inline_code; render trusted tags such as thinking; or scope overrides to one renderer or app. Use parser transforms only when token or AST reshaping is required.

Workflow

Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.

Classify the change as a built-in override, trusted tag, or parser transform.
Prefer scoped mappings. Vue, Vue 2, Svelte, and Angular can use setCustomComponents(customId, mapping); Svelte and Angular can also pass renderer-local maps.
In React, prefer streamingComponents for parser-backed nodes and htmlComponents for sanitized attributes plus children.
Start with leaf nodes before containers that must preserve children.
For trusted tag bodies containing Markdown, use a nested renderer with the same allowlist. Do not add a second smooth-streaming loop.
Preserve node/loading props, identity keys, scope IDs, theme state, and preview-height estimates for async diagrams.
Remove temporary scoped registrations on cleanup and validate repeated and nested tags.

Example

import MarkdownRender, {
  type NodeComponentProps,
  setCustomComponents,
} from 'markstream-react'
import 'markstream-react/index.css'

function ThinkingNode({ node }: NodeComponentProps<any>) {
  return <details><summary>Thinking</summary>{node.content}</details>
}

setCustomComponents('assistant-panel', { thinking: ThinkingNode })

export function Answer({ markdown }: { markdown: string }) {
  return (
    <MarkdownRender
      content={markdown}
      customId="assistant-panel"
      customHtmlTags={['thinking']}
      htmlPolicy="safe"
    />
  )
}

Limitations

Component overrides cannot reproduce arbitrary remark/rehype transforms.
Container overrides require careful child rendering and accessibility review.
Framework registration APIs are not interchangeable.

Security & Safety Notes

Treat custom HTML-like tags as trusted input only. Keep safe HTML enabled and do not pass unsanitized attributes into host components.