HTML Anything Turns Your Local Agent Into a 75-Skill HTML Studio

Your agent can write HTML, but left to its own devices it freestyles: random fonts, sloppy spacing, lorem ipsum. HTML Anything — a 9k-star, Apache-2.0 project from the team behind Open Design — is a local editor that fixes this with 75 skill templates, each one a SKILL.md folder of hard design constraints your agent has to follow.

Why This Skill Matters

The premise: Markdown is good for the writer, HTML is good for the reader — and in the agentic era your local agent writes the HTML, so you never touch CSS. The app auto-detects the coding-agent CLIs already installed on your machine — Claude Code, Codex, and Gemini CLI among the nine its detection table lists — and reuses the session you are already logged into. No API key, no new subscription.

The 75 skills sort into 9 deliverable surfaces: magazine articles, keynote decks, résumés, posters, Xiaohongshu cards, tweet cards, web prototypes, data reports, and Hyperframes videos. Every skill ships an example.html in the repo, so you can see the output before you generate anything.

Installation

The quickstart is four commands:

git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm -F @html-anything/next dev
# → http://localhost:3000

Open the browser and the top bar shows whichever signed-in CLIs it found on your PATH. No API key required — your existing Claude, Cursor, Codex, or Gemini subscription does the work.

Real Workflow: Turn a Data Dump Into a Data Report

1. Pick a skill from the picker — filter by mode (prototype, deck, frame, social, office, doc) and scenario. For a metrics review, pick the data-report skill: it turns CSV or Excel input into a visual report page.
2. Paste your content into the left pane. The editor accepts Markdown, CSV, TSV, JSON, SQL, or plain text, and parses tabular data in the browser — nothing uploads.
3. Press ⌘+Enter. The app spawns your CLI and streams its stdout back over SSE, appending the HTML into a sandboxed iframe as it generates — you watch the page render line by line, and you can interrupt and re-prompt mid-generation.
4. Export. One click renders a high-DPI PNG for X or Xiaohongshu, inlines the CSS for a WeChat Official Account paste, or downloads a self-contained .html file.

Second Workflow: Build a Keynote Deck

Switch the picker to deck mode — 20 keynote skills, including a Swiss International layout and a magazine-ink editorial deck vendored from op7418/guizang-ppt-skill. Paste your outline, generate, then navigate slides with the arrow keys and export to PDF. The deck skills carry the same constraints as the rest: an 8 px baseline grid, contrast of at least 4.5, CJK-first font stacks, and a must-use-real-data rule that bans lorem ipsum.

Tips

• The skills are folders, not plugins: each is a SKILL.md plus an example.html under next/src/lib/templates/skills/, with extended frontmatter (mode, scenario, surface, preview, design_system). Adding one is a copy-edit-restart cycle.
• Generation runs on whatever CLI you pick in the top bar — swap CLIs without re-authorizing anything, since each uses its own existing login.
• The preview iframe is sandboxed (allow-scripts allow-same-origin), so Tailwind CDN and Google Fonts work while cookies and localStorage stay quarantined from the host page.
• For repeated formats — the same weekly report, the same X card — reuse the same skill so the output style stays consistent across issues.

When Not to Use This

This is a local, single-operator tool: its API routes spawn your CLI with permissive flags and are gated to loopback hosts by default, so it is not a shared web service. If you need pixel-perfect brand control or a real design tool, use one — this is for fast, good-enough publishable artifacts. And it needs a signed-in coding-agent CLI on the same machine; the web layer can deploy to Vercel, but the agent stays on your laptop.

See the leaderboard for more skills.