[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80222":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":23,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":14,"starSnapshotCount":14,"syncStatus":15,"lastSyncTime":42,"discoverSource":43},80222,"html-anything","clockless-org\u002Fhtml-anything","clockless-org","Turn any file into a beautiful, interactive, shareable HTML — WhatsApp logs, PDFs, transcripts, code, anything.",null,"JavaScript",68,4,1,0,2,3,5,6,48.1,"MIT No Attribution",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38],"agent-skill","amazon","atlas","claude-code","codex","dashboard","data-visualization","html-converter","kindle","llm-agent","offline-html","personal-data","single-file-html","spotify","2026-06-12 04:01:27","# html-anything\n\n> **The agent skill that turns anything into a beautiful, shareable HTML page.**\n> Rich answers, files, folders, URLs, and messy service exports become verified\n> single-file `.html` artifacts with source-aware parsing, automatic style\n> routing, **60 source prompts**, and **17 concrete style systems**. Short chats\n> stay short; page-worthy answers become pages.\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fskills.sh\u002Fclockless-org\u002Fhtml-anything\">\u003Cimg alt=\"skills.sh\" src=\"https:\u002F\u002Fskills.sh\u002Fb\u002Fclockless-org\u002Fhtml-anything\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything\u002Fstargazers\">\u003Cimg alt=\"GitHub stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fclockless-org\u002Fhtml-anything?style=flat-square\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fclockless-org\u002Fhtml-anything?style=flat-square\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fprompts\u002Fsources\">\u003Cimg alt=\"60 source prompts\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fsources-60%20prompts-7b40e0?style=flat-square\">\u003C\u002Fa>\n  \u003Ca href=\".\u002Fprompts\u002Fstyles\">\u003Cimg alt=\"17 style systems\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstyles-17%20systems-a03b00?style=flat-square\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002F\">\u003Cimg alt=\"11 demos\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fexamples-11%20demos-0f766e?style=flat-square\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002F\">\u003Cstrong>→ Open the live demo gallery\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fp>\n\n`html-anything` works inside Codex and Claude Code. Ask for a teaching site,\ndrop in a PDF, upload a CSV, point it at a folder, or hand it an export like\nAmazon orders, Kindle highlights, Spotify history, WeChat \u002F iMessage,\nGoogle Photos Takeout, logs, GPX, and more. The skill figures out the source,\nchooses the right use case and style, builds the page, checks it in a browser,\nand hands back a live HTML artifact instead of a long Markdown reply.\n\n## Why this exists\n\nAI agents are outgrowing plain Markdown. Inspired by Claude Code team member\nThariq Shihipar's viral\n[“The Unreasonable Effectiveness of HTML”](https:\u002F\u002Fx.com\u002Ftrq212\u002Fstatus\u002F2052809885763747935),\n`html-anything` treats HTML as the richer response format: denser, more visual,\nmore interactive, and easier to share when the answer is really a page.\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"100%\" valign=\"top\">\n\u003Ch3>Before: plain response\u003C\u002Fh3>\n\u003Cp>A long scroll of text for “Teach me solar system”. Useful, but hard to explore.\u003C\u002Fp>\n\u003Cimg src=\".\u002Fdocs\u002Fplain-response-before.jpg\" alt=\"Plain AI response about the solar system\" width=\"100%\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\n\u003Cstrong>↓\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Same intent, richer response format\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"100%\" valign=\"top\">\n\u003Ch3>After: live HTML artifact\u003C\u002Fh3>\n\u003Cp>The same teaching goal becomes a visual, interactive learning page.\u003C\u002Fp>\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fsolar-system-studio\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fsolar-system-studio.gif\" alt=\"html-anything solar system teaching studio (animated demo)\" width=\"100%\">\u003C\u002Fa>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Preview\n\n\u003Csub>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](https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002F) to see the rendered outputs.\u003C\u002Fsub>\n\n### Teaching Studios\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fsolar-system-studio\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fsolar-system-studio.gif\" alt=\"Teach a concept demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fsolar-system-studio\u002Foutput.html\">Teach a concept →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: teaching brief · Style: \u003Ccode>teaching\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Teach me the solar system.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fmarkdown\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fmarkdown.gif\" alt=\"Learn from long-form text demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fmarkdown\u002Foutput.html\">Learn from long-form text →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: Markdown file · Style: \u003Ccode>architectural-spread\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Help me understand this essay.\u003C\u002Fcode> (with a markdown file attached)\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fdocx\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fdocx.gif\" alt=\"Learn from a document demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fdocx\u002Foutput.html\">Learn from a document →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: DOCX file · Style: \u003Ccode>kami-reading\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Make this memo easier to read.\u003C\u002Fcode> (with a docx file attached)\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\n### Files & Work Data\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Feditorial-carousel\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Feditorial-carousel.gif\" alt=\"Argument as sequence demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Feditorial-carousel\u002Foutput.html\">Argument as sequence →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: strategy essay · Style: \u003Ccode>editorial-carousel\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Help me share this strategy essay with my team.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fpdf\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fpdf.gif\" alt=\"Guide from dense document demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fpdf\u002Foutput.html\">Guide from dense document →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: PDF report · Style: \u003Ccode>digital-eguide\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Summarize this report and let me browse it section by section.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Femail\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Femail.gif\" alt=\"Inbox or workstream audit demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Femail\u002Foutput.html\">Inbox or workstream audit →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: Mbox archive · Style: \u003Ccode>soft-saas\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>What's happening in my inbox? Show me the open loops.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fci-log\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fci-log.gif\" alt=\"Debugging evidence demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fci-log\u002Foutput.html\">Debugging evidence →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: CI log · Style: \u003Ccode>terminal-cli\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Why did this build fail? Walk me through it.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\n### Conversation Analysis\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fwechat-couple\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fwechat-couple.gif\" alt=\"Private chat recap demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fwechat-couple\u002Foutput.html\">Private chat recap →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: 1:1 chat export · Style: \u003Ccode>love-romance-3d\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Recap our 1:1 chat history. Keep it private — mask names.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fslack\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fslack.gif\" alt=\"Group contribution analysis demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fslack\u002Foutput.html\">Group contribution analysis →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: team chat export · Style: \u003Ccode>kinetic-scoreboard\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Who's driving the conversation in this Slack channel?\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\n### Personal Data & Places\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fkindle-highlights\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Fkindle-highlights.gif\" alt=\"Reflective reading archive demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Fkindle-highlights\u002Foutput.html\">Reflective reading archive →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: My Clippings.txt · Style: \u003Ccode>living-essay\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>What have I been reading and thinking about?\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Ftravel-history\u002Foutput.html\">\u003Cimg src=\".\u002Fdocs\u002Fexample-demos\u002Ftravel-history.gif\" alt=\"Mobility recap demo\" width=\"100%\">\u003C\u002Fa>\u003Cbr>\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fclockless-org.github.io\u002Fhtml-anything\u002Fexamples\u002Ftravel-history\u002Foutput.html\">Mobility recap →\u003C\u002Fa>\u003C\u002Fstrong>\u003Cbr>\n\u003Csub>Source: Uber\u002FLyft CSV · Style: \u003Ccode>global-travel\u003C\u002Fcode>\u003C\u002Fsub>\u003Cbr>\n\u003Csub>\u003Cstrong>Ask:\u003C\u002Fstrong> \u003Ccode>Where have I been this year? Show me on a map.\u003C\u002Fcode>\u003C\u002Fsub>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Install\n\nPick the path for your agent:\n[Claude Code](#claude-code) ·\n[Codex](#codex) ·\n[claude.ai](#claudeai-web) ·\n[Claude API](#claude-api) ·\n[Cursor \u002F Cline \u002F Windsurf \u002F OpenCode \u002F Goose \u002F Letta \u002F …](#one-command-for-most-cli-and-editor-agents) ·\n[ClawHub](#clawhub-publish)\n\n### One command for most CLI and editor agents\n\n```bash\nnpx skills add clockless-org\u002Fhtml-anything\n```\n\nWorks with **Claude Code**, **Codex**, **Cursor**, **Cline**, **Windsurf**,\n**OpenCode**, **Goose**, **Letta**, **Roo Code**, **Kiro**, and any other\nagent following the [open agent-skills spec](https:\u002F\u002Fagentskills.io).\nThe CLI also pings [skills.sh](https:\u002F\u002Fskills.sh\u002Fclockless-org\u002Fhtml-anything)\nso installs feed the public leaderboard.\n\n### Claude Code\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything ~\u002F.claude\u002Fskills\u002Fhtml-anything\n```\n\nRestart Claude Code so it loads `SKILL.md`. To update later:\n`git -C ~\u002F.claude\u002Fskills\u002Fhtml-anything pull`.\n\n### Codex\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything \"${CODEX_HOME:-$HOME\u002F.codex}\u002Fskills\u002Fhtml-anything\"\n```\n\nRestart Codex.\n\n### claude.ai (web)\n\n1. Download [`html-anything-skill.zip`](https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything\u002Freleases\u002Flatest\u002Fdownload\u002Fhtml-anything-skill.zip) (`SKILL.md` + `prompts\u002F`, including style references).\n2. In claude.ai: **Settings → Features → Skills → Upload a Skill** → drop the zip.\n\nRequires **Pro \u002F Max \u002F Team \u002F Enterprise** with code execution enabled.\nCustom skills on claude.ai are per-user; each teammate uploads their own copy.\n\n### Claude API\n\n```bash\ncurl https:\u002F\u002Fapi.anthropic.com\u002Fv1\u002Fskills \\\n  -H \"x-api-key: $ANTHROPIC_API_KEY\" \\\n  -H \"anthropic-beta: skills-2025-10-02,code-execution-2025-08-25,files-api-2025-04-14\" \\\n  -F file=@html-anything-skill.zip\n```\n\nThen reference the returned `skill_id` in the `container` of any message.\nSee the [Skills API guide](https:\u002F\u002Fplatform.claude.com\u002Fdocs\u002Fen\u002Fbuild-with-claude\u002Fskills-guide).\nUploaded skills are workspace-wide.\n\n### ClawHub (publish)\n\nThis repo carries `.clawhubignore` so only `SKILL.md` + `prompts\u002F` ship,\nincluding canonical style references used by installed agents:\n\n```bash\nnpm i -g clawhub && clawhub login\nclawhub publish . --slug html-anything --version 0.1.1 --tags latest\n```\n\n### Where it does not work\n\n| Surface | Status |\n|---|---|\n| ChatGPT \u002F chatgpt.com | ❌ Custom GPTs are a different format. Use **OpenAI Codex CLI** instead (above). |\n| Gemini web \u002F Google Gems | ❌ Different format. Use **Gemini CLI** (`npx skills add`) instead. |\n| Anthropic \u002F Claude Desktop | ✅ Reads `~\u002F.claude\u002Fskills\u002F` — same as Claude Code. |\n\n> ℹ 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.\n\n## Use\n\nJust ask your real question. You do not need to mention HTML, pages, dashboards,\nreports, atlases, or any of the design vocabulary — the skill decides when an\nanswer should be a page and ships one.\n\n```text\nTeach me the solar system.\nWhat does my Amazon order history say about me?\nHelp me understand this CSV.\nWhat did I read in 2025?\nWalk me through this GitHub repo.\nHow did last quarter go?\nMake sense of this messy log file.\nRecap our 1:1 chat from this year.\n```\n\nEach of these triggers a polished, single-file HTML page in the right design\nsystem. Short conversational asks stay short.\n\nIf you name a data source but have no file yet (*\"my Spotify history\"*,\n*\"my WhatsApp chat\"*, *\"my Google Photos Takeout\"*), the skill walks you\nthrough the export first.\n\n## Input And Output\n\n| Input | What you give | What you get |\n|---|---|---|\n| Rich answer | A topic, analysis request, comparison, recap, brief, or teaching goal | A readable, styled HTML artifact instead of a long written answer |\n| Idea | A short brief, e.g. \"make a solar system teaching site\" | A generated educational \u002F interactive HTML page |\n| File | CSV, JSON, Markdown, PDF, DOCX, chat export, log, transcript, statement | A live page designed for that file |\n| Folder | Notes vault, Google Photos Takeout, Notion export, repo, exported archive | A browsable atlas \u002F dashboard \u002F audit page |\n| URL | Article, GitHub repo, public webpage | A shareable HTML reading or exploration page |\n| Export request | \"My Amazon orders\", \"my Spotify history\", \"my relationship chat\" | Export instructions first, then a live HTML page |\n\nThe output is a browser page, not a chat reply. Most outputs are a single\n`output.html`. When the page needs generated images or other local\nassets, the skill returns `output.html + assets\u002F`. Ask for \"single-file\"\nif you need everything in one HTML file.\n\n## Automatic Usage Routing\n\nYou do not need to choose a style. The default is `auto`.\n\nRouting has three layers:\n\n| Layer | Meaning |\n|---|---|\n| Use case | The user's job: teaching, files\u002Fwork data, conversation analysis, or personal data\u002Fplaces |\n| Source | The input shape: prompt, CSV, PDF, DOCX, chat export, log, repo, folder, URL |\n| Style | The design system + layout system used to make the HTML readable |\n\nStyles are not CSS skins. The skill picks the system from the content, then\nbuilds the page inside that system. Every non-fallback style has a checked-in\nlive example and screenshot preview.\n\nStyle fidelity is part of the contract: when a style is based on a reference\nHTML or screenshot, the generated page should reproduce the reference's first\nviewport, component vocabulary, interaction model, motion grammar, and visual\nabsence rules. Source modules are translated into the style instead of forcing\nevery output into the same dashboard\u002Freport shape.\n\nCanonical style references can live under `prompts\u002Fstyles\u002Freferences\u002F\u003Cstyle>\u002F`,\nso the published skill can use the same structural target as the demo gallery\nwithout bundling every example. Style-specific assets stay beside their own\nreference pack and are copied only when that style needs them.\n\n| Usage pattern | Style |\n|---|---|\n| Unknown or mixed inputs | `default` (Insight Brief) |\n| Tutorials, lessons, explainers, \"teach me\" prompts | `teaching` (Lesson Lab) |\n| 1:1 chats and intimate message exports | `love-romance-3d` (Keepsake 3D Rhythm) |\n| Reflective essays, Kindle highlights, idea notes, concept-heavy reading archives | `living-essay` (Mycelium Writing Environment) |\n| Multi-participant activity streams, team chats, ranked contributors, owner\u002Freps\u002Fplayers by workload | `kinetic-scoreboard` (Kinetic Championship) |\n| Personal histories — chronological (orders, history, listening, health) **and** topical (Notion \u002F Obsidian vaults) | `timeline-story` (Timeline Story) |\n| Travel history, Uber\u002FLyft exports, and personal mobility recaps | `global-travel` (Global Travel Map) |\n| Places, trips, routes, geotagged photos | `map-atlas` (Map Atlas) |\n| Contacts, communities, social payments | `network-map` (Network Map) |\n| Support mailboxes, email campaigns, onboarding, customer-success queues | `soft-saas` (Soft SaaS Console) |\n| Finance, spreadsheets, logs, backlog, operational data | `dashboard` (Ops Console) |\n| Essays, articles, reading lists, bookmarks, PDFs, DOCX, legal\u002Fmedical\u002Flab records | `document` (Document Review) |\n| Long prose, DOCX memos, articles, essays, and manuscripts meant for sustained reading | `kami-reading` (Kami Longform Reader) |\n| Long-form visual explainers, object-focused articles, architectural split-screen editorial requests | `architectural-spread` (Architectural Editorial Spread) |\n| E-guides, PDF guides, creator guides, playbooks, lead magnets | `digital-eguide` (Digital E-Guide Spread) |\n| Brand strategy essays, founder letters, article takeaways, lightweight reports meant to be shared as a sequence | `editorial-carousel` (Editorial Carousel) |\n| Explicit terminal, CLI, shell, mainframe, hacker-console requests | `terminal-cli` (Terminal CLI, explicit override) |\n| Logs, PR patches, stack traces, CI failures, repos | `developer` (Terminal Evidence Workbench) |\n\nYou can still steer it naturally: \"make it more tutorial-like\", \"more\napp-like\", \"less academic\", \"make it a carousel\", \"more dashboard-like\",\nor \"more playful\".\n\nReusable style prompts live in [`prompts\u002Fstyles\u002F`](.\u002Fprompts\u002Fstyles\u002F).\nThe shared structural contract is\n[`prompts\u002Fstyles\u002F_system.md`](.\u002Fprompts\u002Fstyles\u002F_system.md). The internal\nstyle catalog lives in [`prompts\u002Fstyles\u002Fcatalog.json`](.\u002Fprompts\u002Fstyles\u002Fcatalog.json):\nit records the four use cases plus each style's triggers, best sources,\nexample, preview, required primitives, and avoid rules so generation can stay\nstyle-faithful without asking users to pick options. There is a fallback\n`default` style plus 17 concrete style systems, each with a live example and\npreview asset.\n\nExample explicit style override:\n\n```bash\nnpx tsx src\u002Fcli.ts examples\u002Fpdf\u002Finput.pdf \\\n  --style digital-eguide \\\n  --out \u002Ftmp\u002Fbattery-storage-guide.html \\\n  --title \"Mid-Market Battery Storage Field Guide\"\n```\n\n## Use Cases And Sources\n\nSources can be endless, but the skill routes them into four stable use cases.\nEach use case can use one or more style systems.\n\n| Use case | Example sources | Likely styles |\n|---|---|---|\n| Teaching Studios | A short teaching brief, article, lesson outline, concept note, URL, Markdown, DOCX, or PDF\u002Fdocument simplification request | `teaching`, `architectural-spread`, `kami-reading` |\n| Files & Work Data | CSV \u002F TSV, spreadsheet-style exports, JSON, JSONL, logs, CI output, PR patches, stack traces, repos, email\u002Fsupport archives, bank transactions, invoices, QuickBooks, calendars, issue trackers, Markdown, PDF, DOCX, bookmarks, URL lists, bibliographies, research records, slide-style carousel outputs | `dashboard`, `soft-saas`, `document`, `kami-reading`, `architectural-spread`, `digital-eguide`, `editorial-carousel`, `developer`, `terminal-cli` |\n| Conversation Analysis | WeChat, iMessage-style CSV, Slack, Discord, Telegram, email-style threads | `love-romance-3d`, `kinetic-scoreboard`, `network-map` |\n| Personal Data & Places | Amazon orders, Apple Health, browser history, YouTube, Spotify, Twitch, Kindle highlights, Venmo \u002F PayPal, AI chat exports, notes vaults, Google Maps saved places, travel history, GPX, KML, itinerary CSV, location history | `timeline-story`, `global-travel`, `living-essay`, `network-map`, `map-atlas` |\n\nUse case is user-facing; style is internal. The user never has to name a\nstyle — natural asks like *\"help me understand this CSV\"* or *\"teach me the\nsolar system\"* are enough; the skill picks the right system automatically.\n\nThe detailed source-specific instructions live in [`prompts\u002Fsources\u002F`](.\u002Fprompts\u002Fsources\u002F).\n\n## Defaults\n\n- The skill chooses the style automatically.\n- The skill samples large sources, but renders the full data where practical.\n- The skill checks the page in a browser before handing it back.\n- Generated pages are local-first and static. They can be opened directly or hosted anywhere static HTML works.\n- Generated HTML can embed private source data client-side. Treat the output as sensitive as the original export.\n- Sensitive-record outputs are for organization and review only, not medical, legal, tax, accounting, immigration, insurance, or investment advice.\n\n## Developer Note\n\nThis repo also contains a standalone parser \u002F CLI framework used by some\nexamples, but the primary product surface is the agent skill. Users should\nnot need to understand the internal implementation to use html-anything.\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fclockless-org\u002Fhtml-anything\ncd html-anything\nnpm install\nexport ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...\nnpx tsx src\u002Fcli.ts examples\u002Fcsv\u002Finput.csv --out \u002Ftmp\u002Fcustomers.html\n```\n\n## License\n\n[MIT-0](.\u002FLICENSE)\n","html-anything 是一个能够将任意文件转换为美观、交互性强且可分享的 HTML 页面的工具。它支持多种文件类型，包括 WhatsApp 日志、PDF、转录文本、代码等，并通过源感知解析、自动样式路由、60 个源提示和 17 种具体样式系统生成单文件 `.html` 文档。此项目特别适用于需要将复杂数据或长文本以更直观、易读的形式展示的场景，例如教学网站、数据分析报告或个人资料整理。基于 JavaScript 构建，易于集成到现有的工作流中。","2026-06-11 03:59:42","CREATED_QUERY"]