Как использовать Claude в качестве репетитора по JavaScript (в консоли, а не в видео)

7 мин чтения KissMySkills
На этой странице
  1. Что делает AI-репетитор по JavaScript такого, чего не делает курс?
  2. Где люди на самом деле застревают в JavaScript?
  3. Как настроить Claude в качестве наставника по JavaScript, вставив один фрагмент?
  4. Как научить этому async, не запутав тебя?
  5. Как получить настоящий диагноз вместо исправленного файла?
  6. Какой файл с репетитором по JavaScript вам нужен следующим?
  7. Где он даёт сбой?
  8. Как установить файл?
  9. Похожие руководства по Skills
Skill · SKILL.md

Навык, лежащий в основе этого руководства: AI JavaScript Tutor. Превращает Claude, ChatGPT или Gemini в репетитора, который с первого урока помогает вам писать JavaScript в консоли браузера - $19, единоразовый платёж, навсегда ваш.

Перейти к репетитору по JavaScript →

Как репетитор по JavaScript, Claude полезен ровно по одной причине: он прочитает написанный вами код и скажет, где ваша мысленная модель неверна. Он не видит ваш браузер, не знает, что вывела консоль, и не будет переходить по странице вместо вас. Вы запускаете код, вставляете полученный результат, а он идёт от обратного и находит то, что вы неправильно поняли. Именно этот цикл и обучает. Всё остальное - декорации.

JavaScript сильнее большинства первых языков наказывает за поверхностное понимание, потому что он вполне спокойно запустит сломанный код и просто ничего не выдаст. Ни ошибки, ни результата, ни подсказки. Здесь репетитор, который проверяет ваши предположения, ценнее, чем почти в любом другом языке.

Что делает AI-репетитор по JavaScript такого, чего не делает курс?

Он реагирует на ваши действия. Курс - это фиксированная последовательность материала, записанного до вашего появления, поэтому он не замечает, что с массивами у вас всё в порядке, а в том, что это относится. Файл репетитора даёт вам задание, читает написанный вами код и перестраивает дальнейший материал вокруг только что обнаруженного пробела.

AI-репетитор по JavaScript выстраивает уроки в том порядке, в котором JavaScript действительно ломается для людей: значения и область видимости, массивы и map, объекты и деструктуризация, затем DOM и события, и только после этого promises и async await. Именно последний порядок особенно важен. Асинхронность до DOM - это то место, где большинство самоучек незаметно останавливается, потому что их просят рассуждать о времени, прежде чем они научатся рассуждать о состоянии.

Где люди на самом деле застревают в JavaScript?

Стабильно в четырёх местах, и ни одно из них не связано с синтаксисом:

  • Undefined - это не ошибка. С Cannot read properties of undefined рано или поздно сталкивается каждый, и причина почти никогда не находится в указанной строке.
  • DOM ещё не готов. Скрипт запускается, но нужного элемента ещё нет, поэтому ничего не происходит и никаких ошибок не возникает.
  • Асинхронность. Код завершается в неправильном порядке, значения считываются до их появления, а вместо данных в консоли оказывается Promise { <pending> }.
  • Копирование без понимания. Рабочий фрагмент из результатов поиска исправляет проблему сегодня, но ничему не учит, поэтому на следующей неделе та же ошибка возвращается в другом виде.

Как настроить Claude в качестве наставника по JavaScript, вставив один фрагмент?

Открой новый разговор, открой консоль браузера на любой странице и начни с определения уровня, а не с учебного плана. В первые недели консоль - подходящий класс: не нужны сборка и установка, а обратная связь мгновенная.

ПРОМПТ - задание для определения уровня

Ты мой наставник по JavaScript. Пока ничего не объясняй.

Дай мне одно задание, которое я смогу выполнить в консоли браузера. В нём должны использоваться массив, функция и один объект, а объём должен составлять менее пятнадцати строк. Скажи мне, как должен выглядеть правильный вывод.

Я напишу код сам и вставлю сюда и свой код, и точный вывод консоли, включая ошибки.

Затем дай мне:
1. Что мой код доказывает, что я понимаю.
2. Единственное заблуждение, которое впоследствии обойдётся мне дороже всего.
3. Следующие шесть тем в нужном порядке и одно предложение о том, почему выбран именно такой порядок.

Никогда не пиши задание за меня. Если я вставлю что-то сломанное, это будет полезнее для тебя, чем рабочий вариант.

Как научить этому async, не запутав тебя?

С async всё идёт не так, когда его преподают как синтаксис. await его легко набрать, но трудно принять на веру, потому что он просит согласиться с тем, что строка кода может приостановиться, пока остальная часть страницы продолжает работать. Путь вперёд - предсказывать до запуска, а затем сравнивать. Ошибка, высказанная вслух, и есть урок.

ПРОМПТ - сначала предскажи, потом запусти

Научи меня [async/await или теме] с помощью предсказаний, а не объяснений в первую очередь.

1. Дай мне фрагмент короче 15 строк с двумя или тремя вызовами console.log.
2. Прежде чем что-либо объяснять, попроси меня записать точный порядок появления логов и указать, что выводит каждый из них.
3. Подожди моего ответа.
4. Только после этого сообщи правильный порядок и подробно объясни, почему строки, в которых я ошибся, неверны. Не объясняй те, которые я угадал правильно.
5. Дай мне второй фрагмент, который опровергает то же предположение с другой стороны.

Не переходи к следующей теме, пока не предскажешь правильно два фрагмента подряд.
Skill · После наставника - работающий помощник
Max - AI Skill для full-stack-разработки

Наставник намеренно замедляет вас. Когда вы уже умеете писать JavaScript без подсказок, вам нужно обратное: работающий помощник для фронтенда и сервера, который поможет со структурой и теми частями реального проекта, которым не посвящён ни один курс. Max - это такой файл, $19, единоразовый платёж. Сначала учитесь с наставником, затем переключайтесь.

Перейти к Max →

Уроки тоже перестают быть абстрактными, как только появляется то, что вы хотите создать. С репетитором хорошо сочетаются два файла проектов: Chatbot Builder for Node.js ($14.99) для серверной части рабочего чат-бота, включая маршруты, ключи и потоковую передачу, и Chatbot Builder for React ($14.99) для интерфейса той же части проекта. Плохо соберите один из них, а затем пересоберите. Это будет самая быстрая неделя обучения в вашей жизни.

Как получить настоящий диагноз вместо исправленного файла?

Попросите исправление - и получите исправление, что на этом этапе является совершенно неправильным компромиссом. Явно запретите это, и та же модель станет полезной.

ПРОМПТ - пропуск undefined

Мой код работает не так, как я ожидал. Вот он, а также то, что вывелось в консоли.

[PASTE CODE]
[PASTE CONSOLE OUTPUT]

Правила: не исправляй код и не переписывай функцию.

1. Скажи, какую строку обвиняет браузер и какая строка на самом деле является причиной.
2. Спроси меня, что, по моему мнению, хранит одна конкретная переменная в этот момент и почему.
3. Дождись моего ответа. Если он неверный, задай более узкий вопрос вместо того, чтобы говорить мне ответ.
4. Приведи одну строку console.log или debugger, которую я мог бы добавить и благодаря которой сам бы это заметил.

В конце назови общую привычку, которая предотвращает весь этот класс ошибок.

Какой файл с репетитором по JavaScript вам нужен следующим?

Сначала всегда обычный JavaScript. Фреймворки скрывают то, чему вы пытаетесь научиться. Когда язык уже освоен, AI TypeScript Tutor становится самым коротким следующим шагом, потому что это тот же язык, только типы, которые вы уже держали в голове, становятся явными. После этого выбор зависит от задачи: AI React Tutor для компонентной модели, которую требуют в большинстве вакансий, AI Angular Tutor, если рабочая среда корпоративная и строго регламентированная, и AI Swift Tutor, если настоящей целью было приложение для iPhone, а веб оказался обходным путем. AI Skill for JavaScript - это файл совсем другого типа: рабочий помощник на тот случай, когда вы уже это знаете, а не учитель.

Где он даёт сбой?

  • Он не видит вашу страницу. Ни DOM, ни вкладки сети, ни отрисованного результата. Если проблема визуальная, опишите её или вставьте скриншот: попытки угадать по одному исходному коду приводят к выдумкам.
  • Он не знает версию вашего фреймворка. Инструменты JavaScript быстро меняются, а сохранённые в памяти сведения об API незаметно устаревают. Проверяйте всё, что зависит от версии, по официальной документации.
  • Он с радостью слишком рано начнёт обучать вас фреймворку. Попросите React на второй неделе - и он услужливо согласится. Это уже ваше решение, а не его.
  • Он не может определить, запускали ли вы код. Пропустите задание, скажите, что всё сработало, и уроки продолжат двигаться вперёд, пока вы этого не делаете.
  • Работа со сборкой - его слабейшая сторона. Конфигурация бандлера и ошибки модулей зависят от файлов, которых он не видит, поэтому здесь вам, скорее всего, придётся больше описывать происходящее.
  • Он не заставит вас практиковаться. Двадцать минут в день эффективнее пяти часов в воскресенье, а файл никак этого не обеспечивает.
Skill · Прочитайте собственный код
Yuri - AI Skill для проверки кода

Привычка, которая отличает людей, добивающихся прогресса, от тех, кто застревает на месте, - перечитывать код, который уже удалось заставить работать. Юрий проверяет написанное вами и говорит, что в нём хрупко и почему, в тоне коллеги, а не преподавателя. $19, единоразовый платёж. Полезен с того момента, как ваши файлы превышают сто строк.

Посмотреть Юрия →

Как установить файл?

Наставник - это файл SKILL.md внутри ZIP-архива. В Claude откройте Customize → Skills, нажмите кнопку +, выберите Create skill, затем Upload a skill и укажите ZIP-архив. Включите его переключателем - и он готов к работе. Skills доступны в планах Free, Pro, Max, Team и Enterprise.

Единственное действительно необходимое условие - выполнение кода. Если меню Skills неактивно, включите его в Settings → Capabilities, где оно указано как выполнение кода и создание файлов. В планах Team и Enterprise этим управляет владелец в настройках организации, поэтому, если функция отключена для всей организации, обращаться нужно к нему. Anthropic описывает всё это в своей справочной статье о Skills.

Если вы не можете включить выполнение кода или работаете в ChatGPT или Gemini, используйте тот же файл как запасной вариант: откройте ZIP-архив, скопируйте содержимое SKILL.md и вставьте его в Project, пользовательский GPT, Gem или обычные пользовательские инструкции. Поведение будет идентичным — при переходе между инструментами файл нужно просто вставить заново.

Кратко:

Используйте AI-репетитора по JavaScript ($19), чтобы правильно определить свой уровень, учиться в консоли и сначала делать прогноз, а уже потом запускать код. Когда освоите язык, переходите к AI-репетитору по TypeScript или AI-репетитору по React ($19 каждый), а затем создайте что-нибудь настоящее с помощью конструктора чат-ботов для Node.js ($14.99). Всё работает в Claude, ChatGPT и Gemini, установка занимает около двух минут, действует 30-дневная гарантия возврата денег.

Skill · SKILL.md · Работает с Claude и ChatGPT

AI-репетитор по JavaScript

Один файл, вставляется один раз. Консоль с первого урока, DOM до async и репетитор, который спрашивает, какое значение, по вашему ожиданию, должна содержать переменная, вместо того чтобы просто вставить исправление. Без подписки.

$19
Получить репетитора по JavaScript →

KissMySkills — это маркетплейс с 2 000+ AI Skills, 300+ наборов prompt, 55 агентов и бесплатных инструментов для Claude, ChatGPT и любых AI-чатов.

Похожие руководства по Skills

~/get-started

Skills, которые работают. Без лишнего.

Просматривайте все навыки, наборы prompt и agent в магазине.

Просмотреть все навыки →Или попробуйте бесплатные инструменты