New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

HTML Artifacts

by dogum in dogum/html-artifacts

Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor.

Apache-2.0Auto-check passedFrontend & Design

Install HTML Artifacts

skills CLI
$ npx skills add dogum/html-artifacts --skill html-artifacts -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install dogum/html-artifacts html-artifacts --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/dogum/html-artifacts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/html-artifacts .claude/skills/html-artifacts && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
html-artifacts
GitHub stars
151
Token cost
~2.1k tokens
SKILL.md length
1,029 words
Files
13 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
Apache-2.0

At a glance

Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor.

  • Works in 8 steps: One self-contained .html file. CSS in ,… → Readable in five seconds. A , a heading,… → Real layout, not translated markdown. A… → …
  • The user asks for a doc
  • SKILL.md covers Reach for HTML when any of…, Stay in markdown when, Universal rules and Workflow, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

HTML Artifacts is an agent skill from dogum/html-artifacts. Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use when the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "dashboard," "chart," "playground," or a one-off "editor" or "tool" for triaging, reordering, or tuning something, even without…

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files (for example `references/accessibility-and-print.md`, `references/code-review-and-pr.md` and `references/custom-editors.md`).

It sits in Frontend & Design, covering HTML artifacts, Diagrams and Pull requests. The repository describes itself as: A Claude skill for producing self-contained HTML artifacts instead of markdown when the task warrants it. The licence is Apache-2.0.

When your agent uses it

  • The user asks for a doc
  • A one-off editor
  • Tool for triaging
  • Tuning something

Example prompts

  • “writeup,”
  • “report,”
  • “explainer,”
  • “/html-artifacts”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. One self-contained .html file. CSS in , JS in , images as inline SVG or data URIs. No build step. External scripts only from the CDNs the…
  2. Readable in five seconds. A , a heading, and a one-paragraph framing sentence or TL;DR before any substance.
  3. Real layout, not translated markdown. A comparison gets columns. A timeline gets drawn. A diff renders as a diff. If the page is headings…
  4. Tasteful by default. Calm typography, 60 to 75 characters per line, restrained color that carries meaning. No gradient heroes, no emoji…
  5. Works at phone width and in both themes. Viewport meta, relative units, layouts that wrap. Define light tokens on :root, redefine them…
  6. Accessible baseline. Semantic elements, labelled controls, keyboard-reachable interactions, visible focus, color never the only signal…
  7. Editors export back to text. Non-negotiable. Anything with manipulable state ends with "copy as markdown / JSON / prompt." The round trip…
  8. Verify before delivering. If a browser is available (Playwright or Chromium in Claude Code, Cowork, or a cloud session), render the file…

What it can do on your machine

Read from SKILL.md and the folder at commit d54982f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HTML Artifacts loads about 2.1k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 246 tokens; SKILL.md has 1,029 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~246
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~17k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dogum/html-artifacts at commit d54982f, republished under its Apache-2.0 licence (© dogum). 1,029 words, ~2,092 tokens.

