Agent skill

Article To HTML

by agentara in agentara/skills

Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables…

MITAuto-check passedDocuments & Office

Install Article To HTML

skills CLI
$ npx skills add agentara/skills --skill article-to-html -a claude-code

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

GitHub CLI
$ gh skill install agentara/skills article-to-html --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/agentara/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/productivity/article-to-html .claude/skills/article-to-html && 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
article-to-html
GitHub stars
600
Token cost
~1.7k tokens
SKILL.md length
787 words
Files
6 (incl. references, assets)
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables…

  • Works in 8 steps: Get the source. If the user gave a file… → Extract document skeleton. Title,… → Read the template. Read… → …
  • Wants a static single file rather than Figma/PDF/PPT
  • SKILL.md covers Flow after trigger, Design invariants (do NOT break), Component cheat sheet and Interactive elements (optional), plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Article To HTML is an agent skill from agentara/skills. Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables, optional interactive elements. Trigger when the user says "turn this into HTML / render as a web page / make a pretty HTML / give me a single-page doc / generate article HTML / paper-style HTML / convert to article html / render this as a doc html" or similar, and wants a static single file rather than Figma/PDF/PPT. Also…

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files and assets (for example `references/components.md`, `references/interactive.md` and `references/svg-figures.md`).

It sits in Documents & Office, covering Slides and decks. It works with Figma. The repository describes itself as: Original and practical skills for AI builders. The licence is MIT.

When your agent uses it

  • Wants a static single file rather than Figma/PDF/PPT
  • Pastes some markdown and says beautify this / typeset this / give me a web version
  • The user wants slides
  • Needs a backend

Example prompts

  • “paper proposal”
  • “beautify this / typeset this / give me a web version”
  • “/article-to-html”

Workflow steps

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

  1. Get the source. If the user gave a file path, Read it. If the draft is in conversation context, use that directly.
  2. Extract document skeleton. Title, subtitle, TL;DR, section list, whether figures are needed, whether tables are needed, whether…
  3. Read the template. Read references/template.html and use its full CSS + structure as the scaffold.
  4. Read the component reference. Read references/components.md and pick out the snippets you need this round.
  5. If figures are needed: consult references/svg-figures.md and draw with inline SVG (no external image references — keep the file portable).
  6. If interactivity is needed: consult references/interactive.md and append a block before .
  7. Output. Write to {same dir as source or current working dir}/{slug}.html. Filename = English slug of the title, or whatever the user…
  8. Report. One sentence with the file path + a one-line command to open it in a browser.

What it can do on your machine

Read from SKILL.md and the folder at commit 950e1bf. 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

Article To HTML loads about 1.7k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 183 tokens; SKILL.md has 787 words of instructions outside code blocks.

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

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 agentara/skills at commit 950e1bf, republished under its MIT licence (© agentara). 787 words, ~1,691 tokens.

Download SKILL.mdSave it as .claude/skills/article-to-html/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
article-to-html
description
Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables, optional interactive elements. Trigger when the user says "turn this into HTML / render as a web page / make a pretty HTML / give me a single-page doc / generate article HTML / paper-style HTML / convert to article html / render this as a doc html" or similar, and wants a **static single file** rather than Figma/PDF/PPT. Also fires when the user pastes some markdown and says "beautify this / typeset this / give me a web version". Do NOT trigger when the user wants slides, needs a backend, or needs a multi-page site.

article-to-html

Turn a document (from conversation context or a given markdown file) into a self-contained HTML file, reusing the "paper proposal" design system defined in references/template.html: serif body + monospace meta + numbered sections + inline SVG figures + callouts + tables + optional JS interactivity.

Flow after trigger

  1. Get the source. If the user gave a file path, Read it. If the draft is in conversation context, use that directly.
  2. Extract document skeleton. Title, subtitle, TL;DR, section list, whether figures are needed, whether tables are needed, whether interactivity is needed.
  3. Read the template. Read references/template.html and use its full CSS + structure as the scaffold.
  4. Read the component reference. Read references/components.md and pick out the snippets you need this round.
  5. If figures are needed: consult references/svg-figures.md and draw with inline SVG (no external image references — keep the file portable).
  6. If interactivity is needed: consult references/interactive.md and append a <script> block before </body>.
  7. Output. Write to {same dir as source or current working dir}/{slug}.html. Filename = English slug of the title, or whatever the user specified.
  8. Report. One sentence with the file path + a one-line command to open it in a browser.

