New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Markdown PRD to HTML Renderer

by owainlewis in owainlewis/blueprint

Converts a complete Markdown PRD or technical design into one verified, static HTML reading page without changing what it says.

MITAuto-check passedDocuments & Office

Install Markdown PRD to HTML Renderer

skills CLI
$ npx skills add owainlewis/blueprint --skill html-doc -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install owainlewis/blueprint html-doc --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/owainlewis/blueprint.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-doc .claude/skills/html-doc && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-doc
GitHub stars
412
Token cost
~1.3k tokens
SKILL.md length
668 words
Files
11 (incl. scripts, assets)
Skills in repo
11
Repo updated
First seen
Licence
MIT

At a glance

Converts a complete Markdown PRD or technical design into one verified, static HTML reading page without changing what it says.

  • Works in 4 steps: Read and classify the source → Create a candidate → Verify the candidate in a real browser → …
  • Turning a finished Markdown PRD into a readable HTML page
  • SKILL.md covers Boundaries, Requirements, Workflow and Output standard, plus 1 more section
  • Runs Python scripts from its folder; calls python3 and npm

What it does

This skill accepts only an existing Markdown file or exact inline Markdown, classified as either a PRD or a design document, and refuses to write requirements, settle open design choices, or summarize missing content itself; content problems get reported separately from presentation problems rather than silently patched over.

Generation runs through a bundled Python script needing Pandoc and Node.js with npm, including a locked Mermaid dependency tree installed before the first diagram render. The render command returns a candidate, an output path, and a token that must be kept for later verification and finalization, and the generated HTML is never hand-edited; only the template or renderer changes, then it regenerates.

When your agent uses it

  • Turning a finished Markdown PRD into a readable HTML page
  • Rendering a technical design doc with diagrams for review
  • Presenting a spec document in a browser instead of raw Markdown

Example prompts

  • “Render REQUIREMENTS.md as an HTML reading view.”
  • “Turn this inline Markdown design doc into a static HTML page.”
  • “Regenerate the HTML after I edited the source PRD.”

Requirements

  • Python 3.11+
  • Pandoc 3+
  • Node.js 22.12+ and npm

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Read and classify the source
  2. Create a candidate
  3. Verify the candidate in a real browser
  4. Finalize or discard

What it can do on your machine

Read from SKILL.md and the folder at commit 1d74745. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python3
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Markdown PRD to HTML Renderer loads about 1.3k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 668 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~58
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from owainlewis/blueprint at commit 1d74745, republished under its MIT licence (© owainlewis). 668 words, ~1,318 tokens.

Download SKILL.mdSave it as .claude/skills/html-doc/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
html-doc
description
Generates a polished, static HTML reading view from an existing Markdown PRD or technical design. Use when a user asks to render, present, visualize, or make a PRD or design document easier for humans to read in a browser.

HTML document

Turn one complete Markdown PRD or technical design into one verified static HTML page. Keep Markdown canonical. Change presentation, not meaning.

Boundaries

  • Accept an existing Markdown file or exact inline Markdown.
  • Support only prd and design document kinds.
  • For REQUIREMENTS.md, pass --kind prd. For ARCHITECTURE.md or spec.md, pass --kind design.
  • Classify prd.md as prd and design.md as design. For other names, use the request or ask if the kind is unclear.
  • Do not write requirements, settle design choices, summarize missing content, or edit the source.
  • If the source is only a rough brief, use the appropriate authoring skill first.
  • Do not hand-edit generated HTML. Change the template or renderer, then regenerate.
  • Do not publish or host the result unless the user separately asks.

Requirements

Generation requires Python 3.11 or newer, Pandoc 3 or newer, Node.js 22.12 or newer, and npm. The skill directory contains a locked Mermaid dependency tree.

Before the first Mermaid render, run:

bash
npm ci --prefix <skill-directory>

Use scripts/html_doc.py from this skill directory for all generation and lifecycle operations.

Workflow

1. Read and classify the source

Read the complete source. Confirm it is no larger than 2 MiB. Determine the document kind from the request or the basename mappings above.

Treat content problems separately from presentation problems. If the Markdown contradicts itself, omits a required decision, or contains an invalid diagram, report that source problem. Do not silently repair its meaning.

2. Create a candidate

For a file source:

bash
python3 <skill-directory>/scripts/html_doc.py render <source.md> --kind <prd-or-design> --out <output.html>

--kind may be omitted only for exact prd.md and design.md basenames. --out may be omitted to create a sibling HTML file.

For exact inline Markdown, pipe it through standard input and provide both kind and output:

