Complete AI TrainingYourJobSkills for your job

Skills / frontend

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.

  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 inc

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

SourceSimon-He95/markstream-vue
LicenseMIT
Risk labelcritical ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-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.