Explorable Explanation skill: Astra falls short against Fable 5.1
The author built a skill that turns an explainer into multiple short interactive HTML pages with small JavaScript games, and says Fable 5.1 excelled on the same prompt while Astra was disappointing.
We know today's AI is great at making beautiful HTML one-pagers. I wanted to see if it could make a beautiful deck of interconnected HTML pages that feel like an immersive experience, optimized for learning and ingesting information. Today I'm sharing a skill that lets Fable 5.1 do this. I'm calling it "Explorable Explanation". It asks the AI to write an explainer that you will want to dive into: multiple short pages, one idea per page, interleaved with small JavaScript games and interactive visuals you play with so the concept gets seared into your brain. I've been developing it for the last 10 days, because this turned out to be a surprisingly difficult task for even the latest SOTA models. Fable 5.1 is the only model that has been able to excel here. In the walkthrough below, I show you what Fable created vs what Astra created from the same prompt. Spoiler alert: Astra was disappointing. The reason it's difficult is that you're asking the AI to do four things at once, at a really high quality bar: • Have a really good design and UI sense • Break the lesson into small chunks and plan them progressively like a teacher • Write engaging bite-sized lessons per page • Build interesting toy playables that aid in learning This requires the working context to split one explainer across tens of files, the empathy of a teacher to predict the reader's curiosity gaps, and the creativity to build toy playables that suit the topic at hand. Here's the walkthrough video and here's the skill: https://github.com/nityeshaga/claude-home-base/tree/main/plugins/creative/skills/explorable-explanations If you wanna explore an explorable, check out these: • http://nityesh.com/navier-stokes: the big announcement from OpenAI yesterday, explained for someone with high-school math • http://nityesh.com/javascript-stacks: the JavaScript web stack, for someone who vibes with it but has never had the foundations explained • http://nityesh.com/hotwire: Hotwire, Rails' frontend framework, with a working toy Rails app inside so you can watch what flows between server and browser