Markstream react

Skill sickn33/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/markstream-react

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-react

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

Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides.

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

2.7 KB, 470 tokens by cl100k_base, as published. Nobody here has run it

Markstream React

Overview

Wire the beta React renderer into React 18+ or Next.js without crossing client/server boundaries or reaching for AST control unnecessarily.

When to Use

Use for React/Next setup, root/next/server entrypoints, streaming, component overrides, or migration support. Pair with markstream-migration for renderer replacement.

Workflow

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

Confirm React 18+ and acceptance of a beta package.
Install only requested peers and import markstream-react/index.css.
Use the root entry for client rendering, /next for Next-specific components, and /server for server rendering without client hooks.
Start with content and smoothStreaming="auto"; use nodes plus final only when another layer owns parsing.
For live chat disable fade and opt into the cursor. On completion set final, disable pacing/cursor, and enable fade only if desired.
Keep browser-only peers inside 'use client', dynamic ssr: false, or another minimal boundary.
Prefer streamingComponents for parser-backed tags and htmlComponents for sanitized props. Use scoped registry overrides for built-in nodes.
Keep htmlPolicy="safe" and Mermaid strict; validate client, server, and incremental paths.

Example

import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'

export function StreamingAnswer({
  content,
  isDone,
}: {
  content: string
  isDone: boolean
}) {
  return (
    <MarkdownRender
      content={content}
      final={isDone}
      fade={isDone}
      typewriter={!isDone}
      smoothStreaming={isDone ? false : 'auto'}
      htmlPolicy="safe"
    />
  )
}

Limitations

The package is beta and requires React 18+.
Browser-only peers require client boundaries under SSR.
Complex parser parity requires separate migration review.

Security & Safety Notes

Review dependencies and never opt untrusted model output into trusted HTML or loose diagram rendering.