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

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

Good fit Building demos, animations, dashboards, and interactive pages, then testing clicks, key presses, page geometry, and JavaScript errors.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/elumenotion/guideants/html-craft
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 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/github.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/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-craft

Your own site · 80×15
<a href="https://agentmods.dev/skills/elumenotion/guideants/html-craft"><img src="https://agentmods.dev/badge/skills/elumenotion/guideants/html-craft.svg" alt="Reviewed on agentmods" width="80" 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. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.00084 $0.02464
Opus 5.5 $0.00034 $0.00986
Sonnet 5.5 $0.00017 $0.00493
Haiku 4.5 $0.00008 $0.00246

Measured 1mo ago against content hash 5640e13295a9, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo ago.

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. 1mo ago 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 (64 stars, last pushed 2d ago), licensed Apache-2.0. It adds 84 tokens to every session and 2,464 once invoked, about $0.0003 per session on Opus 5.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

stealth-browser-mcp

Use this skill when operating stealth-browser-mcp from an AI agent or MCP client for browser automation, page inspection, element interaction, screenshots, file uploads, CDP commands, network debugging, cookies/storage, stealth setup, or reliable multi-step browser workflows. It provides the correct tool order, state…

vibheksoni/stealth-browser-mcp · 76 tokens

accessibility-a11y

WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing.

travisjneuman/.claude · 26 tokens

flutter-development

Cross-platform development with Flutter and Dart for iOS, Android, Web, Desktop, and embedded. Use when building Flutter apps, implementing Material/Cupertino design, or optimizing Dart code.

travisjneuman/.claude · 41 tokens

agent-e2e-test-specialist

Specialist subagent: Playwright, Cypress, and visual regression testing specialist. Use only when the user explicitly asks for E2E tests, browser test automation, or visual regression testing. Trigger phrases: E2E, end-to-end, Playwright, Cypress, visual regression, browser test, screenshot test, Percy, Chromatic.

travisjneuman/.claude · 76 tokens

frontend-enhancer

Enhance the visual design of web apps: modern UI components, layout, responsive design, color palettes, animations. Use for styling and UI polish; pair with ui-research first for new design directions.

travisjneuman/.claude · 45 tokens

generic-design-system

Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.

travisjneuman/.claude · 60 tokens