Agent skill · software engineering · sickn33
markstream-react
Integrate the beta markstream-react renderer into React 18+ or Next.js with correct client/server entrypoints, CSS, streaming state, and component overrides.
Why this skill is useful
Provides specific integration patterns and component usage for the beta markstream-react renderer that the AI wouldn't reliably generate on its own.
What it needs
Requires next, react installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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 Inspect the existing package manager, installed package version and project conventions. A requested scoped integration already authorizes routine source/dependency edits; seek approval only for a material scope expansion or unresolved beta/alpha adoption decision. 1. Confirm React 18+ and acceptance of a beta package. 2. Install only requested peers and import markstream-react/index.css. 3. Use the root entry for client rendering, /next for Next-specific components, and /server for server rendering without client hooks. 4. Start with content and smoothStreaming="auto"; use nodes plus final only when another layer owns parsing. 5. For live chat disable fade and opt into the cursor. On completion set final, disable pacing/cursor, and enable fade only if desired. 6. Keep browser-only peers inside 'use client', dynamic ssr: false, or another minimal boundary. 7. Prefer streamingComponents for parser-backed tags and htmlComponents for sanitized props. Use scoped registry overrides for built-in nodes. 8. Keep htmlPolicy="safe" and Mermaid strict; validate client, server, and incremental paths. Example 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. Verify props, export paths and peer ranges against the installed package, not a mutable upstream main. Test partial and completed streams, malformed/untrusted Markdown, links and image URLs, cancellation and reduced motion. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/markstream-react--a50d4d