review-walkthrough — Skillopedia

Review Walkthrough Generate a self-contained HTML walkthrough of the current branch, with the final diff split into logical steps, explanations, and critical review findings. Choose the grouping and reading order for comprehension; commit order need not dictate either. Invoke as in Claude Code or in Codex. Capture the branch diff Respect a user-specified base. Otherwise, use the current open PR's base when PR metadata is available. Without a PR, discover the repository's default branch from or the configured remote's equivalent. Do not assume it is . If the selected base is missing or ambiguo…

);\n while (++i \u003c lines.length && !closing.test(lines[i])) code.push(lines[i]);\n html += '\u003cpre>\u003ccode>' + escape(code.join('\\n')) + '\u003c/code>\u003c/pre>';\n } else if (!lines[i].trim()) {\n flush();\n } else {\n paragraph.push(lines[i]);\n }\n }\n flush();\n return html;\n}\n\nfunction hasReviewComment(stepIdx, reviewIdx) {\n return pendingComments.some(function(comment) {\n return comment.stepIndex === stepIdx && comment.reviewIndex === reviewIdx;\n });\n}\n\nfunction updateReviewButtons() {\n document.querySelectorAll('#review .btn-convert-comment').forEach(function(button) {\n var added = hasReviewComment(current, Number(button.dataset.reviewIndex));\n button.disabled = added;\n button.textContent = added ? 'Added' : 'Add as comment';\n });\n}\n\nfunction convertReviewToComment(stepIdx, reviewIdx) {\n var r = REVIEWS[stepIdx][reviewIdx];\n if (!r || !r.file || !r.line || hasReviewComment(stepIdx, reviewIdx)) return;\n\n var endLine = r.end_line || r.line;\n var body = '**' + escapeMarkdown(r.title) + '** (' + r.severity.toUpperCase() + ')\\n\\n'\n + htmlToMarkdown(r.body);\n\n pendingComments.push({\n file: r.file,\n startLine: r.end_line && r.line !== r.end_line ? r.line : null,\n endLine: endLine,\n side: r.side,\n startSide: r.side,\n body: body,\n stepIndex: stepIdx,\n reviewIndex: reviewIdx\n });\n\n renderCommentMarkers();\n renderInlineComments();\n renderCommentsTab();\n\n updateReviewButtons();\n\n showToast('Review converted to comment');\n\n // Scroll the diff to the newly added inline comment.\n var newIdx = pendingComments.length - 1;\n var overlay = document.querySelector(\n '#diffPane .inline-user-comment[data-comment-idx=\"' + newIdx + '\"]'\n );\n if (overlay) {\n overlay.scrollIntoView({ behavior: 'smooth', block: 'center' });\n overlay.style.outline = '2px solid var(--accent)';\n setTimeout(function() { overlay.style.outline = ''; }, 1500);\n }\n}\n\nfunction jumpToReview(stepIdx, reviewIdx) {\n var review = REVIEWS[stepIdx][reviewIdx];\n jumpToLine(review.file, review.line, review.end_line, review.side);\n}\n\nfunction jumpToLine(file, line, endLine, side) {\n if (!endLine || endLine \u003c line) endLine = line;\n var allLines = document.querySelectorAll('#diffPane .diff-line');\n var matched = [];\n for (var i = 0; i \u003c allLines.length; i++) {\n var el = allLines[i];\n var num = lineOnSide(el, side);\n if (el.dataset.file === file && num > 0 && num >= line && num \u003c= endLine) {\n matched.push(el);\n }\n }\n if (matched.length === 0) return;\n matched[0].scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n // Remove any previous highlight overlay.\n var prev = document.getElementById('jumpHighlight');\n if (prev) prev.remove();\n\n var pane = document.getElementById('diffPane');\n var paneRect = pane.getBoundingClientRect();\n var scrollTop = pane.scrollTop;\n var firstRect = matched[0].getBoundingClientRect();\n var lastRect = matched[matched.length - 1].getBoundingClientRect();\n\n var overlay = document.createElement('div');\n overlay.id = 'jumpHighlight';\n overlay.style.cssText =\n 'position:absolute;'\n + 'top:' + (firstRect.top - paneRect.top + scrollTop) + 'px;'\n + 'left:0;'\n + 'width:' + pane.scrollWidth + 'px;'\n + 'height:' + (lastRect.bottom - firstRect.top) + 'px;'\n + 'border:2px solid var(--accent);'\n + 'border-radius:4px;'\n + 'pointer-events:none;'\n + 'z-index:3;'\n + 'transition:opacity 0.3s;';\n pane.style.position = 'relative';\n pane.appendChild(overlay);\n\n setTimeout(function() {\n overlay.style.opacity = '0';\n setTimeout(function() { overlay.remove(); }, 300);\n }, 1500);\n}\n\nfunction jumpToComment(idx) {\n var c = pendingComments[idx];\n if (!c) return;\n\n // Switch to the Step tab so the diff is visible.\n switchTopTab('step');\n\n // Navigate to the step where the comment was made.\n if (c.stepIndex !== current) {\n current = c.stepIndex;\n render();\n }\n\n // Find the inline comment overlay and scroll to it.\n var overlay = document.querySelector(\n '#diffPane .inline-user-comment[data-comment-idx=\"' + idx + '\"]'\n );\n if (overlay) {\n overlay.scrollIntoView({ behavior: 'smooth', block: 'center' });\n // Flash highlight.\n overlay.style.outline = '2px solid var(--accent)';\n setTimeout(function() { overlay.style.outline = ''; }, 1500);\n }\n}\n\nfunction renderCommentsTab() {\n if (!PR_META) return;\n\n var list = document.getElementById('commentsList');\n var badge = document.getElementById('commentBadge');\n\n badge.textContent = pendingComments.length;\n badge.style.display = pendingComments.length > 0 ? 'inline-block' : 'none';\n updateCommandBox();\n\n if (pendingComments.length === 0) {\n list.innerHTML = '\u003cp class=\"comments-empty\">'\n + 'No comments yet. Click the \u003cstrong>+\u003c/strong> icon '\n + 'on any diff line to add a review comment.\u003c/p>';\n return;\n }\n\n var html = '';\n for (var i = 0; i \u003c pendingComments.length; i++) {\n var c = pendingComments[i];\n var lineLabel = c.startLine\n ? 'L' + c.startLine + '-L' + c.endLine\n : 'L' + c.endLine;\n html += '\u003cdiv class=\"pending-comment-item\">'\n + '\u003cbutton class=\"pending-comment-delete\" onclick=\"removeComment('\n + i + ')\" title=\"Remove comment\">×\u003c/button>'\n + '\u003ca class=\"pending-comment-file\" href=\"#\" onclick=\"jumpToComment('\n + i + '); return false;\">'\n + escape(c.file) + ':' + lineLabel + '\u003c/a>'\n + '\u003cdiv class=\"pending-comment-body comment-md\">'\n + markdownToHtml(c.body) + '\u003c/div>\u003c/div>';\n }\n\n list.innerHTML = html;\n}\n\nfunction reviewSummaryMissing() {\n return document.getElementById('reviewEvent').value !== 'APPROVE'\n && !document.getElementById('reviewBody').value.trim();\n}\n\nfunction buildReviewPayload() {\n if (reviewSummaryMissing()) throw new Error('Add a review summary for Comment or Request Changes.');\n var event = document.getElementById('reviewEvent').value;\n var body = document.getElementById('reviewBody').value.trim();\n var comments = pendingComments.map(function(c) {\n var obj = {\n path: c.file,\n line: c.endLine,\n side: c.side,\n body: c.body\n };\n if (c.startLine) {\n obj.start_line = c.startLine;\n obj.start_side = c.startSide;\n }\n return obj;\n });\n\n var payload = {\n commit_id: PR_META.head_sha,\n event: event,\n comments: comments\n };\n if (body) payload.body = body;\n return payload;\n}\n\nfunction buildGhCommand() {\n var payload = buildReviewPayload();\n var json = JSON.stringify(payload, null, 2);\n var endpoint = 'repos/' + PR_META.owner + '/' + PR_META.repo\n + '/pulls/' + PR_META.pr_number + '/reviews';\n // printf preserves JSON backslashes in bash, zsh, and POSIX shells.\n return \"printf '%s\\\\n' \" + shellQuote(json) + ' | gh api ' + shellQuote(endpoint)\n + ' --method POST --input -';\n}\n\nfunction shellQuote(value) {\n return \"'\" + value.replace(/'/g, \"'\\\\''\") + \"'\";\n}\n\nfunction updateCommandBox() {\n var box = document.getElementById('ghCommandBox');\n var needsSummary = document.getElementById('reviewEvent').value !== 'APPROVE';\n document.getElementById('reviewBody').required = needsSummary;\n document.getElementById('reviewBodyLabel').textContent =\n 'Review summary (' + (needsSummary ? 'required' : 'optional') + ')';\n var ready = pendingComments.length > 0 && !reviewSummaryMissing();\n document.getElementById('btnCopyCommand').disabled = !ready;\n if (ready) {\n box.textContent = buildGhCommand();\n box.classList.add('visible');\n } else {\n box.textContent = '';\n box.classList.remove('visible');\n }\n}\n\nfunction copyReviewCommand() {\n if (pendingComments.length === 0 || reviewSummaryMissing()) return;\n var cmd = buildGhCommand();\n function fallback() {\n var box = document.getElementById('ghCommandBox');\n var range = document.createRange();\n range.selectNodeContents(box);\n var sel = window.getSelection();\n sel.removeAllRanges();\n sel.addRange(range);\n showToast('Could not copy. Select and copy the command manually.');\n }\n if (!navigator.clipboard) {\n fallback();\n return;\n }\n navigator.clipboard.writeText(cmd).then(function() {\n showToast('Copied to clipboard — paste in your terminal');\n }, fallback);\n}\n\nfunction showToast(msg) {\n var el = document.getElementById('toast');\n el.textContent = msg;\n el.classList.add('show');\n clearTimeout(showToast._timer);\n showToast._timer = setTimeout(function() {\n el.classList.remove('show');\n }, 2500);\n}\n\n// --- Diff drag selection ---\n\nvar dragState = null; // {file, anchorEl, anchorIdx, allLines}\n\nfunction getDiffLines() {\n return Array.from(document.querySelectorAll('#diffPane .diff-line'));\n}\n\nfunction selectRange(allLines, fromIdx, toIdx) {\n var lo = Math.min(fromIdx, toIdx);\n var hi = Math.max(fromIdx, toIdx);\n allLines.forEach(function(el, i) {\n el.classList.toggle('selected', i >= lo && i \u003c= hi);\n });\n}\n\nvar diffPane = document.getElementById('diffPane');\n\ndiffPane.addEventListener('mousedown', function(e) {\n // Start drag from + button or from line-num area\n var btn = e.target.closest('.line-add-btn');\n if (!btn || !PR_META) return;\n\n e.preventDefault(); // prevent text selection\n\n var lineEl = btn.closest('.diff-line');\n var file = lineEl.dataset.file;\n\n closeCommentForm();\n\n var allLines = getDiffLines();\n var idx = allLines.indexOf(lineEl);\n if (idx === -1) return;\n\n lineEl.classList.add('selected');\n dragState = { file: file, anchorEl: lineEl, anchorIdx: idx, allLines: allLines };\n diffPane.classList.add('dragging');\n});\n\ndocument.addEventListener('mousemove', function(e) {\n if (!dragState) return;\n\n // Find the diff-line under the cursor\n var el = document.elementFromPoint(e.clientX, e.clientY);\n if (!el) return;\n var lineEl = el.closest('.diff-line');\n if (!lineEl || lineEl.dataset.file !== dragState.file) return;\n // A GitHub range must have both endpoints on the same side in one hunk.\n if (lineEl.dataset.hunk !== dragState.anchorEl.dataset.hunk\n || !lineOnSide(lineEl, dragState.anchorEl.dataset.side)) return;\n\n var idx = dragState.allLines.indexOf(lineEl);\n if (idx === -1) return;\n var lo = Math.min(idx, dragState.anchorIdx);\n var hi = Math.max(idx, dragState.anchorIdx);\n if (dragState.allLines.slice(lo, hi + 1).some(function(row) {\n return !lineOnSide(row, dragState.anchorEl.dataset.side);\n })) return;\n\n selectRange(dragState.allLines, dragState.anchorIdx, idx);\n});\n\ndocument.addEventListener('mouseup', function(e) {\n if (!dragState) return;\n\n diffPane.classList.remove('dragging');\n\n var allLines = dragState.allLines;\n var anchorSide = dragState.anchorEl.dataset.side;\n var file = dragState.file;\n dragState = null;\n\n // Find the selected range\n var selected = allLines.filter(function(el) {\n return el.classList.contains('selected');\n });\n if (selected.length === 0) return;\n\n var firstEl = selected[0];\n var lastEl = selected[selected.length - 1];\n\n // All selected must be same file (clamp at file boundary)\n if (firstEl.dataset.file !== file || lastEl.dataset.file !== file) {\n // Re-select only lines in the anchor's file\n selected = selected.filter(function(el) {\n return el.dataset.file === file;\n });\n if (selected.length === 0) return;\n // Clear out-of-file selections\n allLines.forEach(function(el) {\n if (el.dataset.file !== file) el.classList.remove('selected');\n });\n firstEl = selected[0];\n lastEl = selected[selected.length - 1];\n }\n\n var startLine = lineOnSide(firstEl, anchorSide);\n var endLine = lineOnSide(lastEl, anchorSide);\n var side = anchorSide;\n\n selectionStart = {\n el: firstEl,\n file: file,\n line: startLine,\n side: side\n };\n\n showCommentForm(\n file,\n selected.length > 1 ? startLine : null,\n endLine,\n side,\n lastEl\n );\n});\n\n// Update command preview when review options change\ndocument.getElementById('reviewEvent').addEventListener('change', updateCommandBox);\ndocument.getElementById('reviewBody').addEventListener('input', updateCommandBox);\n\n// --- Keyboard navigation ---\n\ndocument.addEventListener('keydown', function(e) {\n // Leave keyboard input to the focused form control.\n if (/^(TEXTAREA|INPUT|SELECT)$/.test(e.target.tagName) || e.target.isContentEditable)\n return;\n if (e.key === 'ArrowRight' || e.key === 'j') navigate(1);\n if (e.key === 'ArrowLeft' || e.key === 'k') navigate(-1);\n});\n\n// --- Init ---\n\nif (PR_META) {\n document.getElementById('diffPane').classList.add('commenting-enabled');\n document.getElementById('topTabComments').style.display = '';\n}\n\nrender();\n\u003c/script>\n\u003c/body>\n\u003c/html>\n","content_type":"text/html; charset=utf-8","language":"markup","size":56037,"content_sha256":"1f7e456ddc34ea8331c6e9879ad667919a279c180734bdbcc8815cc3deb41742"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Review Walkthrough","type":"text"}]},{"type":"paragraph","content":[{"text":"Generate a self-contained HTML walkthrough of the current branch, with the final diff split into logical steps, explanations, and critical review findings. Choose the grouping and reading order for comprehension; commit order need not dictate either. Invoke as ","type":"text"},{"text":"/review-walkthrough:review-walkthrough","type":"text","marks":[{"type":"code_inline"}]},{"text":" in Claude Code or ","type":"text"},{"text":"$review-walkthrough","type":"text","marks":[{"type":"code_inline"}]},{"text":" in Codex.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Capture the branch diff","type":"text"}]},{"type":"paragraph","content":[{"text":"Respect a user-specified base. Otherwise, use the current open PR's base when PR metadata is available. Without a PR, discover the repository's default branch from ","type":"text"},{"text":"git symbolic-ref --quiet --short refs/remotes/origin/HEAD","type":"text","marks":[{"type":"code_inline"}]},{"text":" or the configured remote's equivalent. Do not assume it is ","type":"text"},{"text":"main","type":"text","marks":[{"type":"code_inline"}]},{"text":". If the selected base is missing or ambiguous, ask for it rather than silently choosing another branch.","type":"text"}]},{"type":"paragraph","content":[{"text":"Resolve the base and ","type":"text"},{"text":"HEAD","type":"text","marks":[{"type":"code_inline"}]},{"text":" to commit IDs with ","type":"text"},{"text":"git rev-parse --verify --end-of-options \"${ref}^{commit}\"","type":"text","marks":[{"type":"code_inline"}]},{"text":", then compute their merge base with ","type":"text"},{"text":"git merge-base","type":"text","marks":[{"type":"code_inline"}]},{"text":". Capture the complete patch using ","type":"text"},{"text":"git diff --no-ext-diff --no-textconv --no-color --src-prefix=a/ --dst-prefix=b/ \"$merge_base\" \"$head_sha\" --","type":"text","marks":[{"type":"code_inline"}]},{"text":". Initialize variables and run the commands that consume them in the same shell invocation; shell variables do not persist between tool calls. Save the patch to a temporary file outside the checkout and retain its actual path. Stop on a Git error or an empty patch and explain the result.","type":"text"}]},{"type":"paragraph","content":[{"text":"This scope includes committed changes through the captured ","type":"text"},{"text":"HEAD","type":"text","marks":[{"type":"code_inline"}]},{"text":". Mention any uncommitted work that is excluded. Do not change branches, reset the checkout, or alter source files to prepare the review. Keep generated data and HTML outside the checkout unless the user requests a particular output location; generated review artifacts never belong in the captured patch.","type":"text"}]},{"type":"paragraph","content":[{"text":"For a GitHub PR, collect ","type":"text"},{"text":"owner","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"repo","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"pr_number","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"head_sha","type":"text","marks":[{"type":"code_inline"}]},{"text":" from its metadata. Include them only when the PR head matches the captured ","type":"text"},{"text":"HEAD","type":"text","marks":[{"type":"code_inline"}]},{"text":" and the chosen base matches the PR base. Otherwise use ","type":"text"},{"text":"null","type":"text","marks":[{"type":"code_inline"}]},{"text":" and explain why comment export is unavailable. A failed authentication or network request is not evidence that no PR exists; report the failure and ask for the base if it cannot be determined. GitHub access is optional when the user supplies the base or confirms there is no PR.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Shape the review","type":"text"}]},{"type":"paragraph","content":[{"text":"Read the changed files and the surrounding source, tests, configuration, and dependency metadata needed to judge them. Keep the review read-only; do not run the project's tests or install its dependencies merely to build the walkthrough.","type":"text"}]},{"type":"paragraph","content":[{"text":"Group related files into steps covering one concept each. Put definitions before their consumers, wiring after the components it connects, and tests after or beside their subjects. Copy each complete per-file diff from the captured patch verbatim into exactly one step. Reordering files between steps is allowed; splitting, rewriting, omitting, or inventing their patches is not. Preserve rename, binary, and mode-change entries even when they have no text hunks. Binary summaries identify changed files; their payloads are outside this review.","type":"text"}]},{"type":"paragraph","content":[{"text":"Write one explanation per step, usually 50–150 words, covering the change's purpose, design choices, trade-offs, and connections to other steps. Refer to actual identifiers. Write one review list per step covering bugs, security, validation, API design, or performance issues supported by the code. Report findings with severity rather than suppressing minor issues. Use an empty list for a step with no findings.","type":"text"}]},{"type":"paragraph","content":[{"text":"Explanations and review bodies are HTML fragments. Use ","type":"text"},{"text":"\u003cp>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003cstrong>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003cem>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003ccode>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003cpre>","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"\u003cul>","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"\u003cli>","type":"text","marks":[{"type":"code_inline"}]},{"text":" for structure. Write literal ","type":"text"},{"text":"\u003c","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":">","type":"text","marks":[{"type":"code_inline"}]},{"text":" in prose or snippets as ","type":"text"},{"text":"<","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":">","type":"text","marks":[{"type":"code_inline"}]},{"text":". Backticks and Markdown fences are literal text here. Supported inline tags also include ","type":"text"},{"text":"\u003csup>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003csub>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003ckbd>","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"\u003cdel>","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"\u003ca href=\"https://…\">","type":"text","marks":[{"type":"code_inline"}]},{"text":". The page sanitizes fragments and converts them to Markdown when preparing a PR comment. Only safe link targets survive; arbitrary attributes, scripts, and images do not. Tables export as text rows with cell separators; captions and row order are preserved. Prefer prose, lists, and code blocks when their structure is sufficient.","type":"text"}]},{"type":"paragraph","content":[{"text":"Anchor findings to a file in the same step and a line in that file's displayed diff. Use ","type":"text"},{"text":"side: \"RIGHT\"","type":"text","marks":[{"type":"code_inline"}]},{"text":" for additions or new-file context and ","type":"text"},{"text":"side: \"LEFT\"","type":"text","marks":[{"type":"code_inline"}]},{"text":" for deletions or old-file context. For a range, ","type":"text"},{"text":"line","type":"text","marks":[{"type":"code_inline"}]},{"text":" and ","type":"text"},{"text":"end_line","type":"text","marks":[{"type":"code_inline"}]},{"text":" use that same side within one hunk. A finding spanning multiple steps belongs with the file it addresses, or remains unanchored. An unanchored finding is still displayed but cannot become an inline PR comment.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Render the artifact","type":"text"}]},{"type":"paragraph","content":[{"text":"Use a file-writing tool to create a JSON object with the fields below. Preserve the literal patch as JSON string data, with no shell expansion.","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Field","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Value","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Feature or review title","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"steps","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Array of objects with ","type":"text"},{"text":"sha","type":"text","marks":[{"type":"code_inline"}]},{"text":" (step ID such as ","type":"text"},{"text":"step-1","type":"text","marks":[{"type":"code_inline"}]},{"text":"), ","type":"text"},{"text":"message","type":"text","marks":[{"type":"code_inline"}]},{"text":" (step title), ","type":"text"},{"text":"files","type":"text","marks":[{"type":"code_inline"}]},{"text":" (paths in patch order), and ","type":"text"},{"text":"diff","type":"text","marks":[{"type":"code_inline"}]},{"text":" (complete per-file patches)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"explanations","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"HTML strings, one per step","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"reviews","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Arrays of findings, one per step; each finding has ","type":"text"},{"text":"severity","type":"text","marks":[{"type":"code_inline"}]},{"text":" (","type":"text"},{"text":"high","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"medium","type":"text","marks":[{"type":"code_inline"}]},{"text":", or ","type":"text"},{"text":"low","type":"text","marks":[{"type":"code_inline"}]},{"text":"), ","type":"text"},{"text":"title","type":"text","marks":[{"type":"code_inline"}]},{"text":", and HTML ","type":"text"},{"text":"body","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"pr_meta","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Object with ","type":"text"},{"text":"owner","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"repo","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"pr_number","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"head_sha","type":"text","marks":[{"type":"code_inline"}]},{"text":", or ","type":"text"},{"text":"null","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"paragraph","content":[{"text":"An anchored finding also has ","type":"text"},{"text":"file","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"line","type":"text","marks":[{"type":"code_inline"}]},{"text":", and ","type":"text"},{"text":"side","type":"text","marks":[{"type":"code_inline"}]},{"text":", plus optional ","type":"text"},{"text":"end_line","type":"text","marks":[{"type":"code_inline"}]},{"text":". The three arrays have equal lengths and corresponding entries. File paths match the diff headers without their ","type":"text"},{"text":"a/","type":"text","marks":[{"type":"code_inline"}]},{"text":" or ","type":"text"},{"text":"b/","type":"text","marks":[{"type":"code_inline"}]},{"text":" prefix; a renamed file uses its new path. Set ","type":"text"},{"text":"side","type":"text","marks":[{"type":"code_inline"}]},{"text":" explicitly so lines that occur on both sides are unambiguous.","type":"text"}]},{"type":"paragraph","content":[{"text":"Run the bundled renderer with the actual paths created for this review:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"uv run --no-project {baseDir}/scripts/render_walkthrough.py \\\n --input /tmp/data.json \\\n --diff /tmp/captured.patch \\\n --output /tmp/walkthrough.html","type":"text"}]},{"type":"paragraph","content":[{"text":"The renderer validates the data, compares every step's patches with the complete captured diff, checks anchors, and safely embeds the result in the bundled template. Fix reported input errors rather than bypassing the renderer or generating an alternative page.","type":"text"}]},{"type":"paragraph","content":[{"text":"Open the output with ","type":"text"},{"text":"open","type":"text","marks":[{"type":"code_inline"}]},{"text":" on macOS or ","type":"text"},{"text":"xdg-open","type":"text","marks":[{"type":"code_inline"}]},{"text":" on Linux when a browser is available, and tell the user its path. In a headless run, report the file without opening it. When PR metadata is present, the page lets the user copy a ","type":"text"},{"text":"gh api","type":"text","marks":[{"type":"code_inline"}]},{"text":" command for their selected comments. It does not execute the command or post anything to GitHub. Comment and Request Changes require a review summary before the command can be copied; the summary is optional for Approve.","type":"text"}]}]},"metadata":{"date":"2026-11-02","name":"review-walkthrough","author":"@skillopedia","source":{"stars":7957,"repo_name":"skills","origin_url":"https://github.com/trailofbits/skills/blob/HEAD/plugins/review-walkthrough/skills/review-walkthrough/SKILL.md","repo_owner":"trailofbits","body_sha256":"af098bc743979e8130ac5e98db908aec08a13ed5bda1c2288e4e5483c4a108c5","cluster_key":"1a6478a8e1a15da68265ccda42a77d55bf5e78b30d31404e4ccaa8ba3f12f6f6","clean_bundle":{"format":"clean-skill-bundle-v1","source":"trailofbits/skills/plugins/review-walkthrough/skills/review-walkthrough/SKILL.md","text_bytes":66576,"source_commit":"d016e08cc7408ecb1853a299d06d4a56e363ad5e","skills_sh_rank":14464,"attachment_count":4,"text_attachments":4,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"plugins/review-walkthrough/skills/review-walkthrough/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"software-engineering","category_label":"Engineering"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"software-engineering","import_tag":"skills-sh-top20k-2026-11","description":"Generates an interactive HTML walkthrough for reviewing code changes. Use only when explicitly called.","disable-model-invocation":true}},"renderedAt":1793666291521}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.