Cómo usar Claude como tutor de JavaScript (en la consola, no en un video)

8 min de lectura KissMySkills
En esta página
  1. ¿Qué hace un tutor de JavaScript con AI que no hace un curso?
  2. ¿En qué partes se atasca realmente la gente con JavaScript?
  3. ¿Cómo configuras Claude como tutor de JavaScript con un solo pegado?
  4. ¿Cómo consigues que enseñe async sin perderte?
  5. ¿Cómo obtienes un diagnóstico real en lugar de un archivo corregido?
  6. ¿Qué recurso de tutoría de JavaScript necesitas después?
  7. ¿Dónde falla?
  8. ¿Cómo se instala el archivo?
  9. Guías de Skills relacionadas
Skill · SKILL.md

La Skill detrás de esta guía: AI JavaScript Tutor. Convierte Claude, ChatGPT o Gemini en un tutor que te hace escribir JavaScript en la consola del navegador desde la primera lección - $19, un solo pago, tuyo para siempre.

Ver el tutor de JavaScript →

Como tutor de JavaScript, Claude merece la pena usarlo por una sola razón: leerá el código que escribiste y te dirá dónde está equivocado tu modelo mental. No puede ver tu navegador, no sabe qué mostró tu consola y no hará clic por ti en tu página. Ejecutas el código, pegas lo que devolvió y, a partir de ahí, reconstruye el camino hasta aquello que no entendiste. Ese ciclo es lo que enseña. Todo lo demás es decoración.

JavaScript castiga la comprensión a medias más que la mayoría de los primeros lenguajes, porque ejecutará sin problemas tu código roto y simplemente no producirá nada. Sin error, sin salida, sin pistas. Aquí, un tutor que cuestiona tus suposiciones vale más que en casi cualquier otro lenguaje.

¿Qué hace un tutor de JavaScript con AI que no hace un curso?

Reacciona a ti. Un curso sigue una línea fija por el material grabado antes de que existieras, así que no puede darse cuenta de que dominas los arrays y no entiendes en absoluto a qué esto se refiere. Un archivo de tutor te asigna una tarea, lee el código que escribes y reorganiza lo siguiente en función del vacío que acaba de detectar.

El AI JavaScript Tutor recorre las lecciones en el orden en que JavaScript realmente se rompe para la gente: valores y ámbito, arrays y map, objetos y desestructuración, después el DOM y los eventos, y solo entonces promesas y async await. Este último orden es el importante. Ver async antes que el DOM es el punto en el que la mayoría de los autodidactas dejan de avanzar discretamente, porque se les pide razonar sobre el tiempo antes de poder razonar sobre el estado.

¿En qué partes se atasca realmente la gente con JavaScript?

De forma constante en cuatro lugares, y ninguno de ellos es la sintaxis:

  • Undefined no es un error. Cannot read properties of undefined es el error con el que todo el mundo se encuentra al principio, y la causa casi nunca está en la línea que indica.
  • El DOM aún no está listo. Tu script se ejecuta, tu elemento todavía no existe, no pasa nada y no aparece ningún error.
  • Asíncrono. Código que termina en el orden equivocado, valores que se leen antes de llegar y un Promise { <pending> } registrado donde deberían estar los datos.
  • Copiar sin un modelo. Un fragmento funcional de un resultado de búsqueda resuelve lo de esta noche y no enseña nada, así que el mismo error vuelve con otra forma la semana que viene.

¿Cómo configuras Claude como tutor de JavaScript con un solo pegado?

Abre una conversación nueva, abre la consola del navegador en cualquier página y empieza con una prueba de nivel en lugar de un temario. La consola es el aula adecuada para las primeras semanas: sin proceso de compilación, sin instalación y con comentarios instantáneos.

PROMPT - la tarea de nivelación

Eres mi tutor de JavaScript. Todavía no enseñes nada.

Dame una tarea que pueda ejecutar en la consola del navegador. Debe necesitar un array, una función y un objeto, y ocupar menos de quince líneas. Dime cómo es la salida correcta.

