ck:markdown-novel-viewer

Serve markdown files and directories as a book-like HTTP viewer.

1|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-markdown-novel-viewer-quanganh208
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:markdown-novel-viewer
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/markdown-novel-viewer
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-markdown-novel-viewer-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gray-matter, highlight.js, marked, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

Provides a distraction-free, book-like way to read long-form Markdown and browse Markdown directories in a browser without manual HTML authoring or complex build steps. It solves the friction of previewing documentation, novels, reports, and plan-driven content by serving rendered HTML with sensible typography, theme switching, and navigation built in. The server also handles image path resolution and safe file serving so local media and linked files display reliably.

Core Features & Use Cases

  • Novel Theme: Warm, readable typography, narrow content width, dark mode, and reader-first UI for long-form consumption.
  • Directory Browser: Browse folders with clickable markdown links and parent navigation for quick exploration of a project or writing folder.
  • Mermaid Diagram Support: Client-side mermaid rendering with theme-aware re-rendering and expand/collapse controls for diagrams.
  • Plan Navigation: Auto-detects plan structures, generates a sidebar with phase anchors, and provides previous/next navigation for multi-file plans.
  • Robust Server UX: Background/foreground modes, automatic port selection, PID management, safe path validation, and /file routes for serving local images.
  • Use Case: Preview a documentation folder, read a long README or novel draft in a calm reader UI, or review plan-phase files with inline navigation.

Quick Start

Start the server pointing at a markdown file or directory, then open the printed URL in your browser to begin reading.

Frequently Asked Questions about ck:markdown-novel-viewer

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

FAQPage Schema
How do I preview markdown files as a book-like HTML reader in a browser?

To preview markdown files as a book-like reader, you need a local HTTP server that renders markdown to HTML with readable typography. This Skill serves markdown over HTTP with a novel theme, directory browsing, and dark mode without manual HTML authoring.

Can I browse a directory of markdown files and navigate between them?

Yes, you can browse directories of markdown files using the directory browser feature. It provides clickable markdown links, parent folder navigation, and auto-detected plan structures with previous/next navigation for multi-file projects.

Does this markdown viewer support rendering mermaid diagrams?

Yes, this markdown viewer supports rendering mermaid diagrams. It handles client-side mermaid rendering with theme-aware re-rendering and includes expand/collapse controls for viewing complex diagrams within long-form content.

How do I serve local images linked in markdown files over HTTP?

To serve local images linked in markdown files, the HTTP server uses /file routes for reliable image path resolution. This ensures local media displays correctly in the browser without broken links or complex build steps.

What is the best way to read long-form markdown documentation without distractions?

The best way to read long-form markdown without distractions is using a dedicated reader UI with warm typography, narrow content width, and dark mode. This Skill provides a calm, book-like HTTP viewer specifically designed for novels, reports, and plan-driven content.

Do I need Node.js to run a local markdown viewer server?

Yes, you need Node.js to run this local markdown viewer server. It operates as a background Node.js HTTP server with automatic port selection, PID management, and safe path validation to prevent directory traversal while serving static assets.