About

Imported from sickn33/agentic-awesome-skills (skills/markstream-react/SKILL.md). Install upstream with npx skills add sickn33/agentic-awesome-skills --skill markstream-react. Copyright stays with the author (MIT).

Markstream React

Name: markstream-react
Author: sickn33

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/sickn33-agentic-awesome-skills-markstream-react/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

sickn33-agentic-awesome-skills-markstream-react.ocm.jsonjson

{
  "ocm": "1",
  "id": "sickn33-agentic-awesome-skills-markstream-react",
  "kind": "skill",
  "name": "markstream-react",
  "description": "Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides.",
  "publisher": "sickn33",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "math"
    ],
    "tags": [
      "skill-md",
      "react",
      "nextjs",
      "markdown",
      "streaming",
      "ssr",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/sickn33/agentic-awesome-skills",
      "path": "skills/markstream-react/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/sickn33/agentic-awesome-skills/blob/HEAD/skills/markstream-react/SKILL.md",
      "key": "sickn33/agentic-awesome-skills/skills/markstream-react/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Markstream React\n\n## Overview\n\nWire the beta React renderer into React 18+ or Next.js without crossing client/server boundaries or reaching for AST control unnecessarily.\n\n## When to Use\n\nUse for React/Next setup, root/`next`/`server` entrypoints, streaming, component overrides, or migration support. Pair with `markstream-migration` for renderer replacement.\n\n## Workflow\n\nBefore changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.\n\n1. Confirm React 18+ and acceptance of a beta packa",
  "cost": {
    "context_tokens": 535
  }
}

Fetch it by URL: GET /api/v1/registry/sickn33-agentic-awesome-skills-markstream-react/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.