Lo escribiré yo mismo y pegaré tanto mi código como exactamente lo que imprimió la consola, incluidos los errores.

Después dame:
1. Lo que mi código demuestra que entiendo.
2. El único malentendido que más me costará adelante.
3. Mis próximos seis temas en orden y una frase sobre por qué ese orden.

No escribas nunca la tarea por mí. Si pego algo roto, eso te resulta más útil que algo que funciona.

¿Cómo consigues que enseñe async sin perderte?

Async sale mal cuando se enseña como sintaxis. await es fácil de escribir y difícil de creer, porque te pide aceptar que una línea de código puede pausarse mientras el resto de la página continúa. La forma de entenderlo es predecir antes de ejecutarlo y luego comparar. Equivocarse en voz alta es la lección.

PROMPT - predice y luego ejecuta

Enséñame [async/await, o el tema] usando predicciones, no explicaciones iniciales.

1. Dame un fragmento de menos de 15 líneas con dos o tres llamadas a console.log.
2. Antes de explicar nada, pídeme que escriba el orden exacto en que aparecerán los registros y qué imprime cada uno.
3. Espera mi respuesta.
4. Solo entonces dime el orden real y explica específicamente por qué están mal las líneas en las que me equivoqué. Ignora las que acerté.
5. Dame un segundo fragmento que rompa la misma suposición desde otro ángulo.

No pases al siguiente tema hasta que haya predicho correctamente dos fragmentos seguidos.
Skill · Después del tutor, el asistente funcional
Skill de AI para desarrolladores full stack

Un tutor te ralentiza deliberadamente. Cuando ya puedes escribir JavaScript sin ayuda, quieres lo contrario: un asistente funcional tanto en el front end como en el servidor, para la estructura y las partes de un proyecto real que ningún curso cubre. Max es ese archivo: $19, un solo pago. Aprende primero con el tutor y luego cambia.

Ver Max →

Las lecciones también dejan de ser abstractas en cuanto hay algo que quieres crear. Dos archivos de proyecto combinan bien con el tutor: Chatbot Builder for Node.js ($14.99) para la parte del servidor de un chatbot funcional, con rutas, claves y streaming incluidos, y Chatbot Builder for React ($14.99) para la interfaz del mismo proyecto. Construye uno de ellos mal y luego vuelve a construirlo. Será la semana de aprendizaje más rápida que tendrás.

¿Cómo obtienes un diagnóstico real en lugar de un archivo corregido?

Pides la solución y obtienes la solución, que es exactamente el intercambio equivocado en esta etapa. Prohíbelo explícitamente y el mismo modelo se vuelve útil.

PROMPT - el paso undefined

Mi código no hace lo que esperaba. Aquí está, junto con lo que mostró la consola.

[PASTE CODE]
[PASTE CONSOLE OUTPUT]

Reglas: no incluyas código corregido ni reescribas la función.

1. Dime qué línea señala el navegador y cuál es la responsable en realidad.
2. Pregúntame qué creo que contiene una variable específica en ese punto y por qué.
3. Espera mi respuesta. Si es incorrecta, haz una pregunta más concreta en lugar de decírmelo.
4. Dame un console.log o una línea de debugger que pudiera añadir y que me hubiera mostrado esto por mí mismo.

Al final, menciona el hábito general que evita toda esta clase de error.

¿Qué recurso de tutoría de JavaScript necesitas después?

Primero, JavaScript puro, siempre. Los frameworks ocultan aquello que intentas aprender. Cuando domines el lenguaje, el AI TypeScript Tutor es el paso más corto, porque es el mismo lenguaje con los tipos que ya estabas manteniendo en la cabeza hechos explícitos. Después, la elección depende del trabajo: AI React Tutor para el modelo de componentes que piden la mayoría de las ofertas de empleo, AI Angular Tutor cuando el entorno laboral es empresarial y sigue criterios definidos, y AI Swift Tutor si el destino real era una aplicación para iPhone y la web solo fue un desvío. El AI Skill for JavaScript es otro tipo de recurso: un asistente práctico para después de aprender esto, no un profesor.