bash
python3 <skill-directory>/scripts/html_doc.py render --inline --kind <prd-or-design> --out <output.html>

The command returns JSON containing candidate, output, and token. It does not replace the final output. Keep those exact values for verification and finalization.

If an output lock already exists, do not delete it automatically. It may represent another pending render. Report its path. Use discard --force-stale only when the state is known to be abandoned.

Show full SKILL.md (337 more words)Show less
3. Verify the candidate in a real browser

Open the candidate as a local file. Do not treat source inspection as browser proof.

Check all of these:

  • desktop at 1440 CSS pixels;
  • tablet at 768 CSS pixels;
  • mobile at 390 CSS pixels;
  • A4 and US Letter print preview;
  • table-of-contents links and section targets;
  • keyboard order from skip link through navigation and document links;
  • visible focus indicators;
  • one main landmark and a sensible heading outline;
  • unique DOM IDs;
  • horizontal overflow, clipped text, code, tables, and diagrams;
  • useful diagram alternatives and accessible disclosure controls;
  • console errors and failed resource requests;
  • operation with browser network access disabled.

Compare the canonical content inside main with the Markdown abstract syntax tree. Navigation, source metadata, and derived accessibility text are not canonical content. Each top-level source block must map to one ordered data-source-block node with its SHA-256 identity and nested content intact. A Mermaid block maps to one figure whose exact source appears once in its disclosure.

If a presentation defect comes from the shared renderer or styles, fix that source and regenerate. If it is a content defect, leave the source and candidate unchanged and report it.

4. Finalize or discard

Only after every check passes, atomically install the candidate:

bash
python3 <skill-directory>/scripts/html_doc.py finalize --out <output.html> --token <token>

If any check fails, remove only this pending candidate:

bash
python3 <skill-directory>/scripts/html_doc.py discard --out <output.html> --token <token>

Finalization performs one same-directory atomic replacement. It never deletes the previous output first. A failed render, check, or replacement must leave the previous verified output byte-for-byte unchanged.

Output standard

The final page must:

  • preserve source wording and order;
  • use canonical prd or design machine metadata;
  • record the source path and SHA-256 hash;
  • use semantic HTML, inline CSS, and no runtime JavaScript;
  • contain no external runtime assets;
  • use a restrained blue-grey visual system;
  • remain readable without color, a mouse, a wide screen, or network access;
  • include responsive and print styles;
  • embed validated Mermaid SVG as a base64 image and retain the exact source in a disclosure.

Return

Stop when the verified candidate is finalized. Report the output path, source hash, and browser checks performed.

© owainlewis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (scripts, assets) in skills/html-doc of owainlewis/blueprint.

  • SKILL.md
  • assets/mermaid.json
  • assets/puppeteer.json
  • assets/styles.css
  • package-lock.json
  • package.json
  • scripts/html_doc.py
  • tests/fixtures/design.md
  • tests/fixtures/diagram.mmd
  • tests/fixtures/prd.md
  • tests/test_html_doc.py

Open the folder on GitHubat commit 1d74745

Compare with similar skills

Markdown PRD to HTML Renderer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Markdown PRD to HTML Renderer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Markdown PRD to HTML Renderer this skillowainlewis/blueprint412—~1.3kAutomated safety check: PassMIT
Md2pdf Exportwentorai/Research-Claw858—~2.1kAutomated safety check: NotesCustom licence
Markdown To HTMLgithub/awesome-copilot40k1 repos~6.2kAutomated safety check: PassMIT
Wiki Ado Convertmicrosoft/skills3.1k—~2.3kAutomated safety check: PassMIT
SVG Article Illustratorcat-xierluo/legal-skills713—~981Automated safety check: PassMIT
Moai Domain HTML Reportmodu-ai/moai-adk1.2k—~6.4kAutomated safety check: NotesApache-2.0

Similar skills

  • Md2pdf Export

    wentorai/Research-Claw

    Convert Markdown files to PDF, PNG, or JPEG using headless Chrome (Puppeteer), following the same methodology as VS Code's Markdown Preview Enhanced extension.

    858 GitHub stars~2.1k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes

  • Markdown To HTML

    github/awesome-copilot

    Official

    Convert Markdown files to HTML similar to marked.js, pandoc, gomarkdown/markdown, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like…

    40k GitHub starsUsed in 1 repo~6.2k tokens
    Documents & OfficeAuto-check passed

  • Wiki Ado Convert

    microsoft/skills

    Official

    Converts VitePress/GFM wiki markdown to Azure DevOps Wiki-compatible format.

    3.1k GitHub stars~2.3k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • SVG Article Illustrator

    cat-xierluo/legal-skills

    Creates SVG illustrations for a Markdown article as animated SVG, static SVG or PNG files, and places them in the text at planned positions.

    713 GitHub stars~981 tokensUpdated today
    Media & CreativeAuto-check passed

  • Moai Domain HTML Report

    modu-ai/moai-adk

    Markdown-to-single-file-HTML report renderer. An agent skill from modu-ai/moai-adk.

    1.2k GitHub stars~6.4k tokensUpdated today
    Writing & ContentAuto-check: notes

  • Bangunai Blog Manager

    LeoYeAI/openclaw-master-skills

    A skill your agent uses when managing BangunAI Blog content, automating blog workflows, and writing MDX articles with BangunAI conventions.

    2.2k GitHub stars~5.7k tokensUpdated 2 mo ago
    Documents & OfficeAuto-check passed

