HTML Anything

html-anything

The agent skill that turns anything into a beautiful, shareable HTML page. Rich answers, files, folders, URLs, and messy service exports become verified single-file .html artifacts with source-aware parsing, automatic style routing, 60 source prompts, and 17 concrete style systems. Short chats stay short; page-worthy answers become pages.

html-anything works inside Codex and Claude Code. Ask for a teaching site, drop in a PDF, upload a CSV, point it at a folder, or hand it an export like Amazon orders, Kindle highlights, Spotify history, WeChat / iMessage, Google Photos Takeout, logs, GPX, and more. The skill figures out the source, chooses the right use case and style, builds the page, checks it in a browser, and hands back a live HTML artifact instead of a long Markdown reply.

Why this exists

AI agents are outgrowing plain Markdown. Inspired by Claude Code team member Thariq Shihipar's viral “The Unreasonable Effectiveness of HTML”, html-anything treats HTML as the richer response format: denser, more visual, more interactive, and easier to share when the answer is really a page.

Preview

Each card shows the kind of question a user would naturally ask. The skill detects intent, picks the right design system, and ships a polished HTML page — without anyone mentioning HTML. Open the live demo gallery to see the rendered outputs.

Teaching Studios

Files & Work Data

Conversation Analysis

Personal Data & Places

Install

Pick the path for your agent: Claude Code · Codex · claude.ai · Claude API · Cursor / Cline / Windsurf / OpenCode / Goose / Letta / … · ClawHub

One command for most CLI and editor agents

npx skills add clockless-org/html-anything

Works with Claude Code, Codex, Cursor, Cline, Windsurf, OpenCode, Goose, Letta, Roo Code, Kiro, and any other agent following the open agent-skills spec. The CLI also pings skills.sh so installs feed the public leaderboard.

Claude Code

git clone https://github.com/clockless-org/html-anything ~/.claude/skills/html-anything

Restart Claude Code so it loads SKILL.md. To update later: git -C ~/.claude/skills/html-anything pull.

Codex

git clone https://github.com/clockless-org/html-anything "${CODEX_HOME:-$HOME/.codex}/skills/html-anything"

Restart Codex.

claude.ai (web)

1. Download html-anything-skill.zip (SKILL.md + prompts/, including style references).
2. In claude.ai: Settings → Features → Skills → Upload a Skill → drop the zip.

Requires Pro / Max / Team / Enterprise with code execution enabled. Custom skills on claude.ai are per-user; each teammate uploads their own copy.

Claude API

curl https://api.anthropic.com/v1/skills \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-beta: skills-2025-10-02,code-execution-2025-08-25,files-api-2025-04-14" \
  -F file=@html-anything-skill.zip

Then reference the returned skill_id in the container of any message. See the Skills API guide. Uploaded skills are workspace-wide.

ClawHub (publish)

This repo carries .clawhubignore so only SKILL.md + prompts/ ship, including canonical style references used by installed agents:

npm i -g clawhub && clawhub login
clawhub publish . --slug html-anything --version 0.1.1 --tags latest

Where it does not work

ℹ Custom Skills do not sync across surfaces. The same skill uploaded to claude.ai is not automatically available on Claude Code or the API — each surface keeps its own copy.

Use

Just ask your real question. You do not need to mention HTML, pages, dashboards, reports, atlases, or any of the design vocabulary — the skill decides when an answer should be a page and ships one.

Teach me the solar system.
What does my Amazon order history say about me?
Help me understand this CSV.
What did I read in 2025?
Walk me through this GitHub repo.
How did last quarter go?
Make sense of this messy log file.
Recap our 1:1 chat from this year.

Each of these triggers a polished, single-file HTML page in the right design system. Short conversational asks stay short.

If you name a data source but have no file yet ("my Spotify history", "my WhatsApp chat", "my Google Photos Takeout"), the skill walks you through the export first.

Input And Output

The output is a browser page, not a chat reply. Most outputs are a single output.html. When the page needs generated images or other local assets, the skill returns output.html + assets/. Ask for "single-file" if you need everything in one HTML file.

Automatic Usage Routing

You do not need to choose a style. The default is auto.

Routing has three layers:

Styles are not CSS skins. The skill picks the system from the content, then builds the page inside that system. Every non-fallback style has a checked-in live example and screenshot preview.

Style fidelity is part of the contract: when a style is based on a reference HTML or screenshot, the generated page should reproduce the reference's first viewport, component vocabulary, interaction model, motion grammar, and visual absence rules. Source modules are translated into the style instead of forcing every output into the same dashboard/report shape.

Canonical style references can live under prompts/styles/references/<style>/, so the published skill can use the same structural target as the demo gallery without bundling every example. Style-specific assets stay beside their own reference pack and are copied only when that style needs them.

You can still steer it naturally: "make it more tutorial-like", "more app-like", "less academic", "make it a carousel", "more dashboard-like", or "more playful".

Reusable style prompts live in prompts/styles/. The shared structural contract is prompts/styles/_system.md. The internal style catalog lives in prompts/styles/catalog.json: it records the four use cases plus each style's triggers, best sources, example, preview, required primitives, and avoid rules so generation can stay style-faithful without asking users to pick options. There is a fallback default style plus 17 concrete style systems, each with a live example and preview asset.

Example explicit style override:

npx tsx src/cli.ts examples/pdf/input.pdf \
  --style digital-eguide \
  --out /tmp/battery-storage-guide.html \
  --title "Mid-Market Battery Storage Field Guide"

Use Cases And Sources

Sources can be endless, but the skill routes them into four stable use cases. Each use case can use one or more style systems.

Use case is user-facing; style is internal. The user never has to name a sty