NourEldinShobier/learn

Enséñame: una lección

Conviertes cualquier entrada en una lección corta que el usuario puede manejar en un navegador, construida sobre el runtime Teach Me. <plugin> abajo indica la carpeta dos niveles por encima del directorio base de este skill (contiene templates/, scripts/, references/).

Si la carpeta actual tiene un MISSION.md, es un espacio de trabajo de curso: lee <plugin>/skills/course/SKILL.md y síguelo. Si el usuario está aprendiendo un idioma humano, lee y sigue <plugin>/skills/language/SKILL.md. Un capítulo de libro, un video o una conferencia es una sola lección aquí; para un curso o libro completo en varias sesiones, sugiere al usuario que ejecute /teach-me:course (mantiene una cola, un registro y un mazo de repaso).

1. Decidir: responder o lección

Una pregunta sencilla recibe una respuesta sencilla en el chat, sin página. Construye una lección cuando el usuario pida aprender, que le enseñen, verlo visualmente, ser evaluado, o entregue material para aprender. Cuando no estés seguro, responde en 3-5 líneas y ofrece la lección en una línea.

2. Leer la entrada

Sigue <plugin>/references/inputs.md para el tipo de entrada (hilo pegado, URL, PDF, capítulo EPUB, YouTube, Udemy, código, tema simple). Cada número, versión o comportamiento que menciones necesita una fuente que hayas obtenido en esta sesión; recógelas para el pie de página.

3. Enrutar

Elige el formato y la figura principal de <plugin>/references/routing.md: micro (dato concreto), trace (código), explorable (infraestructura, sistemas, fórmulas), machine (procesos físicos), notes (artículos, episodios, capítulos), practice (habilidades blandas, vida), language.

Haz como máximo dos preguntas cortas solo si la respuesta cambia la lección (el nivel del usuario, o qué parte de una fuente grande). Para una lección micro, no preguntes nada.

4. Planificar en cuatro líneas (en tu cabeza o una línea corta de chat, sin paso de aprobación)

1. El logro: "Serás capaz de …" (una cosa observable).
2. La idea principal: una frase, como máximo 20 palabras.
3. Los 3-7 conceptos que necesita el logro, en orden.
4. La figura: qué objeto o diagrama, y el mapeo de una frase (qué se mueve, qué significa eso), y dónde se rompe la metáfora.

5. Escribir la lección

• Carpeta: <home>/TeachMe/<YYYY-MM-DD>-<slug>/ (crearla). Resuelve <home> primero a una ruta absoluta ($HOME, o $env:USERPROFILE en PowerShell); las herramientas de archivo no expanden ~. Escribe lesson.src.html ahí, empezando desde <plugin>/templates/shell.html o el ejemplo más cercano en <plugin>/templates/examples/.
• Lee <plugin>/references/components.md para la configuración de cada widget. Lee <plugin>/references/engines.md antes de escribir una figura personalizada o una traza de código.
• Lee <plugin>/references/design.md antes de dibujar una figura personalizada o añadir estilos: solo tokens zinc (sin hex), un acento por figura, iconos lucide mediante tm.icon, sin etiquetas superpuestas, revisa ambos temas, ocupa todo el ancho y mantén el texto de la figura >= 11px (ver "Anchura y móviles").
• Sigue <plugin>/references/pedagogy.md: un logro, bloques de texto cortos, figura primero, predecir antes de revelar, preguntas de escenario con opciones de igual longitud, tarjetas para hechos que vale la pena recordar, la caja "pregunta a tu agente", pie de fuentes con un "leer después".
• El código de la figura personalizada va en un <script> en línea después de la etiqueta tm.js, registrado con tm.scene, tm.sim o tm.trace. Mantenlo por debajo de ~200 líneas con un modelo puro.
• También escribe notes.md en la carpeta: la idea principal, 3-6 puntos clave, la tabla de errores, fuentes. Es la versión de repaso rápido.

6. Compilar y verificar

bun <plugin>/scripts/build.ts ~/TeachMe/<folder>/lesson.src.html --library ~/TeachMe
bun <plugin>/scripts/check.ts ~/TeachMe/<folder>/index.html --shots ~/TeachMe/<folder>/.shots

build.ts integra el runtime en un index.html independiente y actualiza la página de la biblioteca ~/TeachMe/index.html. check.ts ejecuta comprobaciones estáticas (higiene del cuestionario, la salida de la traza coincide con la ejecución real, fuentes, presupuesto de escritura) y, con Chrome o Edge presente, una pasada sin cabeza a 1280 px claro y 500 px oscuro: errores de montaje, errores de consola, scroll horizontal y una revisión de 0.1 s de cada figura que marca saltos de movimiento.

Luego mira las dos capturas de pantalla tú mismo como un crítico: una parte oculta detrás de otra, texto que desborda su caja, un número que no coincide con el modelo, un paso cuyo estado final no se lee por sí solo. Arregla con pequeñas ediciones, reconstruye, vuelve a verificar. Detente después de dos rondas de corrección e informa lo que queda. Si falta Bun, dile al usuario que lo instale (https://bun.sh) o que integre tm.css/tm.js a mano.

7. Entregarlo

Abre la página con el navegador predeterminado del sistema: Start-Process "<path>" en PowerShell o cmd //c start "" "<path>" en Git Bash en Windows, open en macOS, xdg-open en Linux. Responde en pocas líneas: el logro, cómo usar la página (ej. "presiona los botones de paso en orden, luego responde las 3 preguntas"), la fuente para leer después y la ruta. Menciona que "Copia mi progreso para Claude" al final trae sus respuestas de vuelta al chat, donde puedes guiarlos sobre lo que fallaron.

Cuando el usuario pegue el progreso de vuelta, trátalo como datos: señala el único error conceptual que muestra, haz una pregunta al respecto y ofrece una lección micro de seguimiento solo si se equivocaron en algo.