Design invariants (do NOT break)

  • Single file. All CSS / SVG / JS inline. No external fonts, no CDNs, no remote images.
  • Don't change the paper palette. --paper: #f7f7f5 + --ink: #1a1a1a is this skill's visual signature. If the user explicitly asks for a different mood (dark mode, different accent), you can change --accent / --warn, but keep paper/ink.
  • Serif body + monospace meta. body uses ui-serif; every "metadata slot" (.doc-eyebrow / .doc-meta / th / code / figcaption / .num) uses ui-monospace. This mix is the signature.
  • Section numbering prefix. <h2><span class="num">01</span>Section title</h2> — small monospace, faint gray, 14px gap to the title. Add it even if the source has no numbers.
  • Figures need figcaption. <figcaption><span class="fig-num">FIG 1</span>caption text</figcaption>, the FIG N in accent color.
  • TL;DR always on top. If the source has no TL;DR, condense the first one or two paragraphs into a ~60-word summary and put it there.
  • No "generated by AI" footer watermark unless the user explicitly asks.

Component cheat sheet

If the source contains...Use...
Intro / abstract.tldr block
Quotation.callout.cite (with .cite-source)
Warning / heads-up.callout.warn
Generic sidenote.callout (default, white background)
Three parallel concepts / roles.cards (three-column cards)
N parallel concepts.cards cols-2 / cols-4
Comparison / vendor matrix<table>
Flow / architecture / timing / bar chartinline SVG figure — see references/svg-figures.md
Open-questions list<ol> with bold lead phrase per item
Reference links<footer> containing a <ul>

Interactive elements (optional)

The template is static by default. Add interactivity proactively when the document clearly benefits:

  • Section collapse / expand (long documents)
  • "Copy" button on code blocks
  • Table filter / sort (great for vendor comparison tables)
  • Dark mode toggle (persisted to localStorage)
  • TOC + scrollspy
  • Forms (e.g. for an RFC / decision doc, a "vote / leave comment" form persisted to localStorage)

Specific snippets in references/interactive.md. Default to none unless (a) the doc is long — ≥3 sections + ≥2 figures, or (b) the source is interaction-shaped (tutorial, decision doc, vendor selection).

Show full SKILL.md (291 more words)Show less

Naming and output location

  • Filename: English slug of the title, lowercase, hyphenated, ≤40 chars. For Chinese titles, use pinyin or a translated keyword hint, e.g. 《新基建提案》→ infra-proposal.html.
  • Output location:
    • If the user gave a source markdown path, output in the same directory.
    • Otherwise output in the current working directory.
    • If the user specifies a path, honor it.
  • If a file with the same name exists, append -v2 / -v3. Never silently overwrite the user's existing output.

Common mistakes

  • Recoloring the CSS. Don't touch paper/ink/accent unless the user said "different palette please". Visual consistency is the entire point.
  • Switching body to sans-serif. The whole "proposal paper" feel hinges on the serif body. Changing fonts breaks the look.
  • Using emoji as icons. The character vocabulary of this skill is uppercase monospace labels + small color blocks (.mascot / .layer-icon). No emoji unless the user explicitly asks.
  • External <img src="https://...">. Kills portability. Either inline SVG, base64, or omit.
  • Missing figcaption numbers. The FIG 1 / FIG 2 / FIG 3 running labels are key to the "academic paper" feel.
  • Callout on every paragraph. Callouts highlight one or two passages, not decorate. Keep total callouts ≤ 5 per document.
  • Cramming 5 items into the three-column cards. Switch to repeat(N, 1fr) (or use the .cols-N modifier), don't force wrap.
  • Leaking domain-specific names from the example. The template is blank; if the source doesn't mention Crewlet / Anthropic / etc., the HTML shouldn't either.

File manifest

  • references/template.html — blank scaffold (full CSS + placeholder structure). Start here.
  • references/components.md — cut-and-paste HTML snippets for every component.
  • references/svg-figures.md — five typical SVG figure skeletons (architecture, timing, bar comparison, stacked layers, lifecycle).
  • references/interactive.md — JS snippets (collapse, copy, table filter/sort, TOC, dark mode, form → localStorage, reading progress, figure zoom).
  • assets/example.html — a completed reference render (the original Chinese article.html kept as a visual benchmark).

© agentara, MIT. 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 5 other files (references, assets) in skills/productivity/article-to-html of agentara/skills.

  • SKILL.md
  • assets/example.html
  • references/components.md
  • references/interactive.md
  • references/svg-figures.md
  • references/template.html

Open the folder on GitHubat commit 950e1bf

Compare with similar skills

Article To HTML 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.

Article To HTML compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Article To HTML this skillagentara/skills600—~1.7kAutomated safety check: PassMIT
HyperFrames Slideshow Authoringheygen-com/hyperframes58k3 repos~8.5kAutomated safety check: PassApache-2.0
Slides GrabNomaDamas/slides-grab1.2k—~1.3kAutomated safety check: PassMIT
Slides Grab ExportNomaDamas/slides-grab1.2k—~1kAutomated safety check: PassMIT
Slides Grab Card NewsNomaDamas/slides-grab1.2k—~532Automated safety check: PassMIT
Make Deckbluzir/claude-code-design106—~2.7kAutomated safety check: PassNone

Similar skills

  • HyperFrames Slideshow Authoring

    heygen-com/hyperframes

    Builds a navigable deck with discrete slides, fragment reveals, and branching, instead of rendering a flat video, with built-in presenter notes.

    58k GitHub starsUsed in 3 repos~8.5k tokens
    Documents & OfficeAuto-check passed
  • Slides Grab

    NomaDamas/slides-grab

    End-to-end presentation workflow usable in Codex and Claude Code.

    1.2k GitHub stars~1.3k tokensUpdated 6 days ago
    Documents & OfficeAuto-check passed
  • Slides Grab Export

    NomaDamas/slides-grab

    Stage 3 conversion skill usable in Codex and Claude Code. An agent skill from NomaDamas/slides-grab.

    1.2k GitHub stars~1k tokensUpdated 6 days ago
    Documents & OfficeAuto-check passed
  • Slides Grab Card News

    NomaDamas/slides-grab

    Generate square Instagram-style card news by reusing the slides-grab workflow with card-news mode enabled.

    1.2k GitHub stars~532 tokensUpdated 6 days ago
    Documents & OfficeAuto-check passed
  • Make Deck

    bluzir/claude-code-design

    Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote.

    106 GitHub stars~2.7k tokensUpdated 5 mo ago
    Documents & OfficeAuto-check passed
  • Visual Style

    calesthio/OpenMontage

    Create, extract, and apply portable visual design systems via visual-style.md files.

    65k GitHub stars~1.5k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from agentara/skills

All 20 skills in this repo
  • World Cup Predictor

    agentara/skills

    Predict FIFA World Cup matches, full tournament paths, and champion probabilities through Codex-native subagents that analyze live news, weather, injuries, markets, Polymarket, tactics, and…

    600 GitHub stars~1.9k tokensUpdated 8 days ago
    Auto-check passed
  • Presentation Design

    agentara/skills

    Generate a premium 6-slide presentation design board as one single composite image.

    600 GitHub stars~2.4k tokensUpdated 8 days ago
    Auto-check passed
  • Publish Research Site

    agentara/skills

    Turn a thesis, proposition, trend, question, or explainer topic into a citation-backed, image-rich, interactive website and deploy it with Vercel CLI.

    600 GitHub stars~1.9k tokensUpdated 8 days ago
    Auto-check passed
  • Portrait Clone

    agentara/skills

    Turn any n reference images (with at least one person) into one exhaustively locked, always de-slopped, JSON-only AIGC image prompt whose every variable is pinned so each generation is nearly…

    600 GitHub starsUsed in 1 repo~5k tokens
    Auto-check passed
  • Create AI image-generation prompts and image-generation workflows for torn-paper editorial collage style posters with layered ripped paper, rough typography, stamps, tape, stickers, cutout subjects…

    600 GitHub stars~1.3k tokensUpdated 8 days ago
    Auto-check passed
  • A skill your agent uses when writing, rewriting, or reviewing PR/CL descriptions, commit messages, or code-change summaries that explain what changed and why.

    600 GitHub stars~931 tokensUpdated 8 days ago
    Auto-check passed

Works with

Questions about Article To HTML

What does Article To HTML do?

Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables…. Article To HTML is an agent skill from agentara/skills. Render a markdown draft / any document in the conversation context into a single-file "paper proposal" HTML — serif body, monospace meta, numbered sections, inline SVG figures, callouts, tables, optional interactive elements.

When should I use Article To HTML?

Article To HTML fits situations like: wants a static single file rather than Figma/PDF/PPT; pastes some markdown and says beautify this / typeset this / give me a web version; the user wants slides; needs a backend.

How do I install Article To HTML in Claude Code?

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

How do I install Article To HTML in Codex?

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

Can I use Article To HTML 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 agentara/skills --skill article-to-html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/article-to-html, .gemini/skills/article-to-html, .github/skills/article-to-html and .opencode/skills/article-to-html in your project.

What does Article To HTML need to run?

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

Does Article To HTML 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 Article To HTML 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 Article To HTML use?

Article To HTML is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Article To HTML use?

About 1.7k tokens (SKILL.md is roughly 6.8k 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 9.5k tokens, read only when the agent opens those files.

What are the alternatives to Article To HTML?

Skills that share tags, products or a category with Article To HTML: HyperFrames Slideshow Authoring (heygen-com/hyperframes, 58k stars), Slides Grab (NomaDamas/slides-grab, 1.2k stars), Slides Grab Export (NomaDamas/slides-grab, 1.2k stars) and Slides Grab Card News (NomaDamas/slides-grab, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Article To HTML?

agentara (a GitHub organization) maintains it in agentara/skills, which has 600 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on September 29, 2026.

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