html-output

html-output is a skill for Claude Code, Codex from creativedswork/dscode. It costs 0 tokens per session (1,297 once invoked), scanned A, original, MIT.

A skill for producing self-contained HTML documents instead of Markdown for information-rich work. HTML is the format used by web pages and can display layouts, diagrams, tables, and small interactive elements in a browser.

In plain words
What is it for?
Use it for specs, plans, code reviews, reports, explainers, design explorations, slide decks, SVG diagrams, and small interactive editors with copy or export controls.
Why use it?
It makes long specifications, reports, reviews, explainers, and design explorations easier to read, share, and inspect in one file.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it for specs, plans, code reviews, reports, explainers, design explorations, slide decks, SVG diagrams, and small interactive editors with copy or export controls.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/creativedswork/dscode/html-output-skill
Install

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.

Any agent
npx skills add creativedswork/dscode --skill html-output-skill
Clone the repo
git clone --depth 1 https://github.com/creativedswork/dscode

Made for: Claude Code, Codex.

Wrote 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.

agentmods badge for html-output

README.md
[![agentmods](https://agentmods.dev/badge/skills/creativedswork/dscode/html-output-skill/github.svg)](https://agentmods.dev/skills/creativedswork/dscode/html-output-skill)
Your own site
<a href="https://agentmods.dev/skills/creativedswork/dscode/html-output-skill"><img src="https://agentmods.dev/badge/skills/creativedswork/dscode/html-output-skill/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.

agentmods 80×15 button for html-output

Your own site · 80×15
<a href="https://agentmods.dev/skills/creativedswork/dscode/html-output-skill"><img src="https://agentmods.dev/badge/skills/creativedswork/dscode/html-output-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,297 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.01297
Opus 5.5 $0.00000 $0.00519
Sonnet 5.5 $0.00000 $0.00259
Haiku 4.5 $0.00000 $0.00130

Measured 1mo ago against content hash 875a4313c228, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 1mo 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.

.dscode/skills/html-output-skill/SKILL.md · 89 lines

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)

  1. 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 from file:// by double-clicking.
  2. 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.
  3. Built to be read, then shared. Visual hierarchy, scannable sections, mobile responsive. Assume a colleague opens it cold.
  4. 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.
  5. No placeholder lorem. Use the real ingested context (code, git history, docs). If data is genuinely unknown, label it clearly as a sample.

Read the full file on GitHub · 89 lines

Files

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.

Changes

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.

  1. 1mo ago First seen · 89 lines · 0 tokens per session scan A 875a4313c228

Subscribe to this mod's changes

html-output is a skill published in the GitHub repository creativedswork/dscode (11 stars, last pushed 29d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,297 tokens. 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.

Related

Other skills, from other repositories

deepseek-harness

Use when building AI agent applications with a plugin-based architecture — Web UI, CLI, Python SDK, Cordis plugin system, multi-model orchestration. DeepSeek Harness (dsh): open-source agent harness by DeepSeek AI where everything is a plugin, powered by Cordis for spatiotemporal composability.

znlgis/opengis-skills · 68 tokens

deepseek-harness

Use this skill whenever the user wants to call DeepSeek V4-Pro / V4-Flash (or its legacy aliases deepseek-chat / deepseek-reasoner), or you see code that imports from openai import OpenAI with baseurl="https://api.deepseek.com". This skill teaches you the 10 protocol contract rules required to avoid the 16 documented…

HenryZ838978/deepseek-harness · 144 tokens

cordis-plugin-development

Create, modify, debug, or extend dynamic Cordis Plugins, including Host Services and Events, Client Slot and theme UI, Package-private Client-to-Host calls, dynamic Tools, version updates, approval failures, and runtime diagnostics. Use this Skill to route a user request to the correct platform and Inspect Provider…

whitelonng/dshcode · 80 tokens

editing-cordis-compositions

Use when creating, changing, or validating a Cordis composition for this harness — writing or editing an agent preset, adding or removing a plugin row, deciding whether something belongs to the host composition or to one session, checking whether a preset you authored actually mounts, or diagnosing a row that mounted…

whitelonng/dshcode · 69 tokens

visionary-cli

Analyze images with DeepSeek's vision model via the visionary-server CLI. Use this whenever the user provides an image, photo, screenshot, or document with images - run vision to look at it rather than guessing.

xlight/deepseek-visionary · 46 tokens

evaluator-write-qa

Internal Auto-Harness evaluator skill for sprint QA and QA report writing. Use only inside the Evaluator subagent during qa mode.

redker56/auto-harness · 32 tokens