Md review skill
Converts a markdown PR writeup or code review (one with ```diff fenced blocks and severity-tagged > [!BLOCKER]/[!MAJOR]/[!MINOR]/[!NIT] callouts) into a single-file 2-column HTML review — unified-diff on the left, severity-tagged annotation cards on the right, top jump-nav listing every finding, mandatory named reviewer footer.
by alirezarezvani·MIT license·★ 26,349 Stars on the repo·GitHub ↗
npx degit alirezarezvani/claude-skills/markdown-html/skills/md-review#main ~/.claude/skills/md-reviewChecked ·commit main
Files of Md review
Show the full text98 lines
md-review — Code-review markdown → 2-column HTML
The code-review converter from Tier 2 of Shihipar's essay ("Code Review and PR Writeups"). Takes a markdown PR writeup with diff blocks + severity callouts and produces a single-file HTML review with a jump-nav, 2-column diff + annotation layout, and a named reviewer footer.
Three stdlib tools pipeline together:
diff_parser.py → annotation_extractor.py → review_html_renderer.py
(md → diff hunks) (md → severity-tagged (hunks + annotations
annotations attached + tokens → 2-col HTML)
to nearest hunk)
When to invoke
| Symptom | Action |
|---|---|
markdown-html-orchestrator routes input as REVIEW |
Invoke this skill |
User runs /cs:md-review <path>.md directly |
Invoke this skill |
Input contains ```diff fenced blocks + > [!MAJOR]/> [!BLOCKER]/etc. callouts |
Invoke this skill |
| Input is a long-form spec / report (no diff blocks) | Route to md-document instead |
| Input is a slide deck | Route to md-slides instead |
| Input < 100 lines | Refuse (Shihipar threshold) |
| Design-system not onboarded | Refuse; surface /cs:design-system |
Pipeline
# 1. Parse markdown → diff hunks JSON
python3 markdown-html/skills/md-review/scripts/diff_parser.py \
--input <path>.md --output hunks.json
# 2. Extract severity-tagged annotations, attach to nearest preceding hunk
python3 markdown-html/skills/md-review/scripts/annotation_extractor.py \
--input <path>.md --diff-blocks hunks.json --output annotations.json
# 3. Render 2-col HTML (--reviewer is mandatory — refuses without)
python3 markdown-html/skills/md-review/scripts/review_html_renderer.py \
--diff-blocks hunks.json --annotations annotations.json \
--reviewer "Jane Doe" --title "PR #123: Add retry logic" \
--output review.html
What gets rendered
- Top jump-nav — every annotation with severity badge + 80-char preview + jump link; severity counts in the heading ("3 BLOCKER · 2 MAJOR · 1 NIT")
- 2-column hunk rows — unified diff on the left (per-line old/new line numbers, +/− marks, addition/deletion background tint from design-system tokens), annotation cards on the right (color + icon + aria-label per WCAG 1.4.1)
- Approval bar — if
LGTMmarkers are present and no severity annotations, a success-tinted "LGTM — no findings flagged" bar - General comments — annotations not attached to any hunk render at the bottom in their own section
- Reviewer footer — mandatory; refuses to render without
--reviewer - Responsive — 2-col collapses to stacked on viewports < 900px
Hard rules
--revieweris mandatory. A code review must name a human reviewer. Refuses with exit 3 otherwise. Mirrors research-ops's "named owner" discipline.- Refuses if no hunks present. No
--- a/file+@@ ... @@blocks means this isn't a code review — refuses with exit 4 and recommendsmd-document. - Refuses input < 100 lines. Markdown wins below the threshold (Shihipar).
- Refuses without onboarding. Same gate as every converter.
- Severity is never color-only. Each badge ships color + icon +
aria-label+ text. WCAG 1.4.1 enforced at the renderer level. - Single-file output. All CSS inline. Only external is Google Fonts CSS. No Prism in md-review (diff coloring conflicts with syntax highlighting).
- Custom severity convention.
--severity-convention "critical,important,suggestion,nit"swaps tier names; position 0 is most severe. Default is BLOCKER / MAJOR / MINOR / NIT (Google Code Review Developer Guide).
Forcing-question library (Matt Pocock grill discipline)
- Who is the named reviewer? Recommended: the user signing off on the review. Canon: research-ops named-owner pattern; SWE at Google ch. 9.
- Which severity convention applies — default (BLOCKER/MAJOR/MINOR/NIT) or custom? Recommended: default unless your team has a documented alternative. Canon: Google Code Review Developer Guide.
- Are annotations anchored to specific hunks, or are some general? Recommended: anchor everything you can; general goes to the unanchored section. Canon: SWE at Google ch. 9 — "Comments must reference a specific line".
- What's the PR title for the
<title>and header? Recommended: the actual PR / commit title. Canon: docs-as-context-for-readers. - Should
LGTMmarkers ship as the approval bar? Recommended: yes if there are no severity annotations; otherwise the findings take precedence.
Distinct from
md-document— that converter renders prose + tables + code + callouts. This one renders diff hunks + margin annotations.md-slides— that converter splits on---boundaries. This one is a single-page artifact.- GitHub PR comments — those are a thread. This is a single-author snapshot artifact.
Output artifact
{default_output_dir}/review-{slug}.html (path resolved by orchestrator's output_path_resolver.py; collision suffix -2, -3, … by default).
References
- Shihipar — Claude Code HTML output (Medium, 2026), Tier 2 use case
- Software Engineering at Google (Manshreck & Wright, O'Reilly 2020), ch. 9 "Code Review"
- Google Code Review Developer Guide — severity convention source
- WCAG 2.2 §1.4.1 — color-not-sole-signal enforcement
- See
references/for full citations (diff_rendering_canon, severity_coding, pr_annotation_ux)
| 1 | |
| 2 | name md-review |
| 3 | description Converts a markdown PR writeup or code review (one with ```diff fenced blocks and severity-tagged > [!BLOCKER]/[!MAJOR]/[!MINOR]/[!NIT] callouts) into a single-file 2-column HTML review — unified-diff on the left, severity-tagged annotation cards on the right, top jump-nav listing every finding, mandatory named reviewer footer. Triggers when the markdown-html-orchestrator classifies an input as REVIEW, or when invoked directly via /cs:md-review. Refuses without explicit --reviewer (a code review must name a human), refuses if no diff hunks present (route to md-document instead), and refuses to encode severity in color only (every badge ships color + icon + aria-label per WCAG 1.4.1). Use after orchestrator routing. |
| 4 | version 2.10.2 |
| 5 | author Alireza Rezvani |
| 6 | license MIT |
| 7 | tags [markdown, html, code-review, diff, severity, annotations, single-file, design-system, wcag-1.4.1] |
| 8 | compatible_tools [claude-code, codex-cli, cursor, antigravity, opencode, gemini-cli] |
| 9 | |
| 10 | |
| 11 | # md-review — Code-review markdown → 2-column HTML |
| 12 | |
| 13 | The code-review converter from Tier 2 of Shihipar's essay ("Code Review and PR Writeups"). Takes a markdown PR writeup with diff blocks + severity callouts and produces a single-file HTML review with a jump-nav, 2-column diff + annotation layout, and a named reviewer footer. |
| 14 | |
| 15 | Three stdlib tools pipeline together: |
| 16 | |
| 17 | |
| 18 | diff_parser.py → annotation_extractor.py → review_html_renderer.py |
| 19 | (md → diff hunks) (md → severity-tagged (hunks + annotations |
| 20 | annotations attached + tokens → 2-col HTML) |
| 21 | to nearest hunk) |
| 22 | |
| 23 | |
| 24 | ## When to invoke |
| 25 | |
| 26 | | Symptom | Action | |
| 27 | |---|---| |
| 28 | | `markdown-html-orchestrator` routes input as REVIEW | Invoke this skill | |
| 29 | | User runs `/cs:md-review <path>.md` directly | Invoke this skill | |
| 30 | | Input contains ` ```diff ` fenced blocks + `> [!MAJOR]`/`> [!BLOCKER]`/etc. callouts | Invoke this skill | |
| 31 | | Input is a long-form spec / report (no diff blocks) | Route to `md-document` instead | |
| 32 | | Input is a slide deck | Route to `md-slides` instead | |
| 33 | | Input < 100 lines | Refuse (Shihipar threshold) | |
| 34 | | Design-system not onboarded | Refuse; surface `/cs:design-system` | |
| 35 | |
| 36 | ## Pipeline |
| 37 | |
| 38 | |
| 39 | # 1. Parse markdown → diff hunks JSON |
| 40 | python3 markdown-html/skills/md-review/scripts/diff_parser.py \ |
| 41 | --input <path>.md --output hunks.json |
| 42 | |
| 43 | # 2. Extract severity-tagged annotations, attach to nearest preceding hunk |
| 44 | python3 markdown-html/skills/md-review/scripts/annotation_extractor.py \ |
| 45 | --input <path>.md --diff-blocks hunks.json --output annotations.json |
| 46 | |
| 47 | # 3. Render 2-col HTML (--reviewer is mandatory — refuses without) |
| 48 | python3 markdown-html/skills/md-review/scripts/review_html_renderer.py \ |
| 49 | --diff-blocks hunks.json --annotations annotations.json \ |
| 50 | --reviewer "Jane Doe" --title "PR #123: Add retry logic" \ |
| 51 | --output review.html |
| 52 | |
| 53 | |
| 54 | ## What gets rendered |
| 55 | |
| 56 | **Top jump-nav** — every annotation with severity badge + 80-char preview + jump link; severity counts in the heading ("3 BLOCKER · 2 MAJOR · 1 NIT") |
| 57 | **2-column hunk rows** — unified diff on the left (per-line old/new line numbers, +/− marks, addition/deletion background tint from design-system tokens), annotation cards on the right (color + icon + aria-label per WCAG 1.4.1) |
| 58 | **Approval bar** — if `LGTM` markers are present and no severity annotations, a success-tinted "LGTM — no findings flagged" bar |
| 59 | **General comments** — annotations not attached to any hunk render at the bottom in their own section |
| 60 | **Reviewer footer** — mandatory; refuses to render without `--reviewer` |
| 61 | **Responsive** — 2-col collapses to stacked on viewports < 900px |
| 62 | |
| 63 | ## Hard rules |
| 64 | |
| 65 | **`--reviewer` is mandatory.** A code review must name a human reviewer. Refuses with exit 3 otherwise. Mirrors research-ops's "named owner" discipline. |
| 66 | **Refuses if no hunks present.** No `--- a/file` + `@@ ... @@` blocks means this isn't a code review — refuses with exit 4 and recommends `md-document`. |
| 67 | **Refuses input < 100 lines.** Markdown wins below the threshold (Shihipar). |
| 68 | **Refuses without onboarding.** Same gate as every converter. |
| 69 | **Severity is never color-only.** Each badge ships color + icon + `aria-label` + text. WCAG 1.4.1 enforced at the renderer level. |
| 70 | **Single-file output.** All CSS inline. Only external is Google Fonts CSS. No Prism in md-review (diff coloring conflicts with syntax highlighting). |
| 71 | **Custom severity convention.** `--severity-convention "critical,important,suggestion,nit"` swaps tier names; position 0 is most severe. Default is BLOCKER / MAJOR / MINOR / NIT (Google Code Review Developer Guide). |
| 72 | |
| 73 | ## Forcing-question library (Matt Pocock grill discipline) |
| 74 | |
| 75 | **Who is the named reviewer?** Recommended: the user signing off on the review. Canon: research-ops named-owner pattern; *SWE at Google* ch. 9. |
| 76 | **Which severity convention applies — default (BLOCKER/MAJOR/MINOR/NIT) or custom?** Recommended: default unless your team has a documented alternative. Canon: Google *Code Review Developer Guide*. |
| 77 | **Are annotations anchored to specific hunks, or are some general?** Recommended: anchor everything you can; general goes to the unanchored section. Canon: *SWE at Google* ch. 9 — "Comments must reference a specific line". |
| 78 | **What's the PR title for the `<title>` and header?** Recommended: the actual PR / commit title. Canon: docs-as-context-for-readers. |
| 79 | **Should `LGTM` markers ship as the approval bar?** Recommended: yes if there are no severity annotations; otherwise the findings take precedence. |
| 80 | |
| 81 | ## Distinct from |
| 82 | |
| 83 | **`md-document`** — that converter renders prose + tables + code + callouts. This one renders diff hunks + margin annotations. |
| 84 | **`md-slides`** — that converter splits on `---` boundaries. This one is a single-page artifact. |
| 85 | **GitHub PR comments** — those are a thread. This is a single-author snapshot artifact. |
| 86 | |
| 87 | ## Output artifact |
| 88 | |
| 89 | `{default_output_dir}/review-{slug}.html` (path resolved by orchestrator's `output_path_resolver.py`; collision suffix `-2`, `-3`, … by default). |
| 90 | |
| 91 | ## References |
| 92 | |
| 93 | Shihipar — *Claude Code HTML output* (Medium, 2026), Tier 2 use case |
| 94 | *Software Engineering at Google* (Manshreck & Wright, O'Reilly 2020), ch. 9 "Code Review" |
| 95 | Google *Code Review Developer Guide* — severity convention source |
| 96 | WCAG 2.2 §1.4.1 — color-not-sole-signal enforcement |
| 97 | See `references/` for full citations (diff_rendering_canon, severity_coding, pr_annotation_ux) |
| 98 |
Discussion
Alternatives
Browse more free Claude skills or everything in Development.