Markdown Code Review to Accessible HTML Diff Page
Turns a markdown code review with diff blocks and severity callouts into one self-contained HTML page with anchored findings.
Before & after
Same prompt, same agent — the only difference is the skill.
You could take your markdown review and make it into HTML so it's easier to read. You'd want to show the code changes on one side and your comments on the other. Different types of issues might be color-coded or labeled so readers can see what's important. You'd probably want a table of contents at the top so people can jump to specific sections. It's better if it's a single file so you don't have to worry about multiple files when you share it. Comments should be clear about what the issue is and how to fix it.
I'll convert your markdown code review (with diff blocks and severity tags) into a self-contained HTML side-by-side review document. INPUT FORMAT Write your review in markdown with: ```diff blocks: the code changes you're reviewing > [!BLOCKER] critical issues that must be fixed before merge > [!MAJOR] should-fix issues that weaken the PR > [!MINOR] nice-to-have improvements > [!NIT] stylistic notes OUTPUT DOCUMENT Single-file HTML (no dependencies, download and open anywhere). LAYOUT Left column (60 percent): Unified diff, line numbers, syntax highlighting Right column (40 percent): Severity-tagged annotation cards, each pinned to the exact line it references Top navigation: Jump list of all findings, grouped by severity VISUAL HIERARCHY BLOCKER findings (red icon + label): Critical, must fix before merging MAJOR findings (orange): Should fix, agreed on before ship MINOR findings (yellow): Polish, consider for future NIT findings (gray): Trivial style notes Each card shows: • Severity icon + label • Line number(s) affected • Reviewer's comment • Suggested fix (if provided) FOOTER Mandatory reviewer name + date (skill requires --reviewer flag; review is unsigned without it) EXAMPLE A 50-line PR with 3 blockers, 2 majors, 1 minor. Your HTML shows the full diff on the left, each comment pinned to its line on the right. Reader can click "BLOCKER" in the jump nav, focus on those 3 issues, then fix and re-submit.
About this skill
Your review notes live in markdown, but the [!BLOCKER] callouts show up as plain quotes on GitHub, nobody can tell which comment belongs to which line, and the exported HTML breaks as soon as the diff contains a <div>. This skill turns that markdown into one shareable HTML file. Every finding is tied to a real line in the diff, and severity reads correctly for colorblind readers and on grayscale printouts.
What it does
- Reads
@@ -a,b +c,d @@hunk headers to get true old/new line numbers, and flags hunks whose header counts don't match their body - Ties each
[!BLOCKER],[!MAJOR],[!MINOR],[!NIT]callout to the line it references. Findings it can't place are listed as general findings, never guessed - Escapes every diff line and code span, so code containing
<script>or</div>can't break or hijack the page - Shows severity as a distinct shape, a visible text label, and color, so it still reads correctly in grayscale
- Builds a summary at the top: counts, verdict, and findings grouped blockers-first, using plain anchor links that work with JavaScript off
- Lays the page out in two columns that stack on mobile and in print, needs no CDN, and ends with a reviewer footer that never makes up a name
What you get
A complete single-file HTML review page, plus a short report covering files, hunks, findings by severity, and anything it couldn't place or that didn't add up. For very large reviews, you get a small dependency-free converter script you run yourself.
Best for
Engineers and tech leads who write reviews in markdown and need to share them outside the code host, such as with contractors, auditors, or async teams, or in archived design records.
SKILL.md preview
---
name: markdown-code-review-to-html
… (sign up to view the full skill)More development skills
View all Development skills →CodeTour Walkthrough File Builder
Writes a valid CodeTour .tour file for your repo: persona-targeted steps anchored to verified file paths and line numbers.
Code-Accurate Docs: Docstrings, JSDoc, OpenAPI Specs
Docstrings, JSDoc/TSDoc, OpenAPI specs, and quickstart guides written from your real code, covering error paths and edge cases.
Markdown to Single-File HTML (Docs, Reviews, Slides)
Turns markdown into one offline-safe HTML file laid out as a document, diff review, or slide deck, with a fidelity report.
Release Changelog from Commits and PRs
Turns a commit range or merged PRs into a release changelog with breaking changes, migration steps, and user-facing wording.