mdx-documentation

Scaffold and maintain MDX documentation sites with Rspress and interactive React components.

1|1|Updated Nov 25, 2024
One-click install
npx skills add https://github.com/joeledwardson/dev-setup --skill mdx-documentation-joeledwardson
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mdx-documentation
Source: https://github.com/joeledwardson/dev-setup/tree/main/configs/claude/skills/mdx-documentation
Command: npx skills add https://github.com/joeledwardson/dev-setup --skill mdx-documentation-joeledwardson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires rspress, create-rspress, rspress-plugin-mermaid.

What problem does it solve? Setting up an MDX docs site involves choosing an engine, configuring search, sidebars, and plugins, and migrating existing Markdown content — each with non-obvious pitfalls like broken container directives, dead-link build failures, and missing dev-server search. This Skill captures a validated Rspress setup so you avoid rediscovering these gotchas. ## Core Features & Use Cases - Engine Routing: Detects whether a repo uses Rspress (rspress.config.*) or mkdocs (mkdocs.yml) and applies the matching documentation approach. - Rspress Scaffolding: Non-interactive project creation, minimal config with mermaid plugin, auto-generated sidebars, and GitHub Pages deployment of the doc_build/ output. - mkdocs-to-MDX Migration: One-off transform rules for frontmatter titles, admonitions to container directives, content tabs, internal link rewriting, and image paths. - Use Case: You want interactive React components embedded in your project docs. Use this Skill to scaffold a Rspress site, port existing mkdocs Markdown pages, and deploy to GitHub Pages with working dev-server search. ## Quick Start Scaffold a new Rspress MDX docs site in the docs directory and configure it with mermaid support and GitHub Pages deployment.

Frequently Asked Questions about mdx-documentation

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

FAQPage Schema
How do I set up an MDX documentation site with Rspress?

Run npx create-rspress with the basic template, install dependencies, and define a minimal rspress.config.ts with root, title, and themeConfig. The sidebar auto-generates from the file tree, and rspress dev gives live reload with working search.

Rspress vs Docusaurus vs Astro Starlight for MDX docs?

Rspress is the only MDX framework among these that keeps search working in the dev server via a live FlexSearch index. Starlight lacks dev search and needs the most custom CSS, while Docusaurus is the heaviest and also lacks dev search.

How do I migrate mkdocs Markdown files to Rspress MDX?

Apply a one-off transform: add title frontmatter, convert admonitions to ::: container directives, flatten content tabs, strip .md extensions from internal links, and move images to docs/public with absolute paths. Delete the migration script afterward.

Why does a literal ::: appear in my Rspress page?

A container directive whose body ends in a list leaks the closing ::: as literal text unless you add a blank line before it. Always put a blank line before the closing ::: of tip, warning, danger, info, or details containers.

Does Rspress support mermaid diagrams?

Yes, via the community rspress-plugin-mermaid package, imported as a default export and added to the plugins array. It renders client-side, so verify output with a headless browser rather than curl since static HTML contains no svg.

Why does my Rspress build fail on internal links?

Rspress runs a strict dead-link checker that fails the build on any broken internal link. Fix the link target rather than working around it, since it usually indicates a real pre-existing broken link.