What happens if port 3000 is already taken?

The skill includes a built-in check for port availability. If the default port 3000 is occupied, it will automatically search for and utilize an alternative port, such as 3001.

How does mdserve handle live updates?

The skill watches the target Markdown file or directory for changes. Whenever a modification is detected, it triggers an automatic refresh in the connected browser window.

When should I use mdserve instead of reading in the terminal?

It is recommended for documents longer than 40-60 lines, files containing complex tables or diagrams, and any content that requires multiple design iterations with the user.

Does this skill support Mermaid diagrams?

Yes, it fully renders Mermaid flowcharts, sequence diagrams, state machines, and ER diagrams, making them much easier to understand than plain text or ASCII art.

Markdown Live Preview

Name: Markdown Live Preview
Author: jfernandez

byjfernandez

•

388

•

コンテンツ管理

Serves live-reloading HTML previews of Markdown files and Mermaid diagrams in the browser for enhanced document readability.

The mdserve skill allows Claude to launch a dedicated local web server for rendering Markdown content into high-quality, auto-updating HTML previews. This tool is essential for visualizing complex technical documentation, architectural plans, and multi-section reports that exceed the readability of a standard terminal. By supporting Mermaid diagrams and directory-wide navigation, it provides a professional-grade presentation layer that updates in real-time as Claude iterates on the content, ensuring a seamless collaborative experience for design and documentation tasks.

主な機能

01Seamless background execution allowing Claude to continue working while serving.

02Automatic port conflict detection and resolution logic.

03Integrated support for Mermaid diagrams including flowcharts and sequence diagrams.

04Directory mode with a sidebar for navigating multi-file documentation sets.

05Instant live-reloading browser previews that update on every file save.

06388 GitHub stars

ユースケース

01Reviewing entire documentation directories using the built-in file navigation sidebar.

02Visualizing complex system architectures and data models using Mermaid diagrams.

03Iterating on long-form technical proposals or design documents with real-time visual feedback.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jfernandez/mdserve mdserve

For use in Claude.ai and ChatGPT