CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

markstream-react

Integrate the beta markstream-react package into a React 18+ or Next app. Use when Codex needs to add the React renderer, choose the root, `next`, or `server` entrypoint, import CSS correctly, choose between `content` and `nodes`, keep client boundaries safe, add renderer-local `streamingComponents` or `htmlComponents`, use parser transforms, or prepare a repo for `react-markdown` migration.

Quality

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, dense instruction-only skill: the workflow is clearly sequenced with an explicit validation step, prop-level guidance is concrete, and it avoids teaching concepts Claude already knows. Main gaps are the absence of any copy-paste code example (install command or minimal JSX), a near-verbatim duplication of the streaming-vs-history guidance between two sections, and a bare doc-target list that would benefit from one-line descriptions.

Suggestions

Deduplicate the streaming-vs-recovering-history guidance: keep the full prop triple in one place (Workflow step 5 or Default Decisions) and cross-reference it from the other instead of repeating it nearly verbatim.

Add one minimal executable example — the install command (e.g. `npm install markstream-react`) and a small `<Markstream content={...} smoothStreaming="auto" />` snippet — to lift actionability to copy-paste readiness.

Annotate the Useful Doc Targets with a one-line purpose per file (e.g. `react-next-ssr.md` — SSR boundaries and client-only loading) so the right reference is discoverable at a glance.

DimensionReasoningScore

Conciseness

The body is dense with API facts and assumes Claude's competence — no basic React/SSR/markdown tutorials, and lines like "`typewriter` only controls the blinking cursor and defaults to `false`" earn their tokens. Not 5 because the streaming-vs-history guidance ("Streaming: `smoothStreaming="auto"`, `fade={false}`, `typewriter={true}`... Recovering history: `smoothStreaming={false}`, `fade={true}`, `typewriter={false}`") appears nearly verbatim in both Workflow step 5 and Default Decisions, a trimmable duplication; not 3 since the verbosity is confined to that one repeated block.

4 / 5

Actionability

Concrete, near-executable guidance throughout: exact import paths ("Import `markstream-react/index.css`"), exact entrypoints (`markstream-react/next`, `/server`), exact prop values and defaults (`smoothStreaming="auto"`, `maxLiveNodes <= 0`, `htmlPolicy="safe"`), and named helpers (`defineStreamingComponents(...)`, `setCustomComponents`). Not 5 because there is no copy-paste-ready code — no install command syntax and no minimal JSX usage example; the guidance is prop-level rather than example-level.

4 / 5

Workflow Clarity

The 8-step Workflow is a clear, correctly ordered sequence (confirm host → install → import CSS → choose entrypoint → choose content/nodes → SSR boundaries → custom components → validate) with step 8 "Validate with the smallest useful dev, build, or typecheck command" as an explicit checkpoint. Not 5 because there is no error-recovery feedback loop (nothing about what to do when validation or the build fails); not 3 because a validation checkpoint is explicitly present and each step's decision branches are well defined.

4 / 5

Progressive Disclosure

Good single-file structure with clear sections (Workflow, Default Decisions, Useful Doc Targets) and one-level-deep doc references (`docs/guide/react-quick-start.md` etc., plus an inline pointer to `docs/guide/ai-chat-streaming.md`). No bundle files (references/, scripts/, assets/) exist to split content into, and at ~56 lines the body is within reasonable SKILL.md bounds. Not 5 because the doc-target list is bare paths without per-target descriptions or markdown links, and the dense streaming/animation default reference in step 5 is arguably material that belongs in a guide file.

4 / 5

Total

16

/

20

Passed

Description

92%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states what the skill does, gives an explicit 'Use when' clause with concrete trigger scenarios, and names specific entrypoints, props, and component maps. The only notable quirk is addressing 'Codex' rather than a generic agent or user, which does not materially affect triggering. Trigger keyword coverage is good but misses a few natural synonyms.

DimensionReasoningScore

Specificity

The description lists many concrete, specific actions — "add the React renderer", "choose the root, `next`, or `server` entrypoint", "import CSS correctly", "choose between `content` and `nodes`", "add renderer-local `streamingComponents` or `htmlComponents`", "use parser transforms", "prepare a repo for `react-markdown` migration" — which is comprehensive coverage for this skill's domain. Not score 4 because the action list covers essentially the full capability surface with no meaningful gaps.

5 / 5

Completeness

Both parts are explicit: the 'what' is "Integrate the beta markstream-react package into a React 18+ or Next app", and the 'when' is a concrete "Use when Codex needs to" clause enumerating seven specific trigger scenarios. This matches the score-5 anchor of clearly answering both what AND when with concrete trigger phrases; score 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Good keyword coverage: "markstream-react", "React 18+", "Next", "react-markdown", "renderer", "streamingComponents", "htmlComponents", "migration" are all terms a user would naturally say when needing this skill. Not 5 because a few natural synonyms/variants are missing (e.g. "markdown rendering", "SSR", "typewriter/streaming text"); not 3 because the coverage clearly exceeds the 'some relevant keywords' anchor.

4 / 5

Distinctiveness Conflict Risk

A clear niche — integrating one specific package ("the beta markstream-react package") into React/Next hosts, with entrypoint and component-map terminology — gives it distinct triggers and minimal conflict risk. It even disambiguates the adjacent migration case ("prepare a repo for `react-markdown` migration"), which the body delegates to a separate skill. Not 4 because overlap with any generic markdown or React skill is negligible.

5 / 5

Total

19

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

Simon-He95/markstream-vue

Path

.agents/skills/markstream-react/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.