assets/html-report-starter.html
assets/html-report-starter.htmlBrowse 3 files
2,954 tokens
10,588 bytes
Token encoding: o200k_base
Snapshot 5b913e7
← Back to SKILL.md
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 <title>PR Report Starter</title>7 <link rel="preconnect" href="https://fonts.googleapis.com" />8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />9 <link10 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&display=swap"11 rel="stylesheet"12 />13 <style>14 :root {15 --bg: #f4efe5;16 --paper: rgba(255, 251, 244, 0.88);17 --paper-strong: #fffaf1;18 --ink: #1f1b17;19 --muted: #6a6257;20 --line: rgba(31, 27, 23, 0.12);21 --accent: #9c4729;22 --accent-soft: rgba(156, 71, 41, 0.1);23 --good: #2f6a42;24 --warn: #946200;25 --bad: #8c2f25;26 --shadow: 0 22px 60px rgba(52, 37, 19, 0.1);27 --radius: 20px;28 }29 30 * {31 box-sizing: border-box;32 }33 34 html {35 scroll-behavior: smooth;36 }37 38 body {39 margin: 0;40 color: var(--ink);41 font-family: "IBM Plex Sans", sans-serif;42 background:43 radial-gradient(circle at top left, rgba(156, 71, 41, 0.12), transparent 34rem),44 radial-gradient(circle at top right, rgba(47, 106, 66, 0.08), transparent 28rem),45 linear-gradient(180deg, #efe6d6 0%, var(--bg) 48%, #ece5d8 100%);46 }47 48 .shell {49 width: min(1360px, calc(100vw - 32px));50 margin: 24px auto;51 display: grid;52 grid-template-columns: 280px minmax(0, 1fr);53 gap: 24px;54 }55 56 .panel {57 background: var(--paper);58 backdrop-filter: blur(12px);59 border: 1px solid var(--line);60 border-radius: var(--radius);61 box-shadow: var(--shadow);62 }63 64 .nav {65 position: sticky;66 top: 20px;67 align-self: start;68 padding: 22px;69 }70 71 .eyebrow {72 letter-spacing: 0.12em;73 text-transform: uppercase;74 font-size: 11px;75 font-weight: 700;76 color: var(--accent);77 }78 79 .nav h1,80 .hero h1,81 h2,82 h3 {83 font-family: "Newsreader", serif;84 line-height: 0.96;85 margin: 0;86 }87 88 .nav h1 {89 font-size: 2rem;90 margin-top: 10px;91 }92 93 .nav p {94 color: var(--muted);95 font-size: 0.95rem;96 line-height: 1.5;97 }98 99 .nav ul {100 list-style: none;101 padding: 0;102 margin: 18px 0 0;103 display: grid;104 gap: 10px;105 }106 107 .nav a {108 display: block;109 color: var(--ink);110 text-decoration: none;111 padding: 10px 12px;112 border-radius: 12px;113 border: 1px solid transparent;114 background: rgba(255, 255, 255, 0.35);115 }116 117 .nav a:hover {118 border-color: var(--line);119 background: rgba(255, 255, 255, 0.75);120 }121 122 .meta-block {123 margin-top: 20px;124 padding-top: 18px;125 border-top: 1px solid var(--line);126 color: var(--muted);127 font-size: 0.86rem;128 line-height: 1.5;129 }130 131 main {132 display: grid;133 gap: 24px;134 }135 136 section {137 padding: 26px 28px 28px;138 }139 140 .hero {141 padding: 28px;142 overflow: hidden;143 position: relative;144 }145 146 .hero::after {147 content: "";148 position: absolute;149 inset: auto -3rem -6rem auto;150 width: 18rem;151 height: 18rem;152 border-radius: 50%;153 background: radial-gradient(circle, rgba(156, 71, 41, 0.14), transparent 68%);154 pointer-events: none;155 }156 157 .hero h1 {158 font-size: clamp(2.6rem, 5vw, 4.6rem);159 max-width: 12ch;160 margin-top: 12px;161 }162 163 .lede {164 margin-top: 16px;165 max-width: 70ch;166 font-size: 1.05rem;167 line-height: 1.65;168 color: #2b2723;169 }170 171 .hero-grid,172 .card-grid,173 .two-col {174 display: grid;175 gap: 14px;176 }177 178 .hero-grid {179 margin-top: 24px;180 grid-template-columns: repeat(4, minmax(0, 1fr));181 }182 183 .card-grid {184 grid-template-columns: repeat(2, minmax(0, 1fr));185 }186 187 .two-col {188 grid-template-columns: repeat(2, minmax(0, 1fr));189 }190 191 .metric,192 .card,193 .finding {194 padding: 18px;195 background: rgba(255, 255, 255, 0.68);196 border: 1px solid var(--line);197 border-radius: 18px;198 }199 200 .metric .label {201 color: var(--muted);202 font-size: 0.82rem;203 text-transform: uppercase;204 letter-spacing: 0.08em;205 }206 207 .metric .value {208 margin-top: 8px;209 font-size: 1.45rem;210 font-weight: 700;211 }212 213 h2 {214 font-size: 2rem;215 margin-bottom: 16px;216 }217 218 h3 {219 font-size: 1.3rem;220 margin-bottom: 10px;221 }222 223 p {224 margin: 0 0 14px;225 line-height: 1.65;226 }227 228 ul,229 ol {230 margin: 0;231 padding-left: 20px;232 line-height: 1.65;233 }234 235 li + li {236 margin-top: 8px;237 }238 239 .badge-row {240 display: flex;241 flex-wrap: wrap;242 gap: 8px;243 margin: 18px 0 8px;244 }245 246 .badge {247 display: inline-flex;248 align-items: center;249 gap: 8px;250 padding: 8px 10px;251 border-radius: 999px;252 font-size: 0.82rem;253 font-weight: 700;254 border: 1px solid var(--line);255 background: rgba(255, 255, 255, 0.68);256 }257 258 .badge.good {259 color: var(--good);260 }261 262 .badge.warn {263 color: var(--warn);264 }265 266 .badge.bad {267 color: var(--bad);268 }269 270 .quote {271 margin-top: 18px;272 padding: 18px;273 border-left: 4px solid var(--accent);274 border-radius: 14px;275 background: var(--accent-soft);276 }277 278 .severity {279 display: inline-flex;280 margin-bottom: 12px;281 padding: 6px 10px;282 border-radius: 999px;283 font-size: 0.78rem;284 font-weight: 700;285 text-transform: uppercase;286 letter-spacing: 0.08em;287 }288 289 .severity.high {290 background: rgba(140, 47, 37, 0.12);291 color: var(--bad);292 }293 294 .severity.medium {295 background: rgba(148, 98, 0, 0.12);296 color: var(--warn);297 }298 299 .severity.low {300 background: rgba(47, 106, 66, 0.12);301 color: var(--good);302 }303 304 .ref {305 color: var(--muted);306 font-size: 0.82rem;307 line-height: 1.5;308 }309 310 @media (max-width: 980px) {311 .shell {312 grid-template-columns: 1fr;313 }314 315 .nav {316 position: static;317 }318 319 .hero-grid,320 .card-grid,321 .two-col {322 grid-template-columns: 1fr;323 }324 325 .hero h1 {326 max-width: 100%;327 }328 }329 </style>330 </head>331 <body>332 <div class="shell">333 <aside class="panel nav">334 <div class="eyebrow">Maintainer Report</div>335 <h1>Report Title</h1>336 <p>Replace this with a concise description of what the report covers.</p>337 <ul>338 <li><a href="#summary">Summary</a></li>339 <li><a href="#tutorial">Tutorial</a></li>340 <li><a href="#findings">Findings</a></li>341 <li><a href="#recommendation">Recommendation</a></li>342 </ul>343 <div class="meta-block">344 Replace with project metadata, review date, or scope notes.345 </div>346 </aside>347 348 <main>349 <section class="panel hero" id="summary">350 <div class="eyebrow">Executive Summary</div>351 <h1>Use the hero for the clearest one-line judgment.</h1>352 <p class="lede">353 Replace this with the short explanation of what the contribution does, why it matters,354 and what the core maintainer question is.355 </p>356 <div class="badge-row">357 <span class="badge good">Strength</span>358 <span class="badge warn">Tradeoff</span>359 <span class="badge bad">Risk</span>360 </div>361 <div class="hero-grid">362 <div class="metric">363 <div class="label">Overall Call</div>364 <div class="value">Placeholder</div>365 </div>366 <div class="metric">367 <div class="label">Main Concern</div>368 <div class="value">Placeholder</div>369 </div>370 <div class="metric">371 <div class="label">Best Part</div>372 <div class="value">Placeholder</div>373 </div>374 <div class="metric">375 <div class="label">Weakest Part</div>376 <div class="value">Placeholder</div>377 </div>378 </div>379 <div class="quote">380 Use this block for the thesis, a sharp takeaway, or a key cited point.381 </div>382 </section>383 384 <section class="panel" id="tutorial">385 <h2>Tutorial Section</h2>386 <div class="two-col">387 <div class="card">388 <h3>Concept Card</h3>389 <p>Use cards for mental models, subsystems, or comparison slices.</p>390 <div class="ref">path/to/file.ts:10</div>391 </div>392 <div class="card">393 <h3>Second Card</h3>394 <p>Keep cards fairly dense. This template is about style, not fixed structure.</p>395 <div class="ref">path/to/file.ts:20</div>396 </div>397 </div>398 </section>399 400 <section class="panel" id="findings">401 <h2>Findings</h2>402 <article class="finding">403 <div class="severity high">High</div>404 <h3>Finding Title</h3>405 <p>Use findings for the sharpest judgment calls and risks.</p>406 <div class="ref">path/to/file.ts:30</div>407 </article>408 </section>409 410 <section class="panel" id="recommendation">411 <h2>Recommendation</h2>412 <div class="card-grid">413 <div class="card">414 <h3>Path Forward</h3>415 <p>Use this area for merge guidance, salvage plan, or rollout advice.</p>416 </div>417 <div class="card">418 <h3>What To Keep</h3>419 <p>Call out the parts worth preserving even if the whole proposal should not land.</p>420 </div>421 </div>422 </section>423 </main>424 </div>425 </body>426</html>427 Referenced from SKILL.md
SKILL.mdView in source ↗
Source excerpt starting at line 43.SKILL.mdView in source ↗43- `references/style-guide.md` for visual direction and report presentation rules44- `assets/html-report-starter.html` for a reusable standalone HTML/CSS starter
Source excerpt starting at line 159.159Before building from scratch, read `references/style-guide.md`.160If a fast polished starter is helpful, begin from `assets/html-report-starter.html`161and replace the placeholder content with the actual report.