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.
IT & Software Developmentmarkdownnextjsreactssrstreaming
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,
/nextfor Next-specific components, and/serverfor server rendering without client hooks. - Start with
contentandsmoothStreaming="auto"; usenodesplusfinalonly 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', dynamicssr: false, or another minimal boundary. - Prefer
streamingComponentsfor parser-backed tags andhtmlComponentsfor sanitized props. Use scoped registry overrides for built-in nodes. - Keep
htmlPolicy="safe"and Mermaid strict; validate client, server, and inc
Subscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | Simon-He95/markstream-vue |
|---|---|
| License | MIT |
| Risk label | critical ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-07-21 |
Related skills
anti-ui-slop
Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.
astro
Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
chat-widget
Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.
chrome-extension-developer
Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.
design-it
Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.
