html-craft

html-craft is a skill for Claude Code, Codex from Elumenotion/GuideAnts. It costs 84 tokens per session (2,464 once invoked), scanned A, original, Apache-2.0.

A tool for creating single-file interactive HTML pages and checking them in a real browser. HTML is the language used to structure web pages; the tool also captures screenshots and checks page behavior.

In plain words
What is it for?
Building demos, animations, dashboards, and interactive pages, then testing clicks, key presses, page geometry, and JavaScript errors.
Why use it?
It helps catch layout problems, browser errors, and broken interactions before handing over an HTML page.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/elumenotion/guideants/html-craft
Any agent
npx skills add Elumenotion/GuideAnts --skill html-craft
Clone the repo
git clone --depth 1 https://github.com/Elumenotion/GuideAnts

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-craft

README.md
[![agentmods](https://agentmods.dev/badge/skills/elumenotion/guideants/html-craft.svg)](https://agentmods.dev/skills/elumenotion/guideants/html-craft)
Your own site
<a href="https://agentmods.dev/skills/elumenotion/guideants/html-craft"><img src="https://agentmods.dev/badge/skills/elumenotion/guideants/html-craft.svg" alt="Measured on agentmods" height="20"></a>
Per session 84 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,464 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00084 $0.02464
Opus 5 $0.00042 $0.01232
Sonnet 5 $0.00017 $0.00493
Haiku 4.5 $0.00008 $0.00246

Measured yesterday against content hash 5640e13295a9, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

html-craft 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 yesterday.

The scan reads SKILL.md. This mod also ships 4 executable files (scripts/html_craft.py, scripts/preflight.py, scripts/test_html_craft.sh, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

samples/skills/html-craft/SKILL.md · 175 lines

How it starts

The opening of the file, as written. The whole thing — 175 lines — stays where its author put it; the contents beside it link to each section on GitHub.

html-craft

Paths - fixed layout, do not probe or re-derive. The sandbox CWD is the notebook's output directory. This skill's scripts live under Skills/html-craft/scripts/ relative to it, so run the commands in this file exactly as written. Write every deliverable to the CWD with a bare filename (e.g. -o page.png): never prefix an output path with Output/ - the CWD is the output directory, so Output/... would create a nested Output/ folder.

Builds single-file HTML artifacts (inline CSS + JS, no build step, no network) and verifies them the way a user would see them: a real headless Chromium loads the file, drives it (key presses, clicks, waits), screenshots the moments that matter, and asserts on the DOM. Everything runs inside the sandbox: sandbox-venv Python + playwright + openai SDK + the Chromium binary already in the image.

Preflight (cheap; once per session)

python3 Skills/html-craft/scripts/preflight.py

Prints one JSON verdict: {"scenario", "open": bool, "blockers": [...], "warnings": [...], "evidence": {...}} after a live 320x200 render. open: false - stop and report the blockers; do not guess browser paths.

Commands

python3 Skills/html-craft/scripts/html_craft.py probe  PAGE
python3 Skills/html-craft/scripts/html_craft.py shot   PAGE -o name.png
python3 Skills/html-craft/scripts/html_craft.py text   PAGE --sel "#el" [--sel "#el2"]
python3 Skills/html-craft/scripts/html_craft.py eval   PAGE "document.title"
python3 Skills/html-craft/scripts/html_craft.py compare A.png B.png -o cmp.png
python3 Skills/html-craft/scripts/vision_qa.py  NAME.png --ask "1) ... 2) ..." --label "..."

Drive flags shared by probe / shot / text / eval:

Flag Meaning
--action "press:Space" repeatable, applied in order: press:KEY, click:SELECTOR, wait:MS
--wait MS settle after page load (default 700)
--settle MS wait after each action (default 1200)
--viewport WxH default 1280x800
--full-page shot: capture the full scrollable page
--timeout MS navigation timeout (default 60000)
--browser PATH chromium binary; else $HTML_CRAFT_BROWSER; else auto-find

Read the full file on GitHub · 175 lines

Files

What ships with it

7 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. yesterday First seen · 175 lines · 84 tokens per session scan A 5640e13295a9

Subscribe to this mod's changes

html-craft is a skill published in the GitHub repository Elumenotion/GuideAnts (56 stars, last pushed yesterday), licensed Apache-2.0. It adds 84 tokens to every session and 2,464 once invoked, about $0.0004 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.

Related

Other skills, from other repositories

browser-use

Direct browser control via CDP for web interaction: automation, scraping, testing, screenshots, and site/app work.

browser-use/browser-use · 26 tokens

opencli-autofix

Automatically fix broken OpenCLI adapters when commands fail. Load this skill when an opencli command fails — it guides you through collecting a trace artifact, patching the adapter, retrying, and filing an upstream GitHub issue after a verified fix. Works with any AI agent.

jackwener/OpenCLI · 61 tokens

generate-token-map

Maps all Figma design tokens from figma-variables.md to their equivalent C++ (Views) identifiers, CSS (WebUI) variables, and Clank (Android) resource attributes/macros/methods in Chromium, and saves the formatted mapping table to the assets directory of the Chrome Design System project. Use this skill when asked to…

chromium/chromium · 81 tokens

opencli-sitemap-author

Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.

jackwener/OpenCLI · 67 tokens

opencli-browser-sitemap

Use when driving a website with opencli browser and sitemap context is available, requested, or needed to avoid blind navigation. Guides agents to consume site sitemap files lazily, choose adapter/browser fallback paths, resume from state signatures, and mark stale sitemap entries without trusting them over live…

jackwener/OpenCLI · 64 tokens

playwright-screen-recording

Record browser test videos with Playwright for PR review and bug fix verification.

liaohch3/claude-tap · 20 tokens