make-it-learnable: convierte cualquier tema en una lección interactiva
Una skill que coge un documento, un repo, una URL o un tema y le pide a tu agente una lección en un solo HTML: predices antes de que te expliquen, un dibujo grande cuenta el mecanismo y los checks te dicen por qué fallaste.
Invócala con un comando
/make-it-learnable "https://es.wikipedia.org/wiki/Teorema_CAP"Lee la página y te devuelve una lección en un único .html, más el blueprint YAML con el que la construyó.
/make-it-learnable "src/scheduler.ts — para alguien que acaba de entrar en backend"Si dices para quién es, la lección se construye contra la idea equivocada que suele traer esa persona y ajusta el vocabulario.
/make-it-learnable "este repo entero, para quien se incorpora el lunes"Material de onboarding: mapa de módulos y una ejecución real paso a paso. Sin argumento, te pregunta qué convertir en lección.
¿Qué es make-it-learnable? ¶
make-it-learnable convierte cualquier material en una lección interactiva que se sostiene sola: un único fichero HTML que abres con doble clic, mandas por correo o cuelgas donde quieras. Sin build, sin dependencias, sin red.
El formato es una explorable explanation, la idea que Bret Victor bautizó en 2011: un modelo interactivo de un concepto, guiado por la prosa, en el que dices qué esperas que pase y luego ves cómo la realidad te lleva la contraria. No es un slide deck con un test pegado al final.
Qué te encuentras al abrir una lección ¶
- Predices antes de que te expliquen. Cada lección abre con una pregunta y te pide que digas cómo de seguro estás.
- Un dibujo grande cuenta el mecanismo. Se transforma a medida que haces scroll, en vez de sustituirse por otro.
- Los checks te dicen por qué fallaste. Ves lo que esperabas frente a lo que ocurre de verdad y el error concreto que cometiste.
- El final lee tu calibración. Te enseña dónde estabas seguro y te equivocaste, y qué merece una segunda pasada.
Puedes probar dos ahora mismo: por qué hay estaciones y la deuda cognitiva al programar con IA.
Una especificación, no una plantilla ¶
La skill no contiene ni una línea de HTML ni de CSS. Le da al agente un formato de blueprint en YAML para decidir la lección antes de programarla (secciones, dibujos descritos con palabras, checks con sus respuestas y el porqué de cada fallo) y un contrato de comportamiento por componente. El agente construye la página a su manera.
Por eso cada lección sale con su propia identidad, en claro y en oscuro, pero todas se comportan igual para quien las lee. Los textos de la interfaz viven en un strings.yaml por clave, así que añadir un idioma es añadir un bloque.
Si quieres ver cómo se probó con varios modelos, cuántos tokens cuesta una lección y qué fue corrigiéndose ronda a ronda, lo tienes en el post de make-it-learnable.
Cómo instalar make-it-learnable ¶
Funciona con cualquier agente compatible con el estándar abierto de Agent Skills (Claude Code, Cursor, Codex, OpenCode, Gemini CLI…). Pega esto en tu terminal:
npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable
¿La quieres disponible en todos tus proyectos? Añade -g para instalarla global en la carpeta de skills de tu agente (~/.agents/skills, o ~/.claude/skills si usas Claude Code):
npx skills add webreactiva/make-it-learnable-skill --skill make-it-learnable -g
También puedes descargar make-it-learnable.zip de la última release y descomprimirlo en .claude/skills/ o .agents/skills/ de tu proyecto.
Es open source. Puedes ver el código fuente en GitHub antes de instalarla.
Preguntas frecuentes ¶
¿Qué necesito para abrir las lecciones? ¶
Solo un navegador actual. Cada lección es un único .html sin dependencias ni conexión a internet. La excepción es el componente Sandbox, que necesita servirse por HTTP en vez de abrirse con file://.
¿En qué idioma genera la lección? ¶
En el que le pidas. Si no lo dices, usa el idioma de tu petición y, por último, el de la fuente. Los textos de la interfaz están en español e inglés.
¿Con qué agentes funciona? ¶
Con cualquiera que lea Agent Skills y pueda escribir ficheros: Claude Code, OpenCode, Cursor, Codex y más. Se ha probado con modelos de Anthropic y con otros a través de OpenCode.
¿Envía datos a algún servidor? ¶
No. La puntuación vive en la página y solo se guarda tu mejor marca en el navegador. Nada sale de tu máquina.
¿Cómo se usa?
No necesitas el comando: tu agente también la activa sola cuando le dices algo como…
- “convierte esto en una lección”
- “hazme una lección interactiva sobre esto”
- “explícale este repo a quien entra nuevo”
- “monta un tutorial interactivo de este README”
- “turn this into a lesson”
- “make this learnable”
Siguiente paso
Ya sabes instalar skills. Aprende a crearlas.
Si te ha gustado tener un profesor a demanda, el siguiente paso es escribir tus propias skills. En la guía de skills aprendes la anatomía de un SKILL.md, a redactar descripciones que la disparan sola y a validarla.
Ir a la guía de skills →