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

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

87%Weight 40%Scale 1-3

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

A lean, highly actionable integration guide with concrete prop values and entrypoint identifiers and well-organized sections pointing to one-level-deep docs. The weakest dimension is workflow clarity, where the validation step is generic and lacks an explicit fix-and-retry loop.

Suggestions

Make the validation step concrete by naming a specific command (e.g. 'Run `npx tsc --noEmit` and the app's `next build` or `vite build`') instead of 'the smallest useful dev, build, or typecheck command'.

Add an explicit validate→fix→retry feedback loop after step 8 (e.g. 'If typecheck/build fails, fix the reported errors and re-run before moving on') to lift workflow clarity.

Consider providing the exact install command with the relevant optional peers in step 2 so the setup is fully copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is dense, technical, and free of concept-explanation fluff (no 'what is React' or 'how CSS works'), with every line giving actionable guidance; the only minor blemish is light repetition of the streaming-vs-history prop guidance across the Workflow and Default Decisions sections, but it stays lean enough for the score-3 anchor.	3 / 3
Actionability	It provides concrete, near copy-paste-ready guidance: exact prop values ('smoothStreaming="auto"', 'fade={false}', 'typewriter={true}'), a dynamic-switch expression ('smoothStreaming={isStreaming ? \"auto\" : false}', 'fade={!isStreaming}'), entrypoint paths ('markstream-react/next', 'markstream-react/server'), and typed helpers ('defineStreamingComponents(...)'), matching the score-3 anchor for fully executable, specific examples.	3 / 3
Workflow Clarity	The numbered Workflow (steps 1–8) gives a clear sequence and an explicit validate step (step 8), but the validation is generic ('the smallest useful dev, build, or typecheck command' with no concrete command) and there is no validate→fix→retry feedback loop, matching the score-2 anchor of steps present but validation checkpoints implicit/gappy.	2 / 3
Progressive Disclosure	Content is organized into clearly signaled, well-scoped sections (Workflow, Default Decisions, Useful Doc Targets) with one-level-deep doc pointers (docs/guide/*.md) for navigation; no bundle files exist in the skill, and the structure matches the score-3 anchor for a clear overview with well-signaled one-level-deep references.	3 / 3
	Total	11 / 12 Passed

Description

85%Weight 40%Scale 1-3

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, highly specific description tied to a concrete package, with explicit what-and-when coverage. Its main weakness is trigger-term quality, where most triggers are internal API jargon rather than phrases a user would naturally say.

Suggestions

Add natural-language trigger phrasings users would actually say (e.g. 'Use when streaming AI chat output into a React or Next UI' or 'when adding markdown streaming to a React app') alongside the current API-internal terms.

Lead the 'Use when' clause with the user-facing intent (streaming markdown into React/Next) before listing the package internals.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete 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' — matching the score-3 anchor for multiple specific concrete actions.	3 / 3
Completeness	It explicitly answers both 'what' (integrate the package, add the renderer, import CSS, add components) and 'when' via the explicit 'Use when Codex needs to...' clause, matching the score-3 anchor; the required Use-when trigger is present so no cap applies.	3 / 3
Trigger Term Quality	It includes some natural terms users would say ('React 18+ or Next app', 'react-markdown migration', 'CSS', 'client boundaries'), but the dominant trigger phrases are package API internals ('root, next, or server entrypoint', 'content and nodes', 'streamingComponents or htmlComponents', 'parser transforms') that a user would not naturally say, matching the score-2 anchor of relevant keywords missing common variations.	2 / 3
Distinctiveness Conflict Risk	It is tied to a specific named beta package ('markstream-react') with a clear React/Next niche and distinct migration triggers, making it unlikely to fire for unrelated skills, matching the score-3 anchor.	3 / 3
	Total	11 / 12 Passed

Validation

100%

Warnings & errors only

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
Commit: f25ebd5

Reviewed: 11 days ago

Table of Contents

Discovery Implementation Validation

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.