Agent skill · design visual · aradotso
illustrated-explainer-spec
Spec for building an infinite drill-down AI illustrated explainer web app where users type a topic and click to drill into generated watercolor-style images.
Why this skill is useful
Provides a detailed implementation guide for a unique AI-driven illustrated explainer app, including specific architecture and code snippets.
What it needs
Requires @google/generative-ai, cors, crypto, dotenv, express, sharp installed locally. Requires google account access. About 10k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
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: 1. User types a topic → AI generates a 16:9 watercolor-style illustrated explainer page 2. User clicks anywhere on the image → AI generates a "drill-into" next page for that spot 3. This repeats infinitely, preserving painting style across all pages 4. 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 Page Object Shape --- Recommended Stack (Node.js + Google Gemini) --- Server Implementation server.js — Full Reference Implementation --- Client Implementation public/index.html --- Configuration Environment Variables Variable Required Description --- --- --- GEMINIAPIKEY Yes Google Gemini API key CACHEVERSION No Bump to invalidate all caches (default: v1) PORT No Server port (default: 3000) package.json Running --- Alternative: OpenAI gpt-image-1 If using OpenAI instead of Gemini, replace callImageModel: --- Common Patterns Invalidating the Cache Bump CACHEVERSION in .env: All new requests will compute new hashes and regenerate. Old files in public/generated/ can be deleted manually. Inspecting Cached Files Testing Cache Hit (no model call) Testing Child Page --- Acceptance Checklist From the spec §12 — verify each: [ ] "how volcanoes work" → watercolor-style page, title inside image, no map elements [ ] "how a smartphone is built" → cross-section/exploded view, same style [ ] Click visible object → next page drills into that object, style matches [ ] Drill 5 pages deep → style stays consistent across all pages [ ] Back button retu
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/illustrated-explainer-spec