markstream-migration
Lets your agent migrate content from other systems to Markstream. It ensures everything works well, maintaining security and the original look.
What it does
This tool helps replace an existing program that displays formatted text (like text with asterisks for bold) with a new one called Markstream. It ensures everything continues to work as before, including custom parts and security rules.
When to use it
- ✓When replacing programs like 'react-markdown' or 'markdown-it'.
- ✓When migrating components that display formatted text.
- ✓When choosing the best way to display text with Markstream.
Example of what to ask your AI
“I want to switch my current formatted text displayer to Markstream, ensuring customizations and security are kept.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool analyzes how your current program displays text, identifies important parts (like customizations and security rules), and helps configure Markstream to do the same. It focuses on maintaining visible behavior and security.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill markstream-migrationOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/markstream-migration/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Markstream Migration
Overview
Replace an existing Markdown renderer without silently dropping transforms, custom components, URL policy, raw-HTML behavior, or streaming semantics. Read references/adoption-checklist.md first.
When to Use
Use when replacing react-markdown, markdown-it, marked, or another renderer; migrating node renderers; or choosing between Markstream content, smooth streaming, and nodes.
Workflow
Before changing dependencies or source files, inspect the existing package manager and project conventions, preview the intended edits, and obtain explicit user approval.
- Inventory renderer imports, call sites, plugins, HTML policy, URL transforms, allowlists, custom renderers, CSS, and tests.
- Classify the migration as direct, renderer-custom, plugin-heavy, or security-heavy.
- Install the framework package and explicit CSS. Preserve visible behavior before optional features.
- Map built-ins to scoped overrides; in React prefer renderer-local component maps.
- Use trusted custom tags only for trusted content and reserve parse transforms for irreducible token/AST requirements.
- Keep
contentwith smooth streaming for ordinary token streams. Usenodesonly for worker parsing, shared AST ownership, or structural transforms. - Preserve safe HTML and strict Mermaid defaults; scope and document any trusted legacy exception.
- Run relevant builds and behavior tests. Report mappings, intentional differences, and unresolved review.
Example
// Before:
// import ReactMarkdown from 'react-markdown'
// return <ReactMarkdown>{markdown}</ReactMarkdown>
import MarkdownRender from 'markstream-react'
import 'markstream-react/index.css'
export function AssistantAnswer({
markdown,
isDone,
}: {
markdown: string
isDone: boolean
}) {
return (
<MarkdownRender
content={markdown}
final={isDone}
fade={isDone}
typewriter={!isDone}
smoothStreaming={isDone ? false : 'auto'}
htmlPolicy="safe"
/>
)
}
Limitations
- Markstream cannot reproduce every remark, rehype, or markdown-it plugin automatically.
- Visual parity does not prove security or URL-policy parity.
- Large migrations may require staged conversion.
Security & Safety Notes
Do not weaken sanitization for screenshot parity. Review dependencies, raw HTML, URL transforms, and trust boundaries explicitly.
FAQ
What is a Markdown renderer?
It's a program that transforms text written in a special format (like Markdown, which uses symbols like '*' for bold) into something the computer can visually display on the screen.
What are custom renderers?
These are custom parts of the text display program, created to show specific elements in a unique way that isn't standard.
What does 'streaming behavior' mean?
It's how the text is displayed gradually on the screen, as if it's being typed, instead of appearing all at once.
Details
Original description by the author
Audit and migrate an existing Markdown renderer to Markstream while preserving custom renderers, security policy, streaming behavior, and explicit parity gaps.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3556
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
angular-developer
Helps your agent create Angular code and give project structure advice. Useful for starting new projects, creating code parts, or improving performance and accessibility.
affaan-m/ECC
frontend-a11y
Helps your agent make web interfaces accessible to everyone. It ensures websites and apps work well with screen readers and keyboard navigation.
affaan-m/ECC
frontend-patterns
Has your agent apply modern patterns in frontend development. It optimizes performance, manages state, and follows best practices in React and Next.js.
affaan-m/ECC