Talk To Me In HTML

Turn any topic into a single-file, interactive HTML explainer, generated by your AI coding assistant.

Talk To Me In HTML is a portable AI agent skill for Codex, Claude Code, Cursor, and any assistant that reads rule or prompt files. Once installed, "explain X to me" stops returning a wall of Markdown and returns one self-contained HTML page instead: a hook in the first screen, chunked sections with a progress rail, diagrams and animation that carry meaning, prediction checks, and a recap built for recall.

It is not a template engine. There is no house style to recognise. The skill derives the palette, typography, and motion character from the topic itself, so an explainer about ocean currents and one about Rust lifetimes do not look like siblings.

npx talk-to-me-in-html

What the generated page contains

Why this exists

Markdown is a fine transport for facts and a poor one for mechanisms. A protocol handshake, a feedback loop, a probability distribution, a layout bug: these are spatial and temporal, and prose makes the reader rebuild them in working memory from scratch.

The skill encodes what multimedia-learning research is fairly settled on, and what attention-variable readers need in particular: dual coding, spatial contiguity of label and picture, segmenting with visible endpoints, coherence, generation over recognition. It also encodes what those readers get wrong most often: opening with a definition, animating for decoration, and ending without a recall check.

It also enforces honesty. A generated page never implies a capability it does not have. There are no text inputs at all, because a static file cannot read, answer, or keep what you type into one; recall is checked with taps, reveals, and sliders instead. No dead submit buttons, no spinner that never resolves, no fabricated screenshot of a real product.

Supported AI coding assistants

| Assistant | Install surface | |---|---| | OpenAI Codex | Full skill folder at ${CODEX_HOME:-$HOME/.codex}/skills/talk-to-me-in-html | | Claude Code | Full skill folder at $HOME/.claude/skills/talk-to-me-in-html | | Cursor | Project rule at .cursor/rules/talk-to-me-in-html.mdc | | Generic AI CLIs | Portable prompt at ${XDG_CONFIG_HOME:-$HOME/.config}/talk-to-me-in-html/talk-to-me-in-html.md | | Any MDC rule folder | --rules-dir ./path/to/rules |

Apps that understand Agent Skills get the whole folder: workflow, cognition and theming references, HTML boilerplate, and screenshot and video capture scripts. Apps that only read rules get a condensed prompt that preserves the behaviour.

Installation

Install every supported global surface at once:

npx talk-to-me-in-html

Install globally and keep the command around:

npm install -g talk-to-me-in-html
talk-to-me-in-html

One target only:

npx talk-to-me-in-html -- --target codex
npx talk-to-me-in-html -- --target claude
npx talk-to-me-in-html -- --target generic

Replace an existing copy:

npx talk-to-me-in-html -- --force

Cursor

Project rules, written into the current repository:

npx talk-to-me-in-html -- --target none --cursor-project .

User Rules, printed for pasting into Cursor Settings > Rules:

npx talk-to-me-in-html -- --print-prompt

Any other editor that reads MDC rules from a folder:

npx talk-to-me-in-html -- --target none --rules-dir ./path/to/rules

Usage

After installing, ask in plain language. The skill triggers on ordinary phrasing, no command to memorise:

Explain how transformer attention works.
Talk to me in HTML about Kubernetes networking.
Help me understand what happens in a TCP handshake.
Break down React Server Components for someone who knows classic SSR.
Teach me Bayes' theorem, I keep forgetting which way the ratio goes.
Explain this paper to me.            (paste or attach it)
Explain what this codebase does.     (point it at a directory)

You can steer the output the same way you would steer a colleague: ask for a specific analogy, a specific audience, more or less motion, a printable version, or a rebuild of one section.

Who uses it

Common outputs: technical documentation, programming tutorials, architecture and incident explainers, internal engineering onboarding, science and mathematics teaching pages, product walkthroughs, conference talk companions.

Frequently asked questions

How is this different from asking for "an HTML page about X"?

Asking for a page gets you the assistant's default aesthetic and default structure: a hero, three equal cards, a definition, some paragraphs. The skill replaces that with a storyboard step, a topic-derived theme, a medium chosen per concept shape, and a pre-flight checklist the model has to pass before shipping. It also bans the patterns that make AI-generated pages recognisable.

Does the output need a build step or a framework?

No. One HTML file with inline CSS and JavaScript. Open it from disk, no bundler, no node_modules, no framework.

Does it work offline?

The page runs entirely in the browser with no server. If a particular explainer pulls a web font or a charting library from a CDN, that part needs network on first load. Ask for a fully offline page and the skill will inline or drop those dependencies.

Which topics does it handle?

Anything with structure: software and systems, networking, security, cloud and DevOps, machine learning, mathematics and statistics, biology, economics, law and policy, physical mechanisms. It classifies the topic by shape first, flow, system, hierarchy, change, comparison, scale, mechanism, or probability, and picks the medium from that.

Can it use real screenshots?

Yes, when the subject is a real interface. The skill ships Playwright-based capture scripts and annotates the real screenshot rather than faking a product UI out of styled divs. If capture tooling is unavailable it says so and builds the best alternative instead of inventing an image.

Can it draw my architecture, not just a four-box sketch?

Yes, and that is the difference from asking an assistant for "a diagram". Systems above a handful of boxes are declared as nodes and edges, then positioned by a layered layout pass at authoring time, so a twelve-service topology costs no more effort than four boxes and comes out consistent. You also get C4-style altitude levels, and lenses over one layout so the same picture answers what-talks-to-what, where-the-traffic-is, who-owns-it, and what-breaks-if-this-breaks. Diagram budgets, labelling, and accessibility rules are enforced rather than suggested.

Is there a way to check a generated page before I publish it?

node ~/.claude/skills/talk-to-me-in-html/scripts/lint-explainer.mjs page.html

It runs the mechanical checks with no browser and no dependencies: text inputs and dead controls, window-relative widths that push content off-canvas, missing reduced-motion handling, unlabelled diagram nodes, node budgets, missing SVG descriptions, non-determinism, graph libraries shipped to the reader, placeholders, broken element references, and unbalanced markup. A deliberate anti-pattern demo can opt out per rule with a lint-allow: <rule> comment that states why. It does not judge whether the page teaches well or whether its numbers are true.

Can I ask the generated page questions?

No, and it will not pretend otherwise. The output is a static file with no model behind it, so it ships no chat box and no text fields. What it does ship is a scored reality check, reveal-the-answer prompts, and a copy-to-clipboard follow-up prompt so you continue the conversation in the assistant that built the page. If you want a page that really does call a model, wire the backend yourself and say so in the request.

Can I edit the result?

It is a plain HTML file, so yes: by hand, or by asking the assistant to change one chunk. The skill can also rework an existing explainer inside a brand's colours and type.

Does it install any runtime dependencies?

None. The installer is one Node script with no dependencies, and it only copies files. Node 18 or newer.

Can I keep it project-local instead of global?

Yes. Use --target none with --cursor-project or --rules-dir to write only into the current repository, so the behaviour travels with the project rather than with your machine.

What is in the package

skill/
  SKILL.md                        workflow, cognitive contract, pre-flight checks
  references/
    adhd-cognition.md             the research digest behind the hard rules
    explanation-patterns.md       analogy discipline, Feynman loop, worked examples
    visual-grammar.md             concept shape to medium, implementation recipes
    system-diagrams.md            graph as data, layered layout, archetypes, lenses, motion grammar
    theming.md                    topic domain to palette, type, motion
    media-capture.md              real screenshot and video workflow, annotation grammar
  assets/explainer-boilerplate.html   scaffold: rail, chunks, stepper, diagram + lens, recap, reality check
  scripts/capture-screenshot.mjs  Playwright screenshot capture
  scripts/record-video.mjs        Playwright video capture, rare
  scripts/lint-explainer.mjs      mechanical pre-flight for a finished page, no dependencies
  vendor/taste/                   design engine: dials, typography, motion, anti-generic rules
                                  (vendored from taste-skill, MIT, license included)
prompts/talk-to-me-in-html.md     condensed portable version for rule-based apps
bin/install.js                    the installer

Search terms

Interactive HTML explainer generator, AI explainer generator, Codex skill, Claude Code skill, Agent Skills, Cursor rules, MDC rules, AI coding assistant skill, single-file HTML page generator, interactive documentation generator, technical documentation from AI, visual learning tool, explain code visually, interactive diagrams from text, animated SVG explainer, teach me interactive page, ADHD-friendly learning material, dual coding, self-contained HTML output.

License

MIT. The design engine under skill/vendor/taste/ is vendored from taste-skill, copyright (c) 2026 Leonxlnx, MIT, with its license text included alongside it.

Icons served as images from the Iconify API (HugeIcons set), since npm and GitHub strip inline SVG from Markdown.