Download SKILL.mdSave it as .claude/skills/html-artifacts/SKILL.md (or your agent's skills folder). This skill also uses 12 other files; get the full folder from GitHub.
name
html-artifacts
description
Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use when the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "dashboard," "chart," "playground," or a one-off "editor" or "tool" for triaging, reordering, or tuning something, even without saying "HTML" or "artifact." Also when asked to "explain," "compare," "explore options for," or "walk through" a non-trivial topic. Always use it when the deliverable is an .html file or a web page, even if the user names the file or asks for HTML directly; the skill is how the page gets checked, not just written. Stay in markdown for short replies, code-only answers, terminal-style instructions, and anything the reader will read once and discard.
license
Apache-2.0
metadata.version
2.0.0
metadata.homepage
https://dogum.github.io/html-artifacts/

HTML Artifacts

Markdown is the default agent output. For anything longer than a handful of sentences it is a poor one: it cannot put two options side by side, draw a real diagram, be interactive, or be shared as a page. When the artifact is the deliverable, the reader will do something with it: read it carefully, share it, hand it to an implementer, paste edits back. Make it HTML.

The skill is a judgment call, not a format switch. Most of what follows is about deciding well and then checking the result, because the model already knows how to write HTML.

Reach for HTML when any of these hold

  • Comparison. Two or more options the reader must weigh. Side by side beats stacked.
  • Spatial information. Diffs, call graphs, module maps, flowcharts, timelines, before/after. Position carries meaning.
  • Interaction matters. Easing curves, parameter tuning, state machines, simulations. Things the reader needs to feel.
  • Reference material. Navigated non-linearly: tabs, collapsibles, a glossary in the margin, jump links.
  • Color or hierarchy carries meaning. Severity, status, syntax, design tokens, data series.
  • Data. More than a dozen numbers, a trend, a distribution. A table with sort and filter, or a chart.
  • One-off editor. The reader manipulates a thing (drags tickets, toggles flags, tunes a prompt) and needs the result back as text.
  • It will be shared. A spec to leadership, a PR writeup to reviewers, a report to a team. People read pages; they skim files.
  • Length. Past roughly 100 lines of markdown, navigation and layout earn their keep.

Stay in markdown when

  • The reply is conversational, or the answer is a few sentences. One question, one answer, done.
  • The output is code, a config block, a command sequence, or a diff the user will apply.
  • The user is iterating fast on something disposable ("just summarize this file", "what does this function do").
  • The document will live in git and be diffed in PRs over time. HTML diffs are noisy. Offer an HTML view alongside if review would benefit.
  • The user asked for markdown, a specific format, or "no formatting."

If unsure, ask one question of yourself: will the reader do anything with this beyond reading it once? If not, markdown. HTML costs two to four times the tokens and takes longer; don't manufacture a use case.

Universal rules

Every artifact must satisfy all of these.

  1. One self-contained .html file. CSS in <style>, JS in <script>, images as inline SVG or data URIs. No build step. External scripts only from the CDNs the target surface allows (see references/harness-mechanics.md), and only when a library genuinely earns its place.
  2. Readable in five seconds. A <title>, a heading, and a one-paragraph framing sentence or TL;DR before any substance.
  3. Real layout, not translated markdown. A comparison gets columns. A timeline gets drawn. A diff renders as a diff. If the page is headings and paragraphs, it should have been markdown.
  4. Tasteful by default. Calm typography, 60 to 75 characters per line, restrained color that carries meaning. No gradient heroes, no emoji headings, no card grids for their own sake. references/matching-your-style.md has the baseline CSS and the list of tells to avoid.
  5. Works at phone width and in both themes. Viewport meta, relative units, layouts that wrap. Define light tokens on :root, redefine them under prefers-color-scheme: dark and under [data-theme="dark"] so both system preference and a manual toggle work.
  6. Accessible baseline. Semantic elements, labelled controls, keyboard-reachable interactions, visible focus, color never the only signal. references/accessibility-and-print.md has the checklist.
  7. Editors export back to text. Non-negotiable. Anything with manipulable state ends with "copy as markdown / JSON / prompt." The round trip is the point.
  8. Verify before delivering. If a browser is available (Playwright or Chromium in Claude Code, Cowork, or a cloud session), render the file headless, screenshot it at desktop and phone width, check the console for errors, and fix what you see. If no browser is available (Claude.ai chat, an artifact-only surface, no shell), do not stall or apologize: run the read-through checklist in references/verify-before-delivering.md instead and deliver. Either way, the artifact is checked once before the user sees it.
Show full SKILL.md (342 more words)Show less

Workflow

  1. Decide. Run the two lists above. Say in one line what you're making and why HTML.
  2. Pick the reference. Read the matching file from the index below. They are short; read two if the request spans categories.
  3. Match the user's style. If the project has a design system, tokens, or a frontend-design skill, use it. Otherwise use the baseline in references/matching-your-style.md.
  4. Draft. Layout first, then content, then interaction. Pre-fill any data the user gave you.
  5. Verify. Rule 8. Fix, then deliver with the path or the artifact and one sentence on what it is.

Category index

If the request is about…Read…
Option comparisons, implementation plans, exploring directions before committingreferences/exploration-and-planning.md
Annotated diffs, PR writeups, code review, module maps, "explain this code"references/code-review-and-pr.md
Design tokens, component sheets, mockups, animation and interaction prototypesreferences/design-and-prototypes.md
Inline SVG figures, flowcharts, architecture diagramsreferences/diagrams-and-illustrations.md
Charts, dashboards, sortable and filterable data tables, metricsreferences/data-and-charts.md
Status reports, incident post-mortems, concept explainers, learning materialreferences/reports-and-research.md
Slide decks, arrow-key presentationsreferences/decks.md
One-off editors: triage boards, flag toggles, prompt tuners, labelersreferences/custom-editors.md
Matching an existing visual style or design system; the safe defaultreferences/matching-your-style.md
Accessibility and print checklistreferences/accessibility-and-print.md
Where the file goes and what each surface allows: Claude Code, Claude.ai artifacts, Cowork, published artifactsreferences/harness-mechanics.md
The pre-delivery check, headless and manualreferences/verify-before-delivering.md

Output mechanics, briefly

  • On disk (Claude Code, Cowork, cloud sessions): save a descriptive kebab-case name with .html in the working directory, verify, then give the user the path and how to open it. Related artifacts go in one folder.
  • Claude.ai artifacts: one HTML artifact, not React, unless asked. Respect the artifact sandbox: allowed CDNs only, storage treated as unreliable, no relative links.
  • Published or shared artifacts: may have runtime capabilities (persistence, live data). Use them only when the surface documents them; never assume.

Details, per surface, in references/harness-mechanics.md.

What this skill is not

It is not "always answer in HTML." Where markdown is the better medium, use markdown. Bad-looking HTML is worse than good markdown, and unverified HTML is worse than either.

© dogum, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 12 other files (references) in skills/html-artifacts of dogum/html-artifacts.

  • SKILL.md
  • references/accessibility-and-print.md
  • references/code-review-and-pr.md
  • references/custom-editors.md
  • references/data-and-charts.md
  • references/decks.md
  • references/design-and-prototypes.md
  • references/diagrams-and-illustrations.md
  • references/exploration-and-planning.md
  • references/harness-mechanics.md
  • references/matching-your-style.md
  • references/reports-and-research.md
  • references/verify-before-delivering.md

Open the folder on GitHubat commit d54982f

Compare with similar skills

HTML Artifacts next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HTML Artifacts compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HTML Artifacts this skilldogum/html-artifacts151—~2.1kAutomated safety check: PassApache-2.0
Visualizedisplay-dev/visualize132—~7.4kAutomated safety check: PassMIT
Previewhanamizuki/solopreneur152—~5.2kAutomated safety check: PassMIT
Show Metellahq/opensession392—~1.6kAutomated safety check: PassMIT
HTML Explainergreenfield-inc/Pane519—~1.6kAutomated safety check: NotesCustom licence
Generative UIhimself65/finance-skills3.4k—~3.1kAutomated safety check: PassMIT

Similar skills

  • Visualize

    display-dev/visualize

    Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.

    132 GitHub stars~7.4k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed

  • Preview

    hanamizuki/solopreneur

    Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…

    152 GitHub stars~5.2k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed

  • Show Me

    tellahq/opensession

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    392 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • HTML Explainer

    greenfield-inc/Pane

    The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm…

    519 GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check: notes

  • Generative UI

    himself65/finance-skills

    Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.

    3.4k GitHub stars~3.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Show Me

    mirumee/nimara-ecommerce

    Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.

    129 GitHub starsUsed in 7 repos~809 tokens
    Frontend & DesignAuto-check passed

Categories

Questions about HTML Artifacts

What does HTML Artifacts do?

Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. HTML Artifacts is an agent skill from dogum/html-artifacts. Produce a self-contained HTML artifact instead of a markdown document when the content benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor.

When should I use HTML Artifacts?

HTML Artifacts fits situations like: the user asks for a doc; A one-off editor; tool for triaging; tuning something.

How do I install HTML Artifacts in Claude Code?

Run `npx skills add dogum/html-artifacts --skill html-artifacts -a claude-code`. Or copy the skill folder (skills/html-artifacts in dogum/html-artifacts) into .claude/skills/html-artifacts in your project. Claude Code loads it when a task matches its description.

How do I install HTML Artifacts in Codex?

Run `npx skills add dogum/html-artifacts --skill html-artifacts -a codex`. Or copy the skill folder (skills/html-artifacts in dogum/html-artifacts) into .agents/skills/html-artifacts in your project. Codex loads it when a task matches its description.

Can I use HTML Artifacts in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add dogum/html-artifacts --skill html-artifacts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-artifacts, .gemini/skills/html-artifacts, .github/skills/html-artifacts and .opencode/skills/html-artifacts in your project.

What does HTML Artifacts need to run?

SKILL.md names no scripts, command-line tools or credentials: HTML Artifacts is instructions for the agent only.

Does HTML Artifacts access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is HTML Artifacts safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HTML Artifacts use?

HTML Artifacts is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HTML Artifacts use?

About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.

What are the alternatives to HTML Artifacts?

Skills that share tags, products or a category with HTML Artifacts: Visualize (display-dev/visualize, 132 stars), Preview (hanamizuki/solopreneur, 152 stars), Show Me (tellahq/opensession, 392 stars) and HTML Explainer (greenfield-inc/Pane, 519 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HTML Artifacts?

dogum (a GitHub user) maintains it in dogum/html-artifacts, which has 151 GitHub stars. The repository was last updated on September 14, 2026.

Source: dogum/html-artifacts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.