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 ooiyeefei/ccc --skill htmldropgit clone --depth 1 https://github.com/ooiyeefei/cccWrote 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/ooiyeefei/ccc/htmldrop)<a href="https://agentmods.dev/skills/ooiyeefei/ccc/htmldrop"><img src="https://agentmods.dev/badge/skills/ooiyeefei/ccc/htmldrop/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/ooiyeefei/ccc/htmldrop"><img src="https://agentmods.dev/badge/skills/ooiyeefei/ccc/htmldrop.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00220 | $0.05024 |
| Opus 5.5 | $0.00088 | $0.02010 |
| Sonnet 5.5 | $0.00044 | $0.01005 |
| Haiku 4.5 | $0.00022 | $0.00502 |
Grade C, and why
htmldrop scanned grade C with 1 finding 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 3d 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.
Reaches for credential fileshighPrivilege escalation
SSH keys, cloud credentials, git-credentials, .npmrc, /etc/shadow: reading these is how a config file becomes a credential leak.
2. **Never store credentials** — Surge auth lives in `~/.netrc`; the feedback author key lives in `~/.htmldrop/config.json` How it starts
The opening of the file, as written. The whole thing — 273 lines — stays where its author put it; the contents beside it link to each section on GitHub.
htmldrop — Share HTML as Hosted Links
Publish any HTML file and get a shareable URL instantly via the htmldrop CLI. Three modes:
- Simple share (Surge.sh hosting) — get a public or password-protected link to a static page.
- Collaborative feedback + converge — publish with an embedded annotation widget so reviewers can highlight text and comment with no account, then pull the feedback, add evidence-backed comments programmatically, and synthesize an improved version with AI.
- Edit mode (local, pre-publish) — serve the file on
127.0.0.1and iterate on it live with the user: they annotate and comment on one surface; you edit the file (it hot-reloads), reply, or ask them a question. No hosting, nothing published. This is the loop to firm a doc up before sharing it — or between rounds of external feedback. Seereferences/edit-mode.md.
Design applies to every mode: before generating or serving any HTML, match the design system of the project the artifact is about, so it looks like the real product rather than a generic page. See references/design-and-visuals.md — read it whenever you author or edit HTML here.
MUST DO BEFORE WRITING ANY HTML (all modes)
This fires automatically, whether the user runs simple share, feedback, or edit mode — and whether or not they ever type a htmldrop playbook/htmldrop design command. It is the default behavior of this skill, not an opt-in. Do both, in order, before you write or edit a single line of HTML:
- Match the look first (theme + styling). Detect and adopt the design system of the project the artifact is about (not necessarily your current working dir), in this priority:
- a look/system the user named → use exactly that;
- the target project's design system → Tailwind/theme config,
:rootCSS variables/design tokens, an in-use component library, or brand assets (logo, palette, fonts) on an existing styled page; - nothing to match → a clean, deliberate neutral default (small palette, system font stack, generous spacing, clear hierarchy). When you deliver, state which source you used in one line ("styled with the project's Tailwind theme" / "no theme found — neutral default"). Never ship a generic template when a real design system was discoverable.
What ships with it
5 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.
- 3d ago Changed · -11 lines · +220 tokens per session c215be855978
- 1mo ago First seen · 284 lines · 0 tokens per session scan C f88d7616d1fb
htmldrop is a skill published in the GitHub repository ooiyeefei/ccc (496 stars, last pushed 2d ago), licensed MIT. It adds 220 tokens to every session and 5,024 once invoked, about $0.0009 per session on Opus 5.5. A static security scan graded it C with 1 finding (reaches for credential files). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…
interactive-login
Log a CLI in with a browser/device-code flow (aws sso, gh, glab, gcloud, …) and save the result to the keychain so later commands can request it through execute.credentials.
pinchtab-mcp
Use this skill when a task requires browser automation through PinchTab's MCP server connected to a remote browser instance. Covers navigation, element interaction, data extraction, form filling, multi-step flows, and session management via MCP tools.
azure-messaging-webpubsub-java
Build real-time web applications with Azure Web PubSub SDK for Java. Use when implementing WebSocket-based messaging, live updates, chat applications, or server-to-client push notifications.
cua-driver
Use Cua Driver for desktop or browser tasks that are awkward or unavailable through Bash/APIs, or when the user explicitly wants GUI interaction: app testing, visual bug reproduction, form filling, calendar entry, screenshots, and demo recording. Also covers Cua setup; not OpenAI Codex Computer Use or web research.
open-design-browser
Inspect and exercise local HTML design artifacts with the existing agent-browser CLI, including screenshots and keyboard or interaction checks. Use when rendered evidence helps author or review a design; excludes browser installation, remote services, and unrelated browser automation.