¿Dónde falla?

  • No puede ver tu página. No tiene acceso al DOM, a la pestaña de red ni al resultado renderizado. Si el síntoma es visual, descríbelo o pega una captura de pantalla, porque adivinar solo a partir del código fuente es cuando se inventa cosas.
  • No conoce la versión de tu framework. Las herramientas de JavaScript avanzan rápido y los detalles de la API que recuerda quedan obsoletos silenciosamente. Comprueba cualquier aspecto específico de la versión en la documentación oficial.
  • Te enseñará encantado un framework demasiado pronto. Pide React en la segunda semana y lo hará. Esa es una decisión tuya, no suya.
  • No puede saber si ejecutaste el código. Omite la tarea, di que funcionó y las lecciones seguirán avanzando mientras tú no lo haces.
  • Las herramientas de compilación son el área más débil. La configuración del bundler y los errores de módulos dependen de archivos que no puede ver, así que tendrás que describir más cosas en ese aspecto.
  • No hará que practiques. Veinte minutos al día superan a cinco horas el domingo, y nada en el archivo te obliga a hacerlo.
Skill · Volver a leer tu propio código
Yuri - Skill de AI para revisar código

El hábito que distingue a quienes mejoran de quienes se estancan es volver a leer el código que ya lograron hacer funcionar. Yuri revisa lo que escribiste y explica qué es frágil y por qué, con el tono de un colega en lugar de un profesor. 19 $, un solo pago. Útil en cuanto tus archivos superan las cien líneas.

Ver a Yuri →

¿Cómo se instala el archivo?

El tutor es un archivo SKILL.md dentro de un ZIP. En Claude, abre Personalizar → Skills, pulsa el botón +, elige Crear Skill y, después, Subir un Skill; luego selecciona el ZIP. Actívalo y estará listo. Skills están disponibles en los planes Free, Pro, Max, Team y Enterprise.

El único requisito real es la ejecución de código. Si el menú Skills aparece en gris, actívalo en Configuración → Capacidades, donde figura como ejecución de código y creación de archivos. En los planes Team y Enterprise, un propietario lo controla en la configuración de la organización, así que, si está desactivado para toda la organización, debes preguntarle a esa persona. Anthropic documenta todo esto en su artículo de ayuda sobre Skills.

Si no puedes habilitar la ejecución de código, o estás trabajando en ChatGPT o Gemini, la alternativa usa el mismo archivo: abre el ZIP, copia el contenido de SKILL.md y pégalo en un proyecto, un GPT personalizado, un Gem o unas instrucciones personalizadas simples. El comportamiento es idéntico; solo tienes que volver a pegarlo cuando cambies de herramienta.

En resumen:

Usa el Tutor de JavaScript con AI (19 $) para determinar correctamente tu nivel, aprender en la consola y tener que predecir antes de ejecutar. Pasa al Tutor de TypeScript con AI o al Tutor de React con AI (19 $ cada uno) cuando domines el lenguaje, y crea algo real con Creador de chatbots para Node.js (14,99 $). Todo funciona en Claude, ChatGPT y Gemini, se instala en unos dos minutos y cuenta con una garantía de devolución del dinero de 30 días.

Skill · SKILL.md · Funciona con Claude y ChatGPT

Tutor de JavaScript con AI

Un archivo, pegado una sola vez. Consola desde la primera lección, el DOM antes de async y un tutor que pregunta qué esperabas que contuviera una variable en lugar de pegar la solución. Sin suscripción.

$19
Obtén el tutor de JavaScript →

KissMySkills es un marketplace con 2.000+ Skills de AI, 300+ packs de prompts, 55 agentes y herramientas gratuitas para Claude, ChatGPT y cualquier chat de AI.

Guías de Skills relacionadas

~/get-started

Skills que funcionan. Sin palabrería.

Explora cada skill, prompt pack y agent de la tienda.

Explorar todas las habilidades →O prueba las herramientas gratuitas