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 agentmods add skills/creativedswork/dscode/html-output-skillnpx skills add creativedswork/dscode --skill html-output-skillgit clone --depth 1 https://github.com/creativedswork/dscodeWhat 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 | $0.00146 | $0.01297 |
| Opus 5 | $0.00073 | $0.00648 |
| Sonnet 5 | $0.00029 | $0.00259 |
| Haiku 4.5 | $0.00015 | $0.00130 |
Grade A, and why
html-output 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 2d 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.
How it starts
The opening of the file, as written. The whole thing — 89 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Writing HTML outputs
Markdown is portable but cramped: nobody reads a 100-line .md, it can't render
color/diagrams/interaction, and it's awkward to share. HTML fixes all three. Prefer
HTML whenever you'd otherwise hand back a long Markdown document.
This skill encodes the patterns from Anthropic's html-effectiveness gallery so the
HTML you generate is consistent, readable, and immediately shareable.
When to reach for HTML
| Use case | Why HTML wins |
|---|---|
| Specs, plans, exploration | Side-by-side option grids, mockups, data-flow diagrams, annotated code |
| Code review / PR write-up | Rendered diffs, inline margin annotations, severity color-coding |
| Code / concept explainers | SVG flowcharts + annotated snippets + a "gotchas" section |
| Reports, research, status | Tables, charts, callouts; one link to share, renders everywhere |
| Design & prototypes | CSS/SVG is expressive; add sliders/knobs to tune, then export params |
| Custom editing UIs | Drag/drop, forms, live preview — end with a copy-as-X export button |
Rule of thumb: if the answer is information-dense or longer than a screen, make it HTML.
Core principles (non-negotiable)
- Single self-contained file. One
.html, no build step, no external runtime dependencies. Inline all CSS in a<style>tag and all JS in a<script>tag. It must open correctly fromfile://by double-clicking. - Information density over token thrift. Use tables, SVG, CSS, and layout to pack in meaning. Don't fall back to ASCII diagrams or unicode-color hacks.
- Built to be read, then shared. Visual hierarchy, scannable sections, mobile responsive. Assume a colleague opens it cold.
- Close the loop on interactive files. Any editor/tuner MUST end with an export: a "Copy as JSON / Markdown / prompt / diff" button so the user's edits flow back into Claude or a file.
- No placeholder lorem. Use the real ingested context (code, git history, docs). If data is genuinely unknown, label it clearly as a sample.
What ships with it
4 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.
- 2d ago First seen · 89 lines · 0 tokens per session scan A 875a4313c228
html-output is a skill published in the GitHub repository creativedswork/dscode (10 stars, last pushed 18d ago), licensed MIT. It adds 146 tokens to every session and 1,297 once invoked, about $0.0007 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-08-31.
Other skills, from other repositories
dingtalk_channel_connect
Use a headed browser to automatically complete DingTalk channel integration for QwenPaw. Applicable when the user mentions DingTalk, developer console, Client ID, Client Secret, bot, Stream mode, binding or configuring a channel. Supports pausing when a login page is detected and resuming after the user logs in.
dingtalk_channel_connect
使用可视浏览器自动完成 QwenPaw 的钉钉频道接入。适用于用户提到钉钉、DingTalk、开发者后台、Client ID、Client Secret、机器人、Stream 模式、绑定或配置 channel 的场景；支持遇到登录页时暂停，等待用户登录后继续。.
browser_cdp
Use this skill when the user explicitly wants to connect to a running Chrome browser, scan local CDP ports, specify a cdpport, or share a single browser across multiple agents/tools. By default browser opens no debugging port; pass an explicit cdpport only when the user wants another local tool to attach.
browser_cdp
当用户明确希望连接到已运行的 Chrome 浏览器、扫描本地 CDP 端口、显式指定 cdpport，或让多个 agent / 工具共享同一个浏览器时，使用本 skill。browser 默认不开放调试端口；仅当用户明确希望其他本地工具附加时才显式传入 cdpport。.
browser_visible
当用户需要控制 browser 的浏览器启动方式时，使用本 skill。browser 默认由 Playwright 直接管理、不开放调试端口（需让其他本地工具附加时显式传 cdpport）；headed 控制是否显示窗口，privatemode 保留用于兼容、不再改变默认行为，browserargs 传入额外的 Chromium 启动参数，executablepath 指定自定义浏览器可执行文件路径。.
browser_visible
Use this skill when the user needs to control the browser launch mode for browser. By default browser is managed by Playwright and opens no debugging port (pass an explicit cdpport to let another local tool attach); headed controls whether the window is visible, and privatemode is kept for backward compatibility and…