docs-blog-conventor

Convert retikz blog MDX files into paste-ready markdown and SVG assets.

12|2|Updated Nov 27, 2024
One-click install
npx skills add https://github.com/Pionpill/retikz --skill docs-blog-conventor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: docs-blog-conventor
Source: https://github.com/Pionpill/retikz/tree/main/.agents/skills/docs-blog-conventor
Command: npx skills add https://github.com/Pionpill/retikz --skill docs-blog-conventor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts retikz blog MDX articles into cross-platform markdown that can be directly pasted to external publishing platforms, while also extracting each rendered demo into standalone SVGs and rewriting content to match those platforms’ limitations.

Core Features & Use Cases

  • ComponentPreview → platform-ready images: Replaces each retikz ComponentPreview with Markdown image links pointing to captured SVG files.
  • Automated SVG capture from the browser-rendered DOM: Uses a headless Edge/Chrome CDP flow to reliably export SVGs that depend on browser DOM measurement.
  • MDX-to-external formatting compliance: Strips frontmatter, promotes headings, absolutizes internal links for GitHub Pages deployment, rewrites station-specific UI language, and adds a publication metadata block at the end.

Quick Start

Run docs-blog-conventor on your already compliant MDX by starting the docs dev server and then executing grab-svg.mjs with the page URL, output directory, and the ComponentPreview demo names in their on-page appearance order.

Frequently Asked Questions about docs-blog-conventor

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

FAQPage Schema
How do I convert MDX blog files into markdown for external publishing platforms?

To convert MDX blogs into external-platform markdown, this Skill strips MDX frontmatter, rewrites relative links, and replaces inline JSX with standard markdown formatting suitable for pasting directly into platforms like Juejin or official accounts.

How are browser-rendered SVG components exported from MDX articles?

Browser-rendered SVG components are exported using a headless Edge or Chrome CDP flow, which captures SVG assets directly from the DOM measurement to ensure accurate visual extraction and deterministic mapping by their on-page appearance order.

Does this MDX to markdown conversion require a specific Node.js environment?

Yes, extracting SVG assets from rendered MDX components requires Node 22 along with a headless Edge or Chrome browser utilizing the Chrome DevTools Protocol (CDP) to reliably capture DOM-dependent SVGs.

What is the best way to replace inline MDX ComponentPreview tags with images for markdown?

The best way to replace inline MDX ComponentPreview tags is by capturing each rendered demo as a standalone SVG file and automatically rewriting the markdown with image links pointing to those generated SVG assets.

How do I handle relative links in MDX when exporting markdown to external platforms?

When exporting markdown to external platforms, relative links are automatically absolutized to match GitHub Pages deployment requirements, ensuring all internal navigation remains functional and correctly resolves on the target service.