HTML It — Design skill for Claude Code

html-it

A Claude skill that teaches your agent to produce **HTML output instead of markdown** — across four levels of capability.

Based on [Thariq Shihipar](https://x.com/trq212)'s article [_Using Claude Code: The Unreasonable Effectiveness of HTML_](https://x.com/trq212/status/2052809885763747935). Go read the source — this skill is one community implementation of his ideas.

Live examples gallery (Thariq's): **[thariqs.github.io/html-effectiveness](https://thariqs.github.io/html-effectiveness/)**

---

What it does

When you ask your agent for a doc, plan, report, review, design, dashboard, or editor — it builds an HTML artifact at the right level instead of dumping markdown.

**The four levels:**

Level	What	Examples
1 — Static Doc	HTML as a prettier markdown	Specs, reports, explainers, plans
2 — Visual Artifact	Adds SVG, tables, layouts	Design systems, decks, dashboards
3 — Two-Way Interactive	Sliders/toggles + export button	Tuning, A/B picks, prompt iteration
4 — Throwaway Tool	Purpose-built mini-app	Triage boards, config editors

Each level adds capability and effort. Most agent output stops at Level 1 — the unlock is recognising when you actually need 3 or 4.

---

Install

In your Claude Code project:

git clone https://github.com/robonuggets/html-it ~/.claude/skills/html-it

Or for a project-specific install:

cd your-project
mkdir -p .claude/skills
git clone https://github.com/robonuggets/html-it .claude/skills/html-it

Then in Claude Code, the skill triggers on:

• /html-it
• "html-it" / "html this" / "render as html"
• "build me an html for X" / "make an html artifact"

---

Quick prompts (one per level)

**Level 1 (static doc):**

Read this folder and produce an HTML implementation plan — TL;DR at top, key code snippets inline, sticky TOC on the left. Easy to digest on mobile.

**Level 2 (visual artifact):**

Read the rate limiter