1仕組みと動作原理
CRTの質感は、絶対配置された3層のオーバーレイによって実現されています:走査線(repeating-linear-gradient 4px周期 + mix-blend-mode:screen)、56pxサイバーグリッド(放射状フェザーマスク適用)、周辺減光(radial-gradientによる四隅の暗転)。すべてCSSレイヤーであり、外部テクスチャ画像は不要です。
.tpl-hermes-cyber-terminal .hc-scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(126,211,164,.025) 3px,rgba(126,211,164,.025) 4px);mix-blend-mode:screen}
グリッド層は56pxのlinear-gradientで線を描画し、放射状マスクにより中央部のみを残すことで、SKILL.mdに規定された「56pxサイバーグリッド」を正確に再現しています。
.tpl-hermes-cyber-terminal .hc-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(126,211,164,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(126,211,164,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%)}
「ウィンドウのシグナルボタン風chrome + $ プロンプトタイトル」=nth-childで色付けされた3つのドットspan(#ff5f57 赤 / #febc2e 黄 / ミントグリーン)、およびタイトル左側に::beforeで生成されるシアンの「$ 」プレフィックス。アイコンやSVGを一切使わず純粋なCSSでターミナルウィンドウを再現しています。
.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}
「点滅カーソル」=12pxの縦棒 + steps(2) 1秒の無限アニメーション(@keyframes hcBlink{50%{opacity:0}})であり、タイトルテキスト(HERMES AGENT / v0.9.2)の直後に配置されています。
.tpl-hermes-cyber-terminal .hc-cursor{display:inline-block;width:12px;height:1em;background:var(--hc-green);vertical-align:middle;margin-left:6px;animation:hcBlink 1s steps(2) infinite}
「線画のみ(Stroke-only)の棒グラフ」=インラインSVGを使用:バーのfillは15% / 12%の薄い塗りにとどめ、strokeは1.5pxの実線、軸は透明度20%の線を使用。2系統のカラー(ミントグリーン / アンバー)で評価対象を識別します。
<rect x="130" y="80" width="80" height="240" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
「3段階タグ」=.hc-tag デフォルト緑 / .amber / .red の3つのセマンティックカラー。作例では「強度とリスク」を表すバッジ(rust-core、mcp-native、72h-benchmark、honest-review)として活用され、CTAページの needs-api-key にはamberが適用されています。
<span class="hc-tag red">honest-review</span>
作例は「CLI / agent / dev tool レビュー」のストーリーラインを完全に網羅しています:カバー → アジェンダ/章 → スペックカード → コード → CHART → STATS(ベンチマーク n=48)→ CTA → THANKS。実際のトレース抜粋や強み・弱みの分析も含まれます。
<h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>
ランタイム実行はホスト側が担当:テンプレートディレクトリ内に実行可能ファイルは一切存在せず、プロンプトはホスト側で組み立てられた後、ローカルのagent CLIに渡されて実行されます。
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts(JetBrains Mono / Inter / Noto Sans SC) |
| network | 宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求) |
4推奨統制措置と判定根拠
- SKILL.md: 純粋なプロンプト指示文およびルールテキストのみで構成され、スクリプト実行や外部への副作用はありません。
5二重目の独立検証
- [ok] 「56px 赛博网格」是否兑现 — .hc-grid 的 background-size:56px 56px + radial mask,与 SKILL.md 的 56px 逐字一致。
- [ok] 「blinking 光标」是否有真动画 — hc-cursor 使用 animation:hcBlink 1s steps(2) infinite,配套 @keyframes hcBlink{50%{opacity:0}}。
- [ok] 「Stroke-only 柱状图」是否真为描边 — SVG rect 的 fill 仅 15% / 12% 透明填充、stroke 实色 1.5px 描边;坐标轴为 20% 透明线。
- [unlocatable] 示例中的测评数据是否可回源核实(n=48、trace 节选) — 示例文案把「48 个任务的 PR 列表」「完整 trace」指向 github.com/lewis/hermes-review,仓库内无对应文件,无法回源核实;这些数字只存在于预览文案中,属示例内容而非模板规范,不代表模板会产出此类数据。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html;<script> 计数 0;无 fetch/XHR/env/写盘代码;无凭证读取。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只列色值与版式(无 URL);字体 @import 属 example.html(产物示例)。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699;skill.path = next/src/lib/templates/skills/deck-hermes-cyber,含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-hermes-cyber(Hermes Cyber neon-luxe),与目录内容相符。
6結論
1065c8cc4396d02f…