// open source · claude code skill · works offline

Picture Says a Thousand Words

Claude Code skillOffline pageMIT licenceKaTeX · Interactive · Derivation

Ask one question and get one tabbed page: an animation, an interactive micro-app, a diagram, a clickable flow map, a full first-principles derivation (for maths topics) and a short strict recap. All maths is typeset, every number is checked by code, and an optional local tutor chat answers questions about any line you click.

The ladder of formats (writing in ASD-STE100, diagrams, web pages, explainer videos) comes from a public post by Andrej Karpathy (1 Oct 2026). This project is independent and not affiliated with or endorsed by him, Anthropic or ASD.

▶ Watch the walkthrough Open the live demo page ⌥ GitHub

Walkthrough (5 min)

One question: why is 450 hits in 500 so much narrower than 45 hits in 50, when both are 90%? A short lesson with real code, then the same answer as six tabs.

The narration is a text-to-speech voice. Every number comes from code that runs in the video. Open on YouTube ↗

Why it exists

Reading model output is the new bottleneck, and plain text is the slowest way to take in an idea.

Wall of text

The key step is buried in polite padding.

Fix: climb the ladder: animation, interactive app, diagram, then a short strict recap.

Lost thread

A long derivation makes you forget where you are.

Fix: a clickable flow map and a you-are-here bar.

Trust

Pretty visuals can hide wrong numbers.

Fix: every number is computed by code before it is written.

The six tabs for one question

Screens from the demo page. Open the live copy → (the page works offline; only the tutor chat needs the local server).

Animation tab — 1 Animation: trials arrive, the curve narrows

Interactive tab — 2 Interactive: change n for both data sets

Diagram tab — 3 Diagram: a reason on every arrow

Flow map tab — M Flow map: click a step to open it

Derivation tab — D Derivation: first principles, you-are-here bar

STE recap tab — 4 Recap: one action per line, one term per thing

How it works

Ask first. The skill asks which modes you want and how deep, then builds them in order.
One page. Every mode is a tab of one offline HTML file with KaTeX inlined.
Check. Every formula must render with zero errors; every number is computed by code.
Optional tutor. A local server on 127.0.0.1 and an Ollama model answer questions about any line you click.

What you need

Tested on macOS only.

Need	Why
Claude Code	Runs the skill (installed as a plugin).
Python 3	Standard library only; no pip packages.
A web browser	To read the page.
Ollama (optional)	Local models for the tutor chat: `qwen3.5:9b`, `nomic-embed-text`. Set names in `config.json`. The page works in full without it.

Install and try it

Inside Claude Code:

/plugin marketplace add sabya-chow/picture-says-a-thousand-words
/plugin install picture-says-a-thousand-words@picture-says-a-thousand-words-marketplace

Then ask:

a thousand words: explain the central limit theorem

Honest limits, credit and licence

Local models can be wrong. Check facts against the page and your sources.
STE is followed in spirit, not certified.
Credit. The idea of the ladder is from a public post by Andrej Karpathy; the code, tabs, derivation, flow map and tutor chat are my own. Not affiliated with him, Anthropic or ASD.
Copyright. The repository holds tools and an original demo. Use sources you are allowed to use. Code is MIT licensed.

Academic project disclaimer: This website and the projects linked here are academic and personal learning projects only. Views expressed are strictly personal and are not to be construed as the views, policy, endorsement, or advice of my organization or employer.

⌥ Repository ▷ YouTube Live demo page ← Back to home