Hubbestaiskill.com

Home / All Skills / Design & Motion / deck-hermes-cyber

Design & Motion · nexu-io/html-anything

deck-hermes-cyber

Black background + CRT grid scanlines + $ CLI prompt titles + mint green display text + three-tier tags

L1 Basic · Source registration onlyV1 Commit-PinnedDual-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

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

The CRT visual effect is achieved through three absolute positioned overlay layers: scanlines (repeating-linear-gradient with 4px period + mix-blend-mode:screen), a 56px cyber grid (with radial feathered mask), and vignette (radial-gradient darkening all four corners). All are pure CSS layers requiring no external textures.

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}

Each of the three layers handles a distinct vintage terminal visual cue; together they create the authentic CRT feel, whereas missing any single layer collapses it into an ordinary dark page.

The grid layer uses 56px linear-gradient lines + radial mask retained only at the center, strictly fulfilling the '56px cyber grid' specification in SKILL.md.

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%)}

Values strictly match the spec: 56px is an explicitly fixed dimension in SKILL.md.

"Window traffic light chrome + $ prompt title" = three span dots styled via nth-child (#ff5f57 red / #febc2e yellow / mint green), with a cyan "$ " prefix generated before the title using ::before—a pure CSS simulation of a terminal window with zero icons or external SVGs.

next/src/lib/templates/skills/deck-hermes-cyber/example.html

.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}

Encoding the metaphor of "this is an active CLI session" into pseudo-elements incurs zero resource overhead.

"Blinking cursor" = a 12px vertical bar + steps(2) 1s infinite animation (@keyframes hcBlink{50%{opacity:0}}), positioned immediately after the title text (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}

The blinking cursor is the most lightweight, credible indicator that "the command line is running," built with just two lines of CSS.

"Stroke-only bar chart" = inline SVG: bar fills use faint 15% / 12% opacities, strokes use solid 1.5px outlines, and axes use 20% transparent lines; two color palettes (mint green / amber) differentiate evaluated targets.

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"/>

Using strokes instead of solid fills preserves the terminal line aesthetic while preventing large color blocks from overpowering textual content.

"Three-tier tags" = .hc-tag default green / .amber / .red semantic colors, used in examples as "intensity & risk" badges (rust-core, mcp-native, 72h-benchmark, honest-review), with amber applied to needs-api-key on the CTA page.

next/src/lib/templates/skills/deck-hermes-cyber/example.html

<span class="hc-tag red">honest-review</span>

The tag system acts as a metalanguage for review content: green = selling point, amber = caution, red = candid truth.

The example fully executes the narrative arc of a "CLI / agent / dev tool review": Cover → Sections → Spec Cards → Code → CHART → STATS (benchmark n=48) → CTA → THANKS, enriched with real trace excerpts and strong/weak points.

next/src/lib/templates/skills/deck-hermes-cyber/example.html

<h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>

The slide sequence aligns with review formats: establish specs first, provide execution traces and benchmark data next, and conclude with takeaways and installation methods.

Runtime execution is handled entirely by the host: the template directory contains zero executables, and the host assembles the prompt before delegating it to the local agent CLI for execution.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

The skill itself consists strictly of the prompt and preview assets.

2Core Capabilities

01CLI / agent / dev tool review deck (including trace, diff, benchmark)

023-layer CRT texture: scanlines + 56px grid + vignette

03Terminal window chrome (traffic light dots) + $ command prompt title

04Mint green #7ed3a4 large typography + JetBrains Mono (with neon text-shadow)

05Stroke-only bar chart + blinking cursor

06Three-tier amber / green / red tags indicating intensity and risk

07Spec / metric cards (lbl / val / desc 3-part layout)

08Benchmark stats slide (chart + legend + n=48 footer)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（JetBrains Mono / Inter / Noto Sans SC）
network	宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Register source and version

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Contains only prompt instructions and formatting rules text; executes no scripts and causes no external side effects.

Audit Notes: Evaluation target = Skill directory itself (next/src/lib/templates/skills/deck-hermes-cyber/): Contains only SKILL.md and example.html; contains no executable files such as .sh/.py/.mjs/.ts, no package.json, and no installation scripts; contains no code accessing credentials, environment variables, or cookies, and contains no disk-write commands (HTML is output within the model's text response, with persistence managed by the host frontend). The <script> count in example.html is 0. SKILL.md is purely a layout and content specification, specifying no runtime generation backends or external APIs. In accordance with Batch 4 review standards (generated asset references are exempt from grading; pure prompt templates are rated green), this template is classified as pure instruction. The only external endpoints appearing in the directory are purely for preview rendering or metadata, fetched client-side by the browser and not executed by skill code: fonts.googleapis.com (referenced in example.html) and www.w3.org (referenced in example.html). Host-side behaviors are outside this grading scope and recorded separately under verdict.risks: the convert route spawns a local agent CLI passing prompts via stdin (next/src/lib/agents/invoke.ts), shared instructions require CDN imports for Tailwind / Google Fonts (next/src/lib/templates/shared.ts), and the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[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），与目录内容相符。

6Verdict & Scenarios

Visual design and presentation genre are highly cohesive

High visual recognition achieved with zero external asset dependencies

Three-tier tag system provides clear semantic layering

Data slides are structured for direct reuse

Best for: Ideal for CLI / agent / developer tool evaluations and comparisons, tech stack selection sharing, and internal dev-tool reports: any scenario demanding a "terminal aesthetic + benchmark data + 3-tier conclusions".

Not for: Not suitable for formal enterprise business / print / light-theme brand contexts (black background neon, glow effects, and blend modes degrade in these environments); not suitable for instructional handouts (lacks exercise and objective slide types); not suitable for image-heavy presentations (supports only inline SVG charts).

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

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.