技能 markstream-react

📦

markstream-react

Name: markstream-react
Author: simon-he95

内容修订 r1 安全 ⚙️ 外部命令

Integrate Markstream in React Apps

React and Next applications need correct renderer setup and safe streaming behavior. This skill guides CSS imports, client boundaries, rendering modes, and migration decisions.

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "markstream-react" from https://skillstore.io/skills/simon-he95-markstream-react.md and its manifest at https://skillstore.io/api/skills/simon-he95-markstream-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/simon-he95-markstream-react.md 已签名 manifest GET /api/skills/simon-he95-markstream-react/manifest 已签名 lockfile GET /api/skills/simon-he95-markstream-react/lockfile

测试它

正在使用“markstream-react”。 I need Markstream in a standard React application.

预期结果:

Confirm the application uses React.
Install markstream-react and requested peers.
Import the stylesheet from the application shell.
Begin with content-based rendering.

正在使用“markstream-react”。 My Next chat message streams, then becomes final.

预期结果:

Use automatic smooth streaming while the message streams.
Disable fade during streaming to avoid flicker.
When final, disable smooth streaming and enable fade for completed history.
Keep browser-only dependencies behind a client boundary.

安全审计

安全

v1 • 2026/7/19 打开版本化报告

All 29 static detections are false positives caused by Markdown inline-code delimiters and configuration terms in SKILL.md. The skill contains integration guidance only; no executable commands, reconnaissance behavior, prompt injection, or data-exfiltration intent was found.

已扫描文件

分析行数

复核项

已忽略误报

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: claude

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/simon-he95-markstream-react/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/simon-he95-markstream-react/security.svg)](https://skillstore.io/skills/simon-he95-markstream-react?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/simon-he95-markstream-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/simon-he95-markstream-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/simon-he95-markstream-react.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

simon-he95. (2026). markstream-react security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/simon-he95-markstream-react/audits/1

BibTeX 引用

@techreport{simon-he95-simon-he95-markstream-react-2026,
  author = {simon-he95},
  title = {markstream-react security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/simon-he95-markstream-react/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "markstream-react security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "simon-he95"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/simon-he95-markstream-react/audits/1"
identifiers:
  - type: other
    value: "skillstore:simon-he95-markstream-react:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

Add a React markdown renderer

Set up markstream-react, import its stylesheet, and choose an initial content-based renderer configuration.

Build a streaming chat interface

Configure smooth streaming while tokens arrive and switch to completed-history behavior when a message is final.

Plan a react-markdown migration

Assess renderer wiring, scoped overrides, and when to use the related migration guidance.

试试这些提示

Start a React integration

Help me add markstream-react to this React application. Identify the correct CSS import location and a minimal content-based setup.

Configure a Next client boundary

Review this Next application structure and recommend the smallest client-only boundary for markstream-react and its browser-only peers.

Tune chat streaming

Configure markstream-react for a chat message that streams tokens and then becomes final. Explain the smoothStreaming, fade, and typewriter choices.

Assess a renderer migration

Assess this react-markdown usage for migration to markstream-react. Identify required renderer changes, scoped overrides, SSR concerns, and validation steps.

最佳实践

Start with content rendering unless another layer already owns parsing or AST transforms.
Use the smallest client-only boundary needed for browser-dependent integrations.
Keep safe HTML policy and Mermaid strict mode unless trusted content has been reviewed.

避免

Do not enable trusted HTML rendering for untrusted user content.
Do not use smooth streaming for first-screen SSR content unless a blank initial state is intentional.
Do not move to nodes rendering before confirming a need for external AST control.

常见问题

Which applications does this skill support?

It supports React 18+, Next, and other React-based host applications.

Where should I import the stylesheet?

Import markstream-react/index.css from the application shell or client entry.

Should I use content or nodes?

Use content first. Use nodes when another layer owns parsing, AST transforms, or shared AST storage.

How should streaming messages behave?

Use automatic smooth streaming while content arrives. Switch to completed-history settings after the message is final.

How does this work with Next SSR?

Put browser-only dependencies behind the smallest practical client-only boundary or a non-SSR dynamic import.

When can I use trusted HTML or relaxed Mermaid mode?

Use them only for reviewed trusted surfaces and document why the safer defaults do not apply.

开发者详情

作者

simon-he95

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/simon-he95/markstream-vue/tree/6d75c25888c10809bf938931ebd78127583fa2dd/.agents/skills/markstream-react

引用

aeb1814252a7125c8b732442bf1e7f2cd1f686c1

维护新鲜度

2026/7/19

使用量

0 次下载 · 0 次浏览

文件结构

📁 agents/

📄 openai.yaml

📄 SKILL.md