Wire beta React renderer into React 18+ and Next.js apps

This skill wires the beta React renderer into React 18+ or Next.js without crossing client/server boundaries or reaching for AST control unnecessarily. Its 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 the specifically requested peers and import markstream-react/index.css; use the root entry point for client rendering, /next for Next-specific components, and /server for server rendering without client hooks; start with the content prop and smoothStreaming="auto", using nodes plus final only when another layer already owns parsing; for live chat disable fade and opt into the cursor, then on completion set final, disable pacing/cursor, and enable fade only if desired; keep browser-only peers inside a 'use client' boundary, dynamic ssr: false, or another minimal boundary; prefer streamingComponents for parser-backed tags and htmlComponents for sanitized props, using scoped registry overrides for built-in nodes; and keep htmlPolicy="safe" and Mermaid strict, validating the client, server, and incremental paths. It's meant to pair with the markstream-migration skill when the actual goal is replacing an existing renderer.

Documented limitations: the package is beta and requires React 18+, browser-only peers require client boundaries under SSR, and complex parser parity requires separate migration review. A security note: review dependencies and never opt untrusted model output into trusted HTML or loose diagram rendering.

Use for React/Next setup, root/next/server entrypoints, streaming, component overrides, or migration support. Pair with markstream-migration when the actual task is renderer replacement rather than a fresh integration.

Input is an existing React 18+ or Next.js application. Output is a working MarkdownRender integration using the correct entrypoint (root/next/server) for its rendering context, with browser-only peers scoped to client boundaries and HTML/Mermaid trust kept at safe defaults.

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"
    />
  )
}

React 18+ or Next.js developers integrating Markstream's beta streaming markdown renderer who need the right client/server entrypoint and safe HTML/Mermaid defaults.