デザイン&モーション · nexu-io/html-anything

deck-hermes-cyber

黒背景 + CRTグリッド走査線 + $ コマンドラインタイトル + ミントグリーン大見出し + 3段階タグ

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License, Version 2.0;GitHub API license.spdx_id = Apache-2.0;模板目录内无独立 LICENSE 文件)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

CRTの質感は、絶対配置された3層のオーバーレイによって実現されています:走査線(repeating-linear-gradient 4px周期 + mix-blend-mode:screen)、56pxサイバーグリッド(放射状フェザーマスク適用)、周辺減光(radial-gradientによる四隅の暗転)。すべてCSSレイヤーであり、外部テクスチャ画像は不要です。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
.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}
3つのレイヤーがそれぞれレトロ端末特有の視覚的手がかりを担っており、重ねることで初めてCRTの質感が生まれます。いずれか1層でも欠けると通常のダークページに劣化します。

グリッド層は56pxのlinear-gradientで線を描画し、放射状マスクにより中央部のみを残すことで、SKILL.mdに規定された「56pxサイバーグリッド」を正確に再現しています。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
.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%)}
値は仕様に厳密に準拠:56pxはSKILL.mdで固定値として明記されています。

「ウィンドウのシグナルボタン風chrome + $ プロンプトタイトル」=nth-childで色付けされた3つのドットspan(#ff5f57 赤 / #febc2e 黄 / ミントグリーン)、およびタイトル左側に::beforeで生成されるシアンの「$ 」プレフィックス。アイコンやSVGを一切使わず純粋なCSSでターミナルウィンドウを再現しています。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}
「これはCLIセッションである」というメタファーを疑似要素に埋め込むことで、リソースコストをゼロに抑えています。

「点滅カーソル」=12pxの縦棒 + steps(2) 1秒の無限アニメーション(@keyframes hcBlink{50%{opacity:0}})であり、タイトルテキスト(HERMES AGENT / v0.9.2)の直後に配置されています。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
.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}
カーソルの点滅は「コマンドラインが動作中である」ことを示す最も低コストかつ確実なシグナルであり、わずか2行のCSSで実装されています。

「線画のみ(Stroke-only)の棒グラフ」=インラインSVGを使用:バーのfillは15% / 12%の薄い塗りにとどめ、strokeは1.5pxの実線、軸は透明度20%の線を使用。2系統のカラー(ミントグリーン / アンバー)で評価対象を識別します。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
<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が適用されています。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
<span class="hc-tag red">honest-review</span>
タグシステムはレビューコンテンツのメタ言語として機能します:緑=セールスポイント、アンバー=注意点、赤=ありのままの事実。

作例は「CLI / agent / dev tool レビュー」のストーリーラインを完全に網羅しています:カバー → アジェンダ/章 → スペックカード → コード → CHART → STATS(ベンチマーク n=48)→ CTA → THANKS。実際のトレース抜粋や強み・弱みの分析も含まれます。

next/src/lib/templates/skills/deck-hermes-cyber/example.html
<h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>
ページ構成はレビューの様式に準拠:まず仕様を定義し、次に実行トレースとベンチマーク数値を提示、最後に総括と導入方法を案内します。

ランタイム実行はホスト側が担当:テンプレートディレクトリ内に実行可能ファイルは一切存在せず、プロンプトはホスト側で組み立てられた後、ローカルのagent CLIに渡されて実行されます。

next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
スキル本体は純粋なプロンプトとプレビュー用アセットのみで構成されています。

2コア機能

01CLI / エージェント / 開発ツールのレビューデッキ(トレース、diff、ベンチマークを含む)
02CRT質感の3層構造:走査線 + 56pxグリッド + 周辺減光(ビネット)
03ターミナルウィンドウ風chrome(シグナルドット)+ $ コマンドラインタイトル
04ミントグリーン #7ed3a4 の大型タイポグラフィ + JetBrains Mono(ネオン風text-shadow付き)
05線画(Stroke-only)棒グラフ + 点滅カーソル
06強度とリスクを明示するアンバー / 緑 / 赤の3段階タグ
07仕様 / 指標カード(lbl / val / desc の3段構成)
08ベンチマークデータスライド(グラフ + 凡例 + n=48フッター)

3外部依存関係

KindDependency / Endpoint
networkGoogle Fonts(JetBrains Mono / Inter / Noto Sans SC)
network宿主共享指令声明的 Tailwind CDN(宿主侧要求,非本模板要求)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示文およびルールテキストのみで構成され、スクリプト実行や外部への副作用はありません。
監査ノート: 判定対象=スキル自身のディレクトリ(next/src/lib/templates/skills/deck-hermes-cyber/):ディレクトリ内には SKILL.md、example.html のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは含まれていません。また、認証情報、環境変数、Cookieを読み取るコードは一切なく、ディスク書き込み命令も存在しません(HTMLはモデルの応答本文として出力され、ディスクへの保存はホストのフロントエンドが担当します)。example.html 内の <script> タグ数は0です。SKILL.md は純粋なレイアウト・内容の仕様書であり、ランタイムでアクセスする生成バックエンドやAPIは一切指定されていません。バッチ4の判定基準(生成物の参照は判定対象外、純粋な指示テンプレートはGreen判定)に基づき、本テンプレートは純粋な指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下の通りであり、これらは生成物例またはそのメタデータとしてブラウザ側から取得されるもので、スキルコードから呼び出されるものではありません:fonts.googleapis.com(example.html 内)、www.w3.org(example.html 内)。ホスト側の挙動は本判定の対象外であり、別途 verdict.risks に記録されています:convert ルートがローカルの agent CLI を spawn して stdin 経由でプロンプトを渡す処理(next/src/lib/agents/invoke.ts)、共通指示による Tailwind / Google Fonts の CDN 読み込み(next/src/lib/templates/shared.ts)、プレビュー用 iframe での sandbox="allow-scripts allow-same-origin" の使用(next/src/components/template-picker.tsx)。

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結論

  • コンテンツジャンルとビジュアルが高い水準で調和
  • 外部リソースゼロで高い独自性と認知性を実現
  • 3段階タグによる明確な意味的階層化
  • そのまま再利用可能なデータスライド構造
  • 最適な用途: CLI / エージェント / 開発ツールのレビューや比較、技術選定の共有、社内向け開発ツール報告など、「ターミナル感 + 検証データ + 3段階の結論評価」が求められる場面に最適です。
    不向きな用途: フォーマルなビジネス / 印刷物 / ライトカラー系のブランド用途(黒背景のネオン、発光表現、ブレンドモードはこれらの環境で破綻します)、教育用講義資料(演習用や学習目標用のスライド構成がない)、大量の画像を必要とするコンテンツ(インラインSVGチャートのみ対応)には適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload deck-hermes-cyber.tar.gz
    sha256: 1065c8cc4396d02f…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.