More from owainlewis/blueprint

All 11 skills in this repo

  • Codex Issue Coordinator

    owainlewis/blueprint

    Lets one Codex thread run a batch of GitHub issues through separate worker threads, each with its own worktree, branch, tested pull request and gated merge.

    412 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

  • Vertical-Slice Task Planner

    owainlewis/blueprint

    Breaks a reviewed spec into ordered, vertical-slice tasks that each fit one agent run and one pull request, grouped into milestones when useful.

    412 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Independent Implementation Review

    owainlewis/blueprint

    Has a separate agent review a code change without editing it, checking behavior, security, regressions, complexity, tests and docs before merge.

    412 GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

  • Architecture

    owainlewis/blueprint

    Designs and maintains root ARCHITECTURE.md for the intended system, including its data model and shared technical rules.

    412 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Architecture Review

    owainlewis/blueprint

    Reviews a technical proposal before implementation through an independent subagent, returning findings, open questions and a verdict without rewriting it.

    412 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Product Requirements Document

    owainlewis/blueprint

    Creates or updates a long-running REQUIREMENTS.md that defines a system's users, outcomes, capabilities, business rules, scope and acceptance conditions.

    412 GitHub stars~766 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Markdown PRD to HTML Renderer

What does Markdown PRD to HTML Renderer do?

Converts a complete Markdown PRD or technical design into one verified, static HTML reading page without changing what it says. This skill accepts only an existing Markdown file or exact inline Markdown, classified as either a PRD or a design document, and refuses to write requirements, settle open design choices, or summarize missing content itself; content problems get reported separately from presentation problems rather than silently patched over.

When should I use Markdown PRD to HTML Renderer?

Markdown PRD to HTML Renderer fits situations like: turning a finished Markdown PRD into a readable HTML page; rendering a technical design doc with diagrams for review; presenting a spec document in a browser instead of raw Markdown.

How do I install Markdown PRD to HTML Renderer in Claude Code?

Run `npx skills add owainlewis/blueprint --skill html-doc -a claude-code`. Or copy the skill folder (skills/html-doc in owainlewis/blueprint) into .claude/skills/html-doc in your project. Claude Code loads it when a task matches its description.

How do I install Markdown PRD to HTML Renderer in Codex?

Run `npx skills add owainlewis/blueprint --skill html-doc -a codex`. Or copy the skill folder (skills/html-doc in owainlewis/blueprint) into .agents/skills/html-doc in your project. Codex loads it when a task matches its description.

Can I use Markdown PRD to HTML Renderer in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add owainlewis/blueprint --skill html-doc -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-doc, .gemini/skills/html-doc, .github/skills/html-doc and .opencode/skills/html-doc in your project.

What does Markdown PRD to HTML Renderer need to run?

Going by SKILL.md and its folder, Markdown PRD to HTML Renderer needs Python for the scripts in its folder and the command-line tools its instructions call (python3 and npm). Our summary lists: Python 3.11+; Pandoc 3+; Node.js 22.12+ and npm.

Does Markdown PRD to HTML Renderer access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Markdown PRD to HTML Renderer safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Markdown PRD to HTML Renderer use?

Markdown PRD to HTML Renderer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Markdown PRD to HTML Renderer use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Markdown PRD to HTML Renderer?

Skills that share tags, products or a category with Markdown PRD to HTML Renderer: Md2pdf Export (wentorai/Research-Claw, 858 stars), Markdown To HTML (github/awesome-copilot, 40k stars), Wiki Ado Convert (microsoft/skills, 3.1k stars) and SVG Article Illustrator (cat-xierluo/legal-skills, 713 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Markdown PRD to HTML Renderer?

owainlewis (a GitHub user) maintains it in owainlewis/blueprint, which has 412 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 6, 2026.

Source: owainlewis/blueprint on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.