hud-interface SKILL.md skillA
hud-interface from majiayu000/spellbook is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add majiayu000/spellbook/hud-interface@git:20261102.47f8439Pins git:20261102.47f8439 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- majiayu000/spellbook
- Path
skills/hud-interface/SKILL.md- Versions recorded
- 1
- Latest version
- git:20261102.47f8439, committed Nov 2, 2026
- Size
- 6,625 bytes
- Repository stars
- 290
- License
- MIT
游戏 HUD 式界面：黑白纸墨加一个薄荷强调色，斜切黑标签、空心巨型数字、粗黑汉字标题、环形转动文字、歪着摆的纸卡片、黑色底栏大斜体计数和条形表，背后是流动的液体大理石着色器；可选用 HTML-in-Canvas 把真实 DOM 面板画进 WebGL 再做玻璃折射和色散（Chrome 实验开关，不支持时自动退回普通 DOM）。带噪音档位 quiet / normal / loud，默认 quiet。适合拆解台、零件清单、机器人或任务控制台这类要有「仪表感」的页面。当用户说「游戏 HUD 风格」「做成仪表板那种酷炫界面」「HTML-in-Canvas」「把 DOM 画进 WebGL」「液体大理石背景」「斜切标签 / 巨型数字 / 环形文字」时使用。只在明确请求时触发，忽略顺带提及。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# HUD 式界面
把一个页面做成游戏 HUD 的样子。分三层，前两层任何浏览器都能用，第三层是可选增强：
| 层 | 内容 | 依赖 |
|---|---|---|
| 版式 | 斜切标签、巨型数字、导航反白块、环形文字、歪卡片、清单表、黑底栏、刻度尺、条形码、等宽小字 | `hud.css`，纯 CSS 和 SVG |
| 背景 | 液体大理石：域扭曲 fbm，纸底、墨线、边缘积一点强调色 | WebGL2；没有时用 CSS 渐变 |
| 玻璃 | 把一个 DOM 面板画进 WebGL 贴图，边缘折射、色散，指针下有放大镜 | HTML-in-Canvas（Chrome 实验开关）；没有时面板保持普通 DOM |
## 文件
- `assets/hud.css`：颜色变量（`--hud-paper` `--hud-ink` `--hud-tint` `--hud-signal`）、字体变量和全部组件类。
- `assets/hud.js`：`window.Hud`，包括 `backdrop(canvas)`、`glass(panel)`、`glassSupported()`、`ring(el, text, {size, font})`、`barcode(el, seed)`、`level()`。没有依赖。
- `assets/demo.html`：一个机械键盘拆解台。左边是分区导航，中间是步骤卡片，右边是日期和零件清单（玻璃面板），底部是计数。右上角切换噪音档位。
- `scripts/check.mjs`：无头验收，跑默认 Chrome 和打开实验开关两种情况（截图存进 `--out`）。
## 步骤
1. **定内容，再套壳**。先列清楚页面真正要显示什么：分区、清单、计数、正在进行的那一项。HUD 只是外壳，内容必须是真实的结构，不要为了填满版面去造装饰数据。
2. **复制 `hud.css` 和 `hud.js`**，引入字体（Barlow Condensed、JetBrains Mono、Noto Sans SC，Google Fonts；离线会退到系统字体）。从 `demo.html` 搬需要的块。
3. **选一个面板做玻璃**，最多一两个，一般选主清单：`Hud.glass(panel)`。整页都做成玻璃会糊，也会很慢。
4. **背景**：放一个 `<canvas class="hud-backdrop">`，调用 `Hud.backdrop(canvas)`。颜色从 CSS 变量读，改 `--hud-tint` 就能换强调色。
…Read the whole file at its exact version.
How to install
mdr add majiayu000/spellbook/hud-interface@sha256:9e623588788dd3bdThe line at the top of this page pins the label git:20261102.47f8439, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_3dgabci4g4ataurd)
2 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Nov 2, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (6625 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
majiayu000/spellbook · 290 stars · license MIT · pushed 2026-11-04 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_3dgabci4g4ataurd GET https://markdownregistry.com/api/v1/resolve?ref=majiayu000/spellbook/hud-interface GET https://markdownregistry.com/api/v1/blob/9e623588788dd3bd176b777b6c9cae653c8c6bfb239f0840a8122ec905898518
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.