mdx

Create and render MDX content with embedded JSX in Markdown.

4|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill mdx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mdx
Source: https://github.com/mgd34msu/goodvibes-gemini/tree/main/skills/mdx
Command: npx skills add https://github.com/mgd34msu/goodvibes-gemini --skill mdx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @next/mdx, @mdx-js/loader, @mdx-js/react, gray-matter, zod, contentlayer, next-contentlayer, next-mdx-remote, remark-gfm, remark-math, rehype-slug, rehype-autolink-headings, rehype-pretty-code, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables the seamless integration of JSX components directly within Markdown files, bridging the gap between content creation and interactive web development.

Core Features & Use Cases

  • Embed React Components: Import and render React components directly inside your Markdown.
  • Dynamic Content: Create rich, interactive content for blogs, documentation, and marketing pages.
  • Use Case: Build a documentation site where each API reference page includes live, interactive code examples rendered using React components embedded directly in the MDX file.

Quick Start

Use the mdx skill to create a new blog post with a title and date in the frontmatter.

Frequently Asked Questions about mdx

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

FAQPage Schema
How do I embed React components inside Markdown for dynamic documentation?

MDX lets you import and render React components directly within Markdown files to bridge static content creation and interactive web development. It supports dynamic content generation for blogs, documentation, and marketing pages.

Can I use MDX with Next.js and Contentlayer to build a blog?

MDX integrates with Next.js and Contentlayer to build blogs and documentation sites. You can define frontmatter using gray-matter, then process the content through configured loaders for dynamic website rendering.

What remark and rehype plugins work with MDX for syntax highlighting and math?

MDX supports remark-gfm and remark-math for extended Markdown parsing, plus rehype-slug, rehype-autolink-headings, and rehype-pretty-code for rendering interactive code examples and generating accessible heading anchors.

Does Next.js support remote MDX files for dynamic content rendering?

Next.js supports rendering remote MDX files using the next-mdx-remote dependency. This allows you to fetch, parse, and render dynamic MDX content from external data sources rather than relying solely on local file imports.

How do I validate frontmatter metadata in MDX files?

You can validate frontmatter metadata in MDX files using Zod alongside Contentlayer. This integration lets you define schemas that parse and validate frontmatter properties like titles and dates before rendering the content.