The first viewport carries the most surprising fact or a live demonstration, never a definition or a table of contents.
One idea per section, roughly 90 seconds each, with a mini-map that always shows where you are.
Hand-built SVG, canvas simulations, or a charting library, chosen by the shape of the concept rather than by habit.
Systems above a handful of boxes are declared as nodes and edges, positioned with a layered (Sugiyama) pass while the page is written, then emitted as static SVG. C4-style context, container, and component altitudes. No graph library ships to the reader and the layout is identical on every open.
Lenses over a single layout: structure, traffic weighted by volume, ownership by team, and blast radius showing what hard-fails versus what degrades. Switching lens never moves a node, so the picture you learned stays learned.
Motion shows causality, flow, or state change, and every animation is scrubbable or replayable. Decorative loops are removed.
Sliders, toggles, x-ray dividers, and one-tap prediction checks with immediate, non-punitive feedback.
One-line analogy, vivid memory anchors, a say-it-back prompt with a reveal for self-comparison, and a scored reality check where each miss names the section to re-read.
Sized against its container, never the window, so nothing lands off-canvas in an artifact panel, a split view, or on a phone. Reduced-motion support, keyboard navigation, AA contrast.
The output is a single
.html file you can open by double-clicking it, edit by hand, email, or drop into any static host.
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:
```bash
npx talk-to-me-in-html
```
Install globally and keep the command around:
```bash
npm install -g talk-to-me-in-html
talk-to-me-in-html
```
One target only:
```bash
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:
```bash
npx talk-to-me-in-html -- --force
```
### Cursor
Project rules, written into the current repository:
```bash
npx talk-to-me-in-html -- --target none --cursor-project .
```
User Rules, printed for pasting into `Cursor Settings > Rules`:
```bash
npx talk-to-me-in-html -- --print-prompt
```
Any other editor that reads MDC rules from a folder:
```bash
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:
```text
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
