Illustrated Explainer Spec

This is a complete spec for building a watercolor-style visual Wikipedia where every click drills deeper into whatever you point at. Type "photosynthesis," get a 16:9 painted explainer, click the chloroplast, get a new page zooming into that structure, infinitely. It's built on content-addressed caching so identical clicks never regenerate, and the architecture uses a thin client with server-side image model calls (Gemini in the reference implementation). The clever bit is compositing a red marker onto parent images before feeding them back to the model with strict style-consistency prompts. This is the kind of explorable explanation that feels obvious in retrospect but required someone to actually spec out the hashing, prompt engineering, and Sharp compositing plumbing.

skills.sh installs: 165
GitHub stars: 26
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill illustrated-explainer-spec --agent claude-code

Installs into .claude/skills of the current project.

Files

Illustrated Explainer Spec Implementation Guide

Skill by ara.so — Daily 2026 Skills collection.

What This Project Is

A spec (not a library) for building a locally-run single-page web app where:

User types a topic → AI generates a 16:9 watercolor-style illustrated explainer page
User clicks anywhere on the image → AI generates a "drill-into" next page for that spot
This repeats infinitely, preserving painting style across all pages
Content-addressed caching means identical queries/clicks never re-generate

The spec is stack-agnostic — you choose the framework, image model API, and language. This skill shows you how to implement it end-to-end.

Architecture Overview

Browser (thin client)
  └── POST /api/page  ──►  Server
                              ├── hash → check disk cache
                              ├── composite red marker onto parent image
                              ├── call image model (text + optional image)
                              └── write PNG → return page object