article-to-html Skill

article-to-html is a Codex skill for turning a Markdown draft, pasted document, or conversation-context document into a self-contained, paper-style HTML page.

It is designed for static "proposal paper" documents: serif body text, monospace metadata, numbered sections, TL;DR blocks, callouts, tables, inline SVG figures, and optional vanilla JavaScript interactions.

Example output: https://magiccube.github.io/article-to-html-skill/

What It Generates

The skill produces a single portable .html file with:

• Inline CSS, SVG, and JavaScript
• No remote fonts, CDNs, or external image dependencies
• A stable paper-like visual system based on references/template.html
• Numbered sections using 01, 02, 03, etc.
• A required TL;DR block near the top
• Optional figures, tables, callouts, code blocks, cards, and footers
• Optional interactivity such as collapsible sections, copy buttons, table filtering, scrollspy, dark mode, and localStorage-backed forms

When To Use It

Use this skill when you want Codex to convert written material into a polished static web document, for example:

Turn this Markdown into a single-page HTML document.
Render docs/proposal.md as a paper-style HTML page.
Make a pretty article HTML version of this draft.
Convert this RFC into one self-contained HTML file.

Do not use this skill for slide decks, multi-page sites, backend applications, or documents that require live external services.

Installation

Clone or copy this directory into your Codex skills directory:

mkdir -p "$HOME/.codex/skills"
git clone git@github.com:MagicCube/article-to-html-skill.git "$HOME/.codex/skills/article-to-html"

If your environment uses CODEX_HOME, install it there instead:

mkdir -p "$CODEX_HOME/skills"
git clone git@github.com:MagicCube/article-to-html-skill.git "$CODEX_HOME/skills/article-to-html"

After installation, Codex can trigger the skill when the user asks to render Markdown, a draft, or pasted prose as static article HTML.

Usage

Give Codex a Markdown file path:

Use article-to-html to render ./docs/new-infra-proposal.md.

Or paste a draft directly into the conversation:

Turn the following draft into a paper-style single-file HTML page:

# Proposal Title
...

By default, the generated file is saved:

• In the same directory as the source Markdown file, if a file path was provided
• In the current working directory, if the source came from conversation context
• At the user-specified path, if the user provides one

The output filename is an English, lowercase, hyphenated slug of the document title. Existing files are not silently overwritten; the skill appends -v2, -v3, and so on when needed.

Design Contract

The generated HTML should keep these core invariants:

• Single-file output only
• Paper palette: --paper: #f7f7f5 and --ink: #1a1a1a
• Serif body text with monospace metadata
• TL;DR block near the top, synthesized if the source does not include one
• Numbered section headings in the form <span class="num">01</span>
• Inline SVG figures with numbered captions such as FIG 1
• No external images, fonts, CDNs, or "generated by AI" watermark unless explicitly requested

Repository Structure

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

• SKILL.md defines the trigger conditions, workflow, design invariants, naming rules, and common mistakes.
• references/template.html is the base scaffold with the complete visual system.
• references/components.md contains reusable HTML snippets for headers, TL;DR blocks, sections, callouts, figures, cards, tables, code blocks, and footers.
• references/svg-figures.md contains inline SVG skeletons for common diagrams.
• references/interactive.md contains optional vanilla JavaScript snippets.
• assets/example.html is a completed reference render used as a visual benchmark.

Development Notes

This skill has no package manager, build step, or runtime dependency. It is a prompt-and-template bundle consumed by Codex.

When editing the skill:

• Keep SKILL.md concise and operational.
• Put reusable HTML/CSS/JS patterns in references/.
• Keep generated examples self-contained.
• Preserve the visual identity unless intentionally changing the design system.

License

No license file is currently included. Add one before distributing or reusing this skill outside its intended environment.