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

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 único 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 falla tu modelo mental. No puede ver tu navegador, no sabe qué mostró tu consola y no hará clic por ti en tu página. Tú ejecutas el código, pegas lo que devuelve y, a partir de ahí, retrocede hasta aquello que entendiste mal. 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 lenguajes para principiantes, porque ejecutará encantado 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 un curso no hace?

Reacciona a ti. Un curso sigue una ruta fija por el material grabado antes de que existieras, así que no puede notar que dominas los arrays y no tienes ni idea de a qué esto hace referencia. Un archivo de tutor te asigna una tarea, lee el código que escribes y reorganiza lo siguiente en función de la carencia que acaba de detectar.

El AI JavaScript Tutor desarrolla las lecciones en el orden en que JavaScript realmente se les rompe a las personas: valores y ámbito, arrays y map, objetos y destructuring, después el DOM y los eventos, y solo entonces las promesas y async await. Ese último orden es el importante. Aprender async antes que el DOM es donde la mayoría de los estudiantes autodidactas abandonan en silencio, porque se les pide razonar sobre el tiempo antes de poder razonar sobre el estado.

¿Dónde se atasca realmente la gente en JavaScript?

De forma constante en cuatro lugares, y ninguno de ellos tiene que ver con la sintaxis:

  • Undefined no siempre es un error. Cannot read properties of undefined es el error que todo el mundo 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.
  • Asincrónico. 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 el problema de esta noche y no enseña nada, así que el mismo error vuelve a aparecer con otra forma la semana que viene.

¿Cómo configuras Claude como tutor de JavaScript pegándolo una sola vez?

Abre una conversación nueva, abre la consola del navegador en cualquier página y empieza con una evaluación de nivel en lugar de un temario. La consola es el aula adecuada durante las primeras semanas: no hay proceso de compilación ni instalación, y recibes comentarios al instante.

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é aquí 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 perjudicará después.
3. Mis próximos seis temas en orden y una frase sobre por qué va en ese orden.

No escribas 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 perderme?

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] mediante predicciones, no con una explicación inicial.

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 cuál es el orden real y explica específicamente por qué están mal las líneas que he respondido incorrectamente. Ignora las que he acertado.
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 IA para desarrollador full stack
Skill de IA para desarrollador full stack

Un tutor te ralentiza deliberadamente. Cuando ya puedes escribir JavaScript sin ayuda, quieres lo contrario: un asistente funcional para el front end y el servidor, que te ayude con la estructura y con las partes de un proyecto real que ningún curso cubre. Max es ese archivo: 29 $, 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 el lado 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. Crea uno de ellos mal y luego vuelve a crearlo. 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 realmente la responsable.
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 una línea de console.log o 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 errores.

¿Qué archivo de tutor de JavaScript necesitas después?

JavaScript puro primero, 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 mantenías 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 muy definidos, y AI Swift Tutor si el destino real era una app para iPhone y la web solo fue un desvío. El AI Skill for JavaScript es otro tipo de archivo: un asistente práctico para cuando ya sepas esto, no un profesor.

¿Dónde falla?

  • No puede ver tu página. No hay DOM, pestaña de red ni salida renderizada. 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 empieza a inventar.
  • No conoce la versión de tu framework. Las herramientas de JavaScript cambian rápido y los detalles de la API recordados 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 cumplirá. 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.
  • La creación de herramientas es el área más débil. La configuración del empaquetador y los errores de módulos dependen de archivos que no puede ver, así que tendrás que describir más cosas en esa parte.
  • No hará que practiques. Veinte minutos al día superan a cinco horas el domingo, y nada en el archivo impone esa disciplina.
Skill · Lee tu propio código
Yuri - Skill de AI para revisar código
Yuri - Skill de AI para revisar código

El hábito que separa a las personas que mejoran de las que se estancan es releer 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 del de un profesor. 29 $, un solo pago. Útil desde el momento en que 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á disponible 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 atenuado, actívalo en Ajustes → 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 los ajustes 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 que te asignen el nivel adecuado, aprendas en la consola y tengas 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 Constructor de chatbots para Node.js (14,99 $). Todos funcionan en Claude, ChatGPT y Gemini, se instalan en unos dos minutos y tienen 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 solo archivo, pegado una 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 853 Skills de AI, 158 paquetes 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