HTML Anything: Turn Anything Into a Page
Turns any file, folder, URL, or service export into a beautiful, interactive, shareable single-file HTML page instead of a long Markdown answer.
SKILL.md has explicit data/privacy defaults: mask sensitive identifiers, no raw-message appendix for intimate chats by default, observational-only output for medical/legal sources, generated HTML treated as sensitive as source; no external JS/CDN unless user allows; URL fetching scoped to content understanding. Deductions: no explicit user confirmation step before embedding contacts/payments/health data, no recovery/cleanup path for privacy residue in output.html, and install-by-git-clone exceeds least privilege for a SKILL.md-driven skill.
Workflow is self-consistent (understand → export guidance → sample → load prompts → choose style → build → verify → handoff), requires revision instead of shipping failures, with concrete sampling guidance. Deductions: browser verification depends on host agent capability with no scripted tests or failure-message spec; handling of corrupt/oversized inputs is thin; no test evidence.
Triggers (when_to_use), four use cases, 17 style mappings, and an explicit negative list ('do not use HTML when...') are clear, giving good semantic trigger precision. Deductions: no Chinese-language support statement; Google Fonts is the sole external call with no mainland-China reachability discussion; fit for agents lacking browser tooling is undeclared.
Well-layered docs (README/SKILL.md/prompts/), version 0.1.0, MIT-0 license, clear install/update paths. Deductions: no CHANGELOG, maintenance ownership unclear (Clockless appears only in the license), publisher unverified, and the dual CLI/skill surface adds hidden assumptions.
README shows 11 committed example outputs and a live gallery with fully reproducible generation commands; output is directly openable single-file HTML with clear marginal value. Deductions: static review cannot confirm output quality consistency or that 'browser verification' actually runs; long-tail source completeness is unknown, so no higher score.
In-repo example input/output pairs, catalog. and reference HTML allow partial audit. Deductions: examples are author-produced; no third-party execution evidence, no CI test coverage of key paths; quality promises (style fidelity, browser verification) are not independently reproducible.
- Generated HTML embeds source data client-side (chats, payments, health records) — review and redact before sharing; no Chinese-language support or Chinese-source handling is declared, and the default Google Fonts import may fail on mainland-China networks (pages remain local-first and usable otherwise); browser verification depends on host-agent tooling and cannot be trusted without it; installation clones the full repo including the CLI and scripts, which exceeds the minimal surface needed for the skill itself.
What does this skill do, and when should you use it?
html-anything is an Agent Skill for Claude Code and Codex built on one idea: when an answer deserves to be a page, deliver a real HTML artifact rather than scrolling text. It ships 60 source prompts (Amazon orders, WhatsApp, Spotify, Kindle, GPX, logs, and more) and 17 concrete design systems (teaching studio, dashboard, timeline story, terminal, etc.), auto-detects the input, picks the right style, builds the page, and verifies it in a browser before handoff. Output is usually a single output.html, optionally with an assets folder. It includes privacy-first defaults for intimate chats, payments, and medical/legal sources. It fits Claude Code or Codex users who want visual deliverables instead of prose.
Reads an idea, local file, folder, URL, or platform export; classifies it into one of four use cases (teaching, files & work data, conversation analysis, personal data & places) and routes to one of 17 style systems; generates a responsive HTML page with inline CSS/JS, search/filter/chart interactions, and generated bitmap assets when useful; verifies rendering, mobile viewports, contrast, keyboard and touch access in a browser; then hands back the file path. For sources the user hasn't exported yet (Spotify, Google Photos, etc.), it first provides export instructions.
- Personal data recap: turn Amazon orders, Spotify history, or Uber trips into a timeline, map, or spending atlas
- Chat analysis: turn a WhatsApp/WeChat 1:1 export into a privacy-first relationship recap, or a Slack export into a contribution scoreboard
- Documents and work data: turn CSVs, PDFs, email archives, or CI logs into dashboards, e-guides, or terminal-style debugging evidence pages
- Teaching: have the agent build an interactive teaching site instead of a long explanation
- Knowledge organization: turn Notion/Obsidian exports or Kindle highlights into browsable archives or reflective reading pages
- Team sharing: turn a strategy essay or report into a paged editorial carousel
What are this skill's strengths and limitations?
- Very broad coverage: 60 source prompts plus 17 design systems, from PDFs to GPX tracks
- Enforced style-fidelity gate and browser verification reduce generic-looking output
- Sensible privacy defaults: masked intimate chats, observational-only handling for medical/legal sources
- Local-first static single-file HTML with no CDN dependencies — works offline or on any static host
- Install paths documented for Claude Code, Codex, claude.ai, Claude API, and other agentskills.io clients
- SKILL.md is very large (workflow, taxonomy, checklists), consuming meaningful context budget
- Page quality depends on the host agent's code execution and browser-verification ability; weaker runtimes may skip real verification
- Privacy is prompt-level convention, not technical isolation — generated HTML embeds source data client-side
- Not compatible with ChatGPT custom GPTs or Gemini Gems; claude.ai requires a paid plan and skills don't sync across surfaces
- The optional standalone CLI requires your own ANTHROPIC_API_KEY or OPENAI_API_KEY; no test suite is documented
How do you install this skill?
Most CLI/editor agents: npx skills add clockless-org/html-anything. Claude Code: git clone https://github.com/clockless-org/html-anything ~/.claude/skills/html-anything, then restart. Codex: git clone https://github.com/clockless-org/html-anything "${CODEX_HOME:-$HOME/.codex}/skills/html-anything", then restart. claude.ai web: download html-anything-skill.zip from releases, upload via Settings → Features → Skills (requires Pro/Max/Team/Enterprise with code execution). Claude API: upload the zip via the /v1/skills endpoint and reference the returned skill_id. Note: ChatGPT custom GPTs and Gemini Gems cannot load this format.
How do you use this skill?
After installing, just ask naturally — no need to mention HTML or styles. Examples: "Teach me the solar system.", "What does my Amazon order history say about me?", "Help me understand this CSV.", "Recap our 1:1 chat, mask names." If you name a source but have no file yet, the skill walks you through the export first. Steer style in natural language: "make it a tutorial", "more dashboard-like", "make it a carousel".
How does this skill compare with similar options?
Inspired by Claude Code team member Thariq Shihipar's essay 'The Unreasonable Effectiveness of HTML', treating HTML as a richer response format than Markdown; the source does not name direct competitors.