html-anything is a local AI-assisted HTML editor in which coding-agent command-line tools create documents such as articles, presentations, posters, prototypes, and reports from reusable templates. People use it to produce HTML and export it to services such as WeChat, X, and Zhihu or to HTML and PNG files. The catalogue entries are the skills and instructions that define its output surfaces and workflows.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nexu-io/html-anything --skill social-spotify-cardgit clone --depth 1 https://github.com/nexu-io/html-anythingWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nexu-io/html-anything/social-spotify-card)<a href="https://agentmods.dev/skills/nexu-io/html-anything/social-spotify-card"><img src="https://agentmods.dev/badge/skills/nexu-io/html-anything/social-spotify-card/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nexu-io/html-anything/social-spotify-card"><img src="https://agentmods.dev/badge/skills/nexu-io/html-anything/social-spotify-card.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00038 | $0.00885 |
| Opus 5 | $0.00019 | $0.00443 |
| Sonnet 5 | $0.00008 | $0.00177 |
| Haiku 4.5 | $0.00004 | $0.00089 |
Grade A, and why
social-spotify-card scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
【模板: Spotify Now-Playing 卡】 【意图】把一首歌、一段播客、或一段个人介绍渲染成 Spotify 正在播放卡, 适合 video overlay / 个人 about page / 创作者 hero。Inspired by hyperframes spotify-card。
【画布】两个尺寸:
- 横版视频叠加: 1280×720, 卡片居中或左下角浮动。
- 紧凑横条 widget: 600×200, 可嵌入到任何 hero。
【卡片结构】
- 外框: 圆角 12-16px; bg 用专辑封面色提取的暗渐变 (e.g.
linear-gradient(135deg, #1e3264 0%, #0d1f3d 100%)) 或 Spotify 经典#121212; 边缘有 1px subtle border。 - 左侧: 专辑封面 (CSS 渐变 + 大字 monogram 或抽象几何描绘, 不能外链图片), 圆角 6px, 60-200px 方形。
- 右侧:
- 顶部
NOW PLAYING(uppercase letterspace 0.14em, 11px, 绿色#1DB954)。 - 歌名 / 标题 (Inter / Spotify Circular, 22-28px, weight 700, 白色)。
- 艺人 / 副标 (16px, weight 400, opacity 0.7)。
- 进度条: 4px 高, 圆角, 灰色背景 + 白色 fill (
width: 38%); 两端时间戳1:24 / 3:42(mono, 11px, 灰)。 - 控制行: ⏮ ⏯ ⏭ icon (inline SVG, 24px, 白色 fill), shuffle / repeat icon 较小。
- 顶部
- 右上角: Spotify logo (内联 SVG, 绿色
#1DB954圆 + 三道白色波纹)。 - 可选: 右下角小型音波动效 (3 个 bar
@keyframes)。
【字体】
- 主:
Spotify Circular→ fallbackInter/Inter Tight, weight 400 / 700。 - 数字: 同主字体, 不用 mono 太多。
【设计细节】
- Spotify 经典 dark mode:
#121212bg,#1DB954accent,#b3b3b3secondary text。 - 若用户输入是文本/标题 → 把 "标题" 当歌名, "副标/作者" 当艺人, 估算"时长" 3:42 默认。
- 若用户输入是音乐相关 → 直接对应。
- 严禁外链图片; 封面用 CSS 渐变 + 文字 logo / 几何描绘。
- 微动效: 音波动效用
@keyframes, 可被prefers-reduced-motion关闭。 - 单文件 HTML。
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 51 lines · 38 tokens per session scan A 7ce215d2eb58
social-spotify-card is a skill published in the GitHub repository nexu-io/html-anything (8,731 stars, last pushed 19d ago), licensed Apache-2.0. It adds 38 tokens to every session and 885 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
frame-macos-notification
Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.
social-spotify-card
Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
social-reddit-card
Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
social-x-post-card
Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.