html-everything

---
name: html-everything
description: Use when you want to turn any blob — Markdown, JSON, plain text, or a doc URL — into a single self-contained editorial HTML page with clickable links, content-aware styling, and no external deps beyond Google Fonts.
source: https://github.com/iharnoor/html-everything
generated: 2026-05-12T18:04:02.784Z
category: tool
audience: creators
---

## Tutorials

- https://skillmake.xyz/v/html-everything.mp4

## When to use

- Wrapping a scrape, transcript, or report dump into a shareable HTML page without spinning up a static-site generator
- Turning agent-produced Markdown or JSON output into a stylized, sendable artifact in one slash command
- Linkifying every URL in a blob automatically — no manual `[text](url)` rewriting
- Generating a quick editorial-scorecard layout for content drops where Notion or Docs would be overkill

## Key concepts

### One blob in, one HTML file out

Pass in Markdown, JSON, plain text, or a URL to a doc. The skill emits a single `.html` file to `$HTMLE_OUTPUT_DIR` (defaults to `~/Documents/html-everything/`) — no project scaffold, no build step, no API keys.

### Editorial scorecard layout

Default output uses an editorial typographic system — Archivo Black for display, Inter Tight for body, JetBrains Mono for code. Layout is responsive and self-contained; only external assets are the Google Font requests.

### Auto-detect input format

The skill identifies whether the blob is Markdown, JSON, plain text, or a URL on its own — and routes through the matching renderer. You don't pass a format flag; you pass the blob.

### Content-aware theming

Styling subtly shifts based on detected content type — tech reports, finance briefs, sports recaps, etc. — so a market-cap rundown doesn't look identical to a game wrap, even though both came through the same skill.

### Auto-linkified URLs

Every URL in the input — even bare `https://...` strings — is wrapped as a clickable anchor in the output. No need to pre-format links.

## API reference

```
Install
```

Clone the repo and symlink the skill folder into Claude Code's user skills directory.

```
git clone https://github.com/iharnoor/html-everything ~/Developer/html-everything
ln -s ~/Developer/html-everything/skills/html-everything ~/.claude/skills/html-everything
```

```
/html-everything <path | json | url>
```

User-invocable slash command. Pass a Markdown / JSON / text file path, a raw JSON blob, or a URL. Omit the argument to paste content inline.

```
/html-everything ~/Documents/scrape.md
/html-everything '{"title": "Q1 picks", "items": [...]}'
/html-everything https://some-doc-url.com/report
/html-everything          # then paste content inline
```

```
HTMLE_OUTPUT_DIR (env)
```

Override the output directory. Defaults to `~/Documents/html-everything/`.

```
export HTMLE_OUTPUT_DIR=~/Sites/briefs/
/html-everything ~/Documents/scrape.md
# → writes to ~/Sites/briefs/<slug>.html
```

## Gotchas

- Output is self-contained but does pull Google Fonts at view time — totally air-gapped clients will see the system font fallback instead.
- Auto-detection runs on the raw blob — extremely mixed inputs (Markdown with embedded JSON) may route through whichever pattern matched first; pre-clean the blob if you want a specific renderer.
- Slash-command-only — there's no CLI binary, so it lives inside Claude Code's session. Move the symlink if you want it scoped per-project instead of user-wide.
- The skill is a recipe executed in-context — no API keys, no scaffold, no dependencies. That also means you can't `npm i` it, only symlink-install.

---
Generated by SkillMake from https://github.com/iharnoor/html-everything on 2026-05-12T18:04:02.784Z.
Verify against source before relying on details.

File: ~/.claude/skills/html-everything/SKILL.md