long/BOJ
2
1
Fork 1
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
ca3070a6817631716e5f361b64e5144f890d27a8
BOJ/.claude/skills/code-review-skill/index.html
T

703 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>code-review-skill(1) — User Commands</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #14110d;
--bg-alt: #1a1611;
--fg: #c4b596;
--fg-bright:#e8d5a8;
--fg-dim: #7a6f56;
--fg-faint: #4a4334;
--amber: #d8964a;
--amber-2: #e8a455;
--red: #d56350;
--green: #8fae5a;
--blue: #6b94c4;
--rule: #2a2520;
}
html { background: var(--bg); }
body {
font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 14px;
line-height: 1.65;
color: var(--fg);
background: var(--bg);
min-height: 100vh;
padding: 0 0 4rem;
-webkit-font-smoothing: antialiased;
}
/* faint scanline-free phosphor texture — very subtle */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(216,150,74,0.04) 0%, transparent 60%);
}
/* ─── HEADER / FOOTER BAND ─── */
.band {
position: sticky;
top: 0;
background: var(--bg);
border-bottom: 1px solid var(--rule);
z-index: 10;
font-size: 12px;
}
.band-inner {
max-width: 820px;
margin: 0 auto;
padding: 0.625rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--fg-dim);
}
.band-l, .band-r {
color: var(--fg-bright);
letter-spacing: 0.04em;
white-space: nowrap;
}
.band-c { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted var(--fg-faint);
}
.band a:hover { color: var(--amber); border-bottom-color: var(--amber); }
/* ─── PAGE ─── */
main {
max-width: 820px;
margin: 0 auto;
padding: 3rem 2rem 0;
position: relative;
z-index: 1;
}
pre, .pre {
font-family: inherit;
white-space: pre;
color: inherit;
background: none;
margin: 0;
}
/* ─── SECTIONS ─── */
h2.sec {
color: var(--fg-bright);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
margin: 2.75rem 0 0.875rem;
padding: 0;
}
h2.sec::before { content: ''; }
section.body {
padding-left: 7ch;
position: relative;
}
section.body p {
margin-bottom: 0.875rem;
max-width: 70ch;
}
section.body p:last-child { margin-bottom: 0; }
.em { color: var(--fg-bright); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.green { color: var(--green); }
.blue { color: var(--blue); }
a.link {
color: var(--amber);
text-decoration: none;
border-bottom: 1px dotted var(--amber);
}
a.link:hover {
color: var(--bg);
background: var(--amber);
border-bottom-color: transparent;
}
/* ─── TITLE BLOCK ─── */
.title-block {
margin-bottom: 3rem;
}
.ascii-title {
color: var(--amber);
font-size: 12px;
line-height: 1;
margin: 1.5rem 0 2.25rem;
white-space: pre;
overflow-x: auto;
font-weight: 500;
letter-spacing: 0;
text-shadow: 0 0 12px rgba(216,150,74,0.25);
}
.one-liner {
color: var(--fg-bright);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.lang-toggle {
font-size: 12px;
color: var(--fg-dim);
letter-spacing: 0.04em;
}
.lang-toggle a {
color: var(--fg-dim);
text-decoration: none;
border-bottom: 1px dotted var(--fg-faint);
padding-bottom: 1px;
margin: 0 0.25em;
}
.lang-toggle a.on {
color: var(--amber);
border-bottom-color: var(--amber);
}
.lang-toggle a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.lang-toggle .sep { color: var(--fg-faint); }
.one-liner-sub {
color: var(--fg-dim);
}
/* ─── TABLES ─── */
.lang-row {
display: grid;
grid-template-columns: 26ch 1fr 7ch;
gap: 1ch;
padding: 0.125rem 0;
align-items: baseline;
transition: background 0.1s;
border-bottom: 1px dotted var(--rule);
}
.lang-row:hover { background: var(--bg-alt); }
.lang-row .file { color: var(--amber); }
.lang-row .desc { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-row .desc .topics { color: var(--fg-dim); }
.lang-row .lines { text-align: right; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.dotleader {
color: var(--fg-faint);
display: none;
}
.cat-head {
color: var(--fg-bright);
margin: 1.25rem 0 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--rule);
}
.cat-head:first-child { margin-top: 0; }
/* ─── PHASE DIAGRAM ─── */
.phase-flow {
margin: 1rem 0 1.5rem;
color: var(--fg-dim);
line-height: 1.4;
font-size: 13px;
overflow-x: auto;
}
.phase-flow .box { color: var(--amber); }
.phase-flow .arrow { color: var(--fg-bright); }
.phase-list dt {
color: var(--fg-bright);
margin-top: 0.875rem;
}
.phase-list dt:first-child { margin-top: 0; }
.phase-list dd {
color: var(--fg);
max-width: 70ch;
margin-bottom: 0.125rem;
}
.phase-list dd.t {
color: var(--fg-dim);
font-size: 13px;
}
/* ─── SEVERITY LIST ─── */
.sev-list {
list-style: none;
}
.sev-list li {
display: grid;
grid-template-columns: 16ch 1fr;
gap: 1ch;
padding: 0.25rem 0;
border-bottom: 1px dotted var(--rule);
align-items: baseline;
}
.sev-list li:last-child { border-bottom: none; }
.sev-list li .label { color: var(--fg-bright); }
.sev-list li .desc { color: var(--fg); }
.sev-list li .desc .aside { color: var(--fg-dim); }
/* ─── CODE BLOCKS ─── */
.codeblock {
background: var(--bg-alt);
border-left: 2px solid var(--amber);
padding: 0.875rem 1.25rem;
margin: 0.875rem 0;
color: var(--fg);
overflow-x: auto;
max-width: 70ch;
}
.codeblock .prompt { color: var(--green); }
.codeblock .cmt { color: var(--fg-dim); }
.codeblock .cmd { color: var(--amber); }
.codeblock .arg { color: var(--fg-bright); }
.examples {
list-style: none;
max-width: 70ch;
}
.examples li {
padding: 0.375rem 0;
color: var(--fg);
}
.examples li::before {
content: '$ ';
color: var(--green);
}
.examples li .q { color: var(--fg-bright); }
.examples li .note {
display: block;
margin-top: 0.125rem;
padding-left: 2ch;
color: var(--fg-dim);
font-size: 13px;
}
.examples li .note::before { content: '↳ '; color: var(--fg-faint); }
/* ─── FILES TREE ─── */
.tree {
color: var(--fg);
line-height: 1.55;
}
.tree .dir { color: var(--amber); }
.tree .file { color: var(--fg); }
.tree .cmt { color: var(--fg-dim); }
.tree .branch { color: var(--fg-faint); }
/* ─── STATUS BAR / VIM-LIKE ─── */
.statusbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--amber);
color: var(--bg);
font-size: 12px;
letter-spacing: 0.02em;
z-index: 20;
}
.statusbar-inner {
max-width: 820px;
margin: 0 auto;
padding: 0.25rem 2rem;
display: flex;
justify-content: space-between;
gap: 1rem;
white-space: nowrap;
overflow: hidden;
}
.statusbar-l, .statusbar-r { display: flex; gap: 1.25rem; align-items: center; }
.statusbar-l > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
max-width: 22ch;
}
.statusbar kbd {
background: var(--bg);
color: var(--amber);
padding: 1px 5px;
border-radius: 2px;
font-family: inherit;
font-size: 11px;
font-weight: 500;
}
/* ─── CURSOR ─── */
.cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--amber);
vertical-align: -2px;
animation: blink 1.1s steps(1) infinite;
margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }
/* ─── SEPARATOR ─── */
.hr {
color: var(--rule);
margin: 2rem 0 0;
max-width: 70ch;
padding-left: 7ch;
user-select: none;
}
/* ─── BIB ─── */
.bib {
max-width: 70ch;
}
.bib dt {
color: var(--fg-bright);
margin-top: 0.5rem;
}
.bib dt:first-child { margin-top: 0; }
.bib dd { color: var(--fg-dim); }
/* ─── RESPONSIVE ─── */
@media (max-width: 720px) {
body { font-size: 13px; }
main { padding: 2rem 1rem 0; }
.band-inner, .statusbar-inner { padding: 0.5rem 1rem; font-size: 11px; }
section.body { padding-left: 4ch; }
.lang-row { grid-template-columns: 1fr 6ch; gap: 0.5ch; }
.lang-row .desc { display: none; }
.ascii-title { font-size: 9px; }
.sev-list li { grid-template-columns: 14ch 1fr; }
.phase-flow { font-size: 10px; }
.band-c { display: none; }
}
</style>
</head>
<body>
<!-- ═══ TOP BAND (man page header line) ═══ -->
<div class="band">
<div class="band-inner">
<span class="band-l">CODE-REVIEW-SKILL(1)</span>
<span class="band-c">User Commands &middot; Edition 2026.01</span>
<span class="band-r">CODE-REVIEW-SKILL(1)</span>
</div>
</div>
<main>
<!-- ═══ TITLE BLOCK ═══ -->
<div class="title-block">
<pre class="ascii-title"> ___ ___ ___ ___ ___ _____ _____ _____ __ ___ _ _____ _ _
/ __/ _ \| \| __| ___ | _ \ __\ \ / /_ _| __\ \ /\ / / __/ __| |/ /_ _| | | |
| (_| (_) | |) | _| |___|| / _| \ V / | || _| \ V V /__\__ \ ' &lt; | || |__| |__
\___\___/|___/|___| |_|_\___| \_/ |___|___| \_/\_/ |___/_|\_\___|____|____|</pre>
<div class="one-liner">
<span>
<span class="dim">$&nbsp;</span><span class="em">man code-review-skill</span><span class="cursor"></span>
</span>
<span class="lang-toggle">
<span class="dim">LANG=</span><a href="index.html" class="on">zh_CN</a><span class="sep">&nbsp;|&nbsp;</span><a href="index.en.html">en_US</a>
</span>
</div>
<div class="one-liner-sub">
v1.0 &middot; awesome-skills &middot; MIT &middot; 20 languages &middot; 16,000+ lines
</div>
</div>
<!-- ═══ NAME ═══ -->
<h2 class="sec">NAME</h2>
<section class="body">
<p>
<span class="em">code-review-skill</span> &mdash; 面向 Claude Code 的全面、模块化代码审查技能
</p>
</section>
<!-- ═══ SYNOPSIS ═══ -->
<h2 class="sec">SYNOPSIS</h2>
<section class="body">
<pre class="pre">
<span class="amber">Use code-review-skill to</span> review this PR
<span class="amber">Use code-review-skill to</span> review this &lt;<span class="dim">component</span>&gt;
<span class="amber">Use code-review-skill for</span> <span class="dim">[</span>security <span class="dim">|</span> performance <span class="dim">|</span> architecture<span class="dim">]</span> review</pre>
</section>
<!-- ═══ DESCRIPTION ═══ -->
<h2 class="sec">DESCRIPTION</h2>
<section class="body">
<p>一份生产级的代码审查技能。它把 AI 辅助的代码审查从模糊建议提升为结构化、一致、专业级的协作流程。</p>
<p>核心仅约 <span class="em">190 行</span>，按需调阅共计 <span class="em">16,000+ 行</span> 的语言指南。覆盖 <span class="em">20+ 种</span> 主流语言与框架——按需加载，零冗余。</p>
<p>每一条审查意见都带有明确的严重性标记。每一次审查都按四个阶段推进：从 PR 上下文 &middot; 高层级评估 &middot; 逐行分析 &middot; 总结决策。</p>
</section>
<!-- ═══ LANGUAGES ═══ -->
<h2 class="sec">LANGUAGES</h2>
<section class="body">
<div class="cat-head">┌── frontend ──┘</div>
<div class="lang-row"><span class="file">react.md</span><span class="desc">React 19, Hooks, Server Components, TanStack v5 <span class="dotleader">.................</span></span><span class="lines">870</span></div>
<div class="lang-row"><span class="file">vue.md</span><span class="desc">Vue 3.5, Composition API, Composables, Watchers <span class="dotleader">.................</span></span><span class="lines">920</span></div>
<div class="lang-row"><span class="file">angular.md</span><span class="desc">Angular 17+, Signals, Standalone, Zoneless <span class="dotleader">..........................</span></span><span class="lines">420</span></div>
<div class="lang-row"><span class="file">svelte.md</span><span class="desc">Svelte 5, Runes, SvelteKit, SSR/CSR boundaries <span class="dotleader">..................</span></span><span class="lines">1,060</span></div>
<div class="lang-row"><span class="file">typescript.md</span><span class="desc">TypeScript strict mode, generics, immutability <span class="dotleader">..................</span></span><span class="lines">540</span></div>
<div class="lang-row"><span class="file">css-less-sass.md</span><span class="desc">CSS/Less/Sass variables, responsive, compatibility <span class="dotleader">..............</span></span><span class="lines">660</span></div>
<div class="cat-head">┌── backend ──┘</div>
<div class="lang-row"><span class="file">python.md</span><span class="desc">Python async, typing, pytest, mutable defaults <span class="dotleader">.................</span></span><span class="lines">1,070</span></div>
<div class="lang-row"><span class="file">django.md</span><span class="desc">Django/DRF security, N+1, serializers, async views <span class="dotleader">..............</span></span><span class="lines">1,030</span></div>
<div class="lang-row"><span class="file">java.md</span><span class="desc">Java 17/21, Spring Boot 3, virtual threads, JPA <span class="dotleader">................</span></span><span class="lines">800</span></div>
<div class="lang-row"><span class="file">php.md</span><span class="desc">PHP 8.x, types, PDO, security, Composer <span class="dotleader">...........................</span></span><span class="lines">700</span></div>
<div class="lang-row"><span class="file">go.md</span><span class="desc">Goroutines, channels, context, interface design <span class="dotleader">.................</span></span><span class="lines">990</span></div>
<div class="lang-row"><span class="file">rust.md</span><span class="desc">Ownership, async/await, unsafe, cancellation safety <span class="dotleader">.............</span></span><span class="lines">840</span></div>
<div class="lang-row"><span class="file">csharp.md</span><span class="desc">C# 12 / .NET 8, EF Core, ASP.NET Core, LINQ <span class="dotleader">.....................</span></span><span class="lines">520</span></div>
<div class="lang-row"><span class="file">nestjs.md</span><span class="desc">NestJS DI, guards, interceptors, DTO validation <span class="dotleader">.................</span></span><span class="lines">590</span></div>
<div class="cat-head">┌── mobile / systems ──┘</div>
<div class="lang-row"><span class="file">kotlin.md</span><span class="desc">Kotlin/Android coroutines, Compose, Flow, null safety <span class="dotleader">...........</span></span><span class="lines">1,020</span></div>
<div class="lang-row"><span class="file">swift.md</span><span class="desc">Swift 5.9+/6, SwiftUI, concurrency, Sendable, optionals <span class="dotleader">..........</span></span><span class="lines">930</span></div>
<div class="lang-row"><span class="file">c.md</span><span class="desc">C pointer safety, undefined behavior, resources <span class="dotleader">.................</span></span><span class="lines">210</span></div>
<div class="lang-row"><span class="file">cpp.md</span><span class="desc">C++ RAII, Rule of 0/3/5, move semantics, noexcept <span class="dotleader">...............</span></span><span class="lines">300</span></div>
<div class="lang-row"><span class="file">qt.md</span><span class="desc">Qt object model, signals/slots, GUI performance <span class="dotleader">.................</span></span><span class="lines">190</span></div>
<div class="cat-head">┌── cross-cutting ──┘</div>
<div class="lang-row"><span class="file">architecture-review-guide.md</span><span class="desc">SOLID, anti-patterns, coupling <span class="dotleader">...</span></span><span class="lines">470</span></div>
<div class="lang-row"><span class="file">performance-review-guide.md</span><span class="desc">Web Vitals, N+1, complexity <span class="dotleader">.......</span></span><span class="lines">850</span></div>
<div class="lang-row"><span class="file">code-quality-universal.md</span><span class="desc">TOCTOU, leaky abstractions, sprawl <span class="dotleader">....</span></span><span class="lines">320</span></div>
<div class="lang-row"><span class="file">security-review-guide.md</span><span class="desc">Injection, XSS, secrets, all langs <span class="dotleader">.....</span></span><span class="lines">—</span></div>
</section>
<!-- ═══ PHASES ═══ -->
<h2 class="sec">PHASES</h2>
<section class="body">
<pre class="phase-flow"> <span class="box">┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐</span>
<span class="box">│ context │</span> <span class="arrow">─▶</span> <span class="box">│ high level │</span> <span class="arrow">─▶</span> <span class="box">│ line by line│</span> <span class="arrow">─▶</span> <span class="box">│ decide │</span>
<span class="box">│ 2-3m │</span> <span class="box">│ 5-10m │</span> <span class="box">│ 10-20m │</span> <span class="box">│ 2-3m │</span>
<span class="box">└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘</span></pre>
<dl class="phase-list" style="margin-top:1.5rem;">
<dt>1. context gathering <span class="dim">— 2-3 min</span></dt>
<dd>读 PR 描述与关联 issue，评估规模，检查 CI 状态，理解业务需求。</dd>
<dt>2. high-level review <span class="dim">— 5-10 min</span></dt>
<dd>评估架构合理性、性能影响面、文件组织、测试策略。先看全局。</dd>
<dt>3. line-by-line analysis <span class="dim">— 10-20 min</span></dt>
<dd>逻辑正确性 &middot; 安全 &middot; 性能 &middot; 可维护性 &middot; 边界情况。一一过目。</dd>
<dt>4. summary &amp; decision <span class="dim">— 2-3 min</span></dt>
<dd>汇总问题，表扬亮点，给出 approve / comment / request-changes。</dd>
</dl>
</section>
<!-- ═══ SEVERITY ═══ -->
<h2 class="sec">SEVERITY</h2>
<section class="body">
<ul class="sev-list">
<li>
<span class="label"><span class="red">●</span>&nbsp;[blocking]</span>
<span class="desc">必须修复 <span class="aside">— 合并前解决；安全漏洞 / 数据正确性 / 严重逻辑</span></span>
</li>
<li>
<span class="label"><span style="color:#d68a3d;">●</span>&nbsp;[important]</span>
<span class="desc">应当修复 <span class="aside">— 强烈建议；有分歧应讨论</span></span>
</li>
<li>
<span class="label"><span style="color:#c7a648;">●</span>&nbsp;[nit]</span>
<span class="desc">细节建议 <span class="aside">— 风格或偏好，不阻塞合并</span></span>
</li>
<li>
<span class="label"><span class="blue">●</span>&nbsp;[suggestion]</span>
<span class="desc">可选优化 <span class="aside">— 替代方案，由作者决定</span></span>
</li>
<li>
<span class="label"><span style="color:#9078b8;">●</span>&nbsp;[learning]</span>
<span class="desc">知识分享 <span class="aside">— 教育性说明，无需采取行动</span></span>
</li>
<li>
<span class="label"><span class="green">●</span>&nbsp;[praise]</span>
<span class="desc">表扬肯定 <span class="aside">— 看到好代码就说出来</span></span>
</li>
</ul>
</section>
<!-- ═══ INSTALLATION ═══ -->
<h2 class="sec">INSTALLATION</h2>
<section class="body">
<p>克隆到 Claude Code skills 目录。两条命令即可。</p>
<pre class="codeblock"><span class="cmt"># macOS / Linux</span>
<span class="prompt">$</span> <span class="cmd">git clone</span> <span class="arg">https://github.com/awesome-skills/code-review-skill.git</span> \
~/.claude/skills/code-review-skill
<span class="cmt"># Windows PowerShell</span>
<span class="prompt">PS&gt;</span> <span class="cmd">git clone</span> <span class="arg">https://github.com/awesome-skills/code-review-skill.git</span> `
"$env:USERPROFILE\.claude\skills\code-review-skill"</pre>
</section>
<!-- ═══ EXAMPLES ═══ -->
<h2 class="sec">EXAMPLES</h2>
<section class="body">
<ul class="examples">
<li>
<span class="q">Use code-review-skill to review this PR</span>
<span class="note">激活完整四阶段流程</span>
</li>
<li>
<span class="q">Review this React component</span>
<span class="note">加载 react.md &middot; 检查 Hooks &middot; Server Components</span>
</li>
<li>
<span class="q">Security review of this Go service</span>
<span class="note">同时加载 go.md + security-review-guide.md</span>
</li>
<li>
<span class="q">Architecture review</span>
<span class="note">加载架构指南 &middot; SOLID &middot; 反模式 &middot; 耦合度</span>
</li>
</ul>
</section>
<!-- ═══ FILES ═══ -->
<h2 class="sec">FILES</h2>
<section class="body">
<pre class="tree">
<span class="dir">~/.claude/skills/code-review-skill/</span>
<span class="branch">├──</span> <span class="file">SKILL.md</span> <span class="cmt"># 核心，激活时加载 (~190 行)</span>
<span class="branch">├──</span> <span class="file">README.md</span>
<span class="branch">├──</span> <span class="file">LICENSE</span> <span class="cmt"># MIT</span>
<span class="branch">├──</span> <span class="dir">reference/</span> <span class="cmt"># 按需加载的语言指南</span>
<span class="branch">│ ├──</span> <span class="file">react.md</span> <span class="file">vue.md</span> <span class="file">angular.md</span> ...
<span class="branch">│ └──</span> <span class="file">architecture-review-guide.md</span> ...
<span class="branch">├──</span> <span class="dir">assets/</span>
<span class="branch">│ ├──</span> <span class="file">review-checklist.md</span> <span class="cmt"># 快速参考</span>
<span class="branch">│ └──</span> <span class="file">pr-review-template.md</span> <span class="cmt"># 评论模板</span>
<span class="branch">└──</span> <span class="dir">scripts/</span>
<span class="branch">└──</span> <span class="file">pr-analyzer.py</span> <span class="cmt"># PR 复杂度分析</span></pre>
</section>
<!-- ═══ SEE ALSO ═══ -->
<h2 class="sec">SEE ALSO</h2>
<section class="body">
<p>
<a class="link" href="https://claude.ai/code" target="_blank">claude-code(1)</a>,
<a class="link" href="https://github.com/awesome-skills/code-review-skill" target="_blank">github / awesome-skills</a>,
<a class="link" href="https://github.com/awesome-skills/code-review-skill/blob/main/CONTRIBUTING.md" target="_blank">CONTRIBUTING(7)</a>,
<a class="link" href="https://github.com/awesome-skills/code-review-skill/blob/main/assets/review-checklist.md" target="_blank">review-checklist(7)</a>
</p>
</section>
<!-- ═══ AUTHORS ═══ -->
<h2 class="sec">AUTHORS</h2>
<section class="body">
<dl class="bib">
<dt>awesome-skills</dt>
<dd>maintainer, primary author</dd>
<dt>contributors</dt>
<dd>see <a class="link" href="https://github.com/awesome-skills/code-review-skill/graphs/contributors" target="_blank">graphs/contributors</a></dd>
</dl>
</section>
<!-- ═══ COPYRIGHT ═══ -->
<h2 class="sec">COPYRIGHT</h2>
<section class="body">
<p>
<span class="dim">Copyright (c) 2025 awesome-skills.</span><br>
Released under the MIT License.<br>
<span class="dim">This is free software: you are free to change and redistribute it.</span><br>
<span class="dim">There is NO WARRANTY, to the extent permitted by law.</span>
</p>
</section>
<div style="height: 4rem;"></div>
<!-- ═══ END-OF-PAGE BAND ═══ -->
<div style="border-top:1px solid var(--rule); margin-top:2rem; padding:0.625rem 0;">
<div style="display:flex; justify-content:space-between; color:var(--fg-dim); font-size:12px; white-space:nowrap; gap:1rem;">
<span class="band-l" style="color:var(--fg-bright);">CODE-REVIEW-SKILL(1)</span>
<span style="color:var(--fg-dim);">awesome-skills</span>
<span class="band-r" style="color:var(--fg-bright);">CODE-REVIEW-SKILL(1)</span>
</div>
</div>
</main>
<!-- ═══ VIM-LIKE STATUS BAR ═══ -->
<div class="statusbar">
<div class="statusbar-inner">
<div class="statusbar-l">
<span>-- NORMAL --</span>
<span>code-review-skill.1</span>
</div>
<div class="statusbar-r">
<span><kbd>g</kbd> top</span>
<span><kbd>G</kbd> end</span>
<span><kbd>q</kbd> quit</span>
<span id="pos">1,1</span>
</div>
</div>
</div>
<script>
// Vim-like keyboard nav for the man-page vibe
document.addEventListener('keydown', (e) => {
if (e.metaKey || e.ctrlKey || e.altKey) return;
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
if (e.key === 'g') {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else if (e.key === 'G') {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
} else if (e.key === 'j') {
window.scrollBy({ top: 60, behavior: 'smooth' });
} else if (e.key === 'k') {
window.scrollBy({ top: -60, behavior: 'smooth' });
} else if (e.key === 'q') {
const ok = confirm('Quit man page?');
if (ok) window.close();
}
});
// Update line/col-like indicator from scroll position
const posEl = document.getElementById('pos');
function updatePos() {
const pct = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100) || 0;
const line = Math.max(1, Math.round((window.scrollY / 20)));
posEl.textContent = line + ',1 ' + (pct >= 99 ? 'Bot' : pct <= 1 ? 'Top' : pct + '%');
}
updatePos();
window.addEventListener('scroll', updatePos, { passive: true });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink