reactive-md

Embeds live React components in Markdown via jsx live and css live fences.

2|2|Updated Dec 19, 2025
One-click install
npx skills add https://github.com/million-views/skills --skill reactive-md
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reactive-md
Source: https://github.com/million-views/skills/tree/main/reactive-md
Command: npx skills add https://github.com/million-views/skills --skill reactive-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Literate MD eliminates the disconnect between design narratives and runnable prototypes by allowing embedded live React components inside Markdown documents, enabling asynchronous collaboration without meetings.

Core Features & Use Cases

  • Embeds interactive fences (jsx live, tsx live, css live) inside markdown to demonstrate specs, flows, and design decisions.
  • Uses sidecars (references, scripts, assets) to share logic, data, and assets across fences.
  • Serves as a living product-spec/document that can simulate end-to-end behavior and device emulation for reviews.

Quick Start

Create a Reactive MD document containing a spec with at least one live fence to demonstrate the workflow.

Frequently Asked Questions about reactive-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed live React components inside markdown documentation?

You can embed live React components inside markdown by using interactive fences such as jsx live and css live, turning static product specs into runnable artifacts for asynchronous reviews.

What is literate documentation and how does it work for product specs?

Literate documentation eliminates the disconnect between design narratives and prototypes by embedding live interactive components inside markdown, allowing documents to simulate end-to-end behavior and device emulation.

How do I turn a PRD into a runnable prototype for async review?

To turn a PRD into a runnable prototype, create a markdown document with a frontmatter identity and at least one live fence to demonstrate the workflow and simulate end-to-end behavior.

Can I share data and logic across multiple live fences in a design doc?

Yes, you can share logic, data, and assets across multiple live fences by using sidecars such as references, scripts, and assets to compose end-to-end interactive documentation.

What are the limitations of using reactive markdown for interactive docs?

Reactive markdown requires a frontmatter identity defining name and description, and interactive fences are limited to jsx live, tsx live, and css live syntax for embedding runnable components.

Does reactive-md work without external dependencies for design documents?

Yes, reactive-md operates with no external dependencies, relying on internal sidecars and references to compose interactive product specs and design documents independently.