Transcription
Кодирующий агент хорош настолько, насколько хорош рабочий процесс, который вы вокруг него выстраиваете. Дайте ему расплывчатый запрос, и вы получите расплывчатый код. Дайте ему отсутствие вкуса, и вы получите шаблонный пользовательский интерфейс. Дайте ему отсутствие ограничений, и внезапно у вас появится компонент на 900 строк с комментарием вроде: «Обновить состояние». Ну, спасибо, Шерлок. Но дайте ему правильные навыки, правильный порядок, и все изменится. Он перестанет ощущаться так, будто вы нянчитесь с очень уверенной машиной хаоса, и вместо этого начнет ощущаться так, будто у вас есть настоящая инженерная команда. Поэтому сегодня я хочу показать вам семь навыков, которые я использую каждый день, чтобы превратить идею из беспорядочной мысли в приложение Next.js, в отполированный пользовательский интерфейс и, наконец, в код, который мне не стыдно выпустить. Потому что цель — не больше кода, цель — лучший код, лучшие решения и меньше моментов «Что это такое?». Но прежде чем мы углубимся в отдельные навыки и, соответственно, в полный рабочий процесс, я хочу сначала дать вам краткое TLDR по навыкам. Итак, вот в чем дело: я предполагаю, что вы, ребята, уже знаете, что такое навыки, и примерно знаете, как они работают. Тем не менее, быстрое повторение никогда не повредит. Итак, навыки были созданы Infrac и выпущены около 1 года назад. И по сути, это многоразовые ресурсы, основанные на файловой системе, которые предоставляют агентам, то есть Cursor, Cloud Code, Code Acts, Open Code и т. д., экспертизу в конкретной предметной области. Это означает рабочие процессы, контекст и лучшие практики, которые превращают универсальных агентов в специалистов, что очень мощно и довольно важно для кодирования. И в отличие от промптов, то есть инструкций на уровне диалога для разовых задач, навыки загружаются по требованию и устраняют необходимость многократно предоставлять одно и то же руководство в нескольких диалогах. И именно поэтому навыки так мощны и в последнее время приобрели большую популярность. Теперь одна вещь, которую многие люди не осознают, заключается в том, что навыки — это не просто файлы markdown. На самом деле, навыки состоят из четырех различных частей. Прежде всего, у вас есть основной файл markdown навыка. И он включает ожидаемые метаданные о навыке и полный план. Затем у вас есть каталог скриптов. И он содержит любые связанные скрипты, которые поддерживают рабочий процесс, описанный в навыке. Это, по сути, превращает ваш статический навык во что-то динамическое, что ваш агент может выполнить. Затем у вас есть каталог ссылок. И он содержит дополнительную документацию, на которую ссылается основной файл markdown навыка, но не расширяет его. И это потому, что вы не хотите раздувать основной файл markdown навыка. И это здесь тогда действует как дополнение. Он дополняет документацию. Другими словами, данные, на которые агент может действовать. И затем есть каталог ресурсов. И он содержит статические ресурсы, такие как шаблоны, диаграммы, схемы, ресурсы, которые ваш агент может использовать, чтобы дать вам наилучший возможный результат. И эти четыре части затем составляют навык. И затем этот навык может быть использован вашим агентом. Другими словами, вызван. Тем не менее, вот быстрый совет от меня. Не раздувайте своего агента. Не устанавливайте тысячи навыков. Это не работает. Держите его легким. Устанавливайте только те навыки, которые вы действительно используете.
Теперь я, конечно, мог бы сказать что-то вроде: «Эй, вот семь навыков. Установите их. Это лучшие на рынке. Берите их. И спасибо за просмотр этого видео». Но так это не работает. Мы настоящие инженеры, а не слиперы ИИ. Например, можете ли вы использовать отдельные навыки без какого-либо рабочего процесса? Конечно, это работает, и вы, вероятно, получите какой-то приемлемый результат. Но если вы хотите использовать весь потенциал своих навыков, вам нужно использовать их в рабочем процессе с определенным порядком. И именно это я делаю каждый день, и именно так я могу выпускать очень быстро, очень хороший код, соблюдая лучшие практики, безопасность, а также выпуская что-то, что выглядит хорошо, эстетически приятно. Поэтому, когда ютуберы просто говорят что-то вроде: «Это лучший навык. Установите его, и все ваши проблемы исчезнут», они просто лгут, потому что это не работает. Неважно, насколько хорош навык. Если вы не используете его в рабочем процессе с определенным порядком, то это просто еще один навык, о котором вы забудете через 2 недели. И поверьте мне, я знаю, о чем говорю. Я занимаюсь этим профессионально каждый день.
Теперь, возвращаясь к нашим навыкам, вы можете сказать: «Хорошо, Джен. Глядя на этот рабочий процесс, первый навык — это навык написания PRD. Так как же он работает? Как нам его использовать?» Ну, чтобы показать вам все эти навыки в действии, нам нужно что-то построить вместе. И это означает, что мы создадим Money Snapshot. Это простая панель личных финансов, которая показывает ваш ежемесячный доход, расходы, регулярные счета, подписки и, конечно же, цели сбережений в одном месте. Пользователи могут вводить данные вручную или импортировать базовый CSV, поэтому нам не нужны интеграции с банками или загрузка счетов. И цель — сделать продукт достаточно маленьким и простым для видео, но достаточно реальным и сложным, чтобы реально протестировать полный рабочий процесс и, соответственно, семь навыков. Но с чего нам теперь начать? Ну, если мы вернемся к нашему рабочему процессу, вы увидите, что первый шаг — это создание PRD, а точнее, использование навыка написания PRD. Но теперь вы можете сказать: «Подождите, Шан. Прежде чем мы продолжим, почему это вообще первый шаг и почему мы вообще должны создавать PRD? Не потратим ли мы время впустую?» Нет. Это, вероятно, самый важный шаг во всем этом рабочем процессе, и это шаг, на который вы должны потратить больше всего времени, потому что этот навык, навык написания PRD, поможет нашему агенту замедлиться и определить продукт, прежде чем он начнет его создавать. Таким образом, вместо того, чтобы сразу переходить к функциям, он заставляет агента думать. Например, какую проблему мы решаем? Кто целевая клиентская база? Почему это важно сейчас? Как мы измеряем успех? Какова целевая техническая форма? Что явно исключено из области действия прямо сейчас? Это очень важные вопросы, на которые нам нужно ответить, чтобы получить полное представление о продукте. И почему это вообще важно? Ну, вот в чем дело. Мы начнем с нуля, а это значит, что наш агент будет летать вслепую, если у нас не будет PRD. Но с хорошим PRD у нас будет не только полное понимание продукта, но и наш агент будет точно знать, каким должен быть наш продукт, каким он будет и каким он не будет. И теперь вы можете спросить меня: «Эй, Шан. Почему мы будем использовать этот навык написания PRD от Lenny’s Skills? Я имею в виду, есть также, например, навык PRD от Мэтта и еще нескольких человек. Почему именно этот навык?» Ну, вот в чем дело. Прежде всего, большинство навыков PRD — это своего рода мусор, потому что они сосредоточены не на том. Вам не нужен 12-страничный документ, который просто хорошо звучит, но не является действенным. Вам нужно что-то действенное и понятное. И по моим тестам, этот навык именно это и делает. Но теперь вы можете сказать: «Ян, что делает этот навык таким особенным и действенным?» Ну, если вы посмотрите на резюме, вы найдете ответ. Помогите командам писать сфокусированные действенные PRD, используя фреймворки от 11 продуктовых лидеров. Итак, если я вернусь к навыку, вы увидите здесь содержимое навыка. И внутри они добавили цитаты от лидеров отрасли, таких как, например, генеральный директор Versel и несколько других крутых людей. И одна цитата, например: «Самое важное действие — это первая часть. Каков фон и контекст? Какова проблема? Почему это важно? И почему это важно сейчас?» По сути, этот навык не говорит агенту создавать PRD, используя формат XYZ, но он хочет, чтобы агент думал самостоятельно. Принимайте цитаты во внимание и пытайтесь найти наилучшее возможное решение для создания высококачественного PRD. И эти цитаты, по сути, дают агенту лучшие практики. Как ведущие команды создают PRD. И, используя эту информацию, агент способен задавать нам высококачественные вопросы и в то же время создавать PRD, который не является просто сложным мусором, а чем-то, что можно использовать.
Теперь, чтобы протестировать навык, нам, конечно, тоже нужно создать промпт. Итак, я создал супер простой. Используйте навык написания PRD, чтобы помочь мне создать легкий PRD для моего продукта под названием Money Snapshot. И затем я добавил некоторый контекст относительно моего продукта. Теперь это не высококачественный промпт, но это нормально, потому что навык сделает всю тяжелую работу и задаст мне все необходимые вопросы. Итак, если я сейчас нажму Enter, вы увидите здесь, что агент сначала вызовет навык, затем пройдет через навык и мгновенно задаст мне вопросы для создания PRD. Итак, что я сейчас сделаю, это быстро отвечу на них. Например, какая основная платформа для V1? Ну, это веб-приложение. Затем, где должны храниться данные? Мы можем написать здесь SQLite локально. Затем, например, дальше, что еще? Затем, сколько истории времени должна поддерживать V1? Давайте, может быть, скажем 2-3 месяца. И затем, кто основной пользователь? Ну, это люди, управляющие своими личными финансами. И затем, насколько важен импорт CSV в V1? Скажем, это не очень важно, поэтому мы отложим это. И что заставит вас считать V1 успешным? Ну, я просто скажу, что пользователи могут ответить, как я справляюсь в этом месяце. Теперь, как вы видите здесь, наш агент задал нам три раза несколько вопросов, и это очень важно, потому что агент теперь полностью понимает, что я хочу. И, используя эту информацию, он смог создать высококачественный PRD. Теперь, если вы посмотрите на этот PRD, вы увидите здесь, что он не супер сложный. Например, он простой. У нас есть таблица, в области действия V1, вне области действия, основные истории пользователей и критерии приемки, запланированный доход. Например, это именно то, что вам нужно. Это действенно и легко понять. Это не какой-то странный корпоративный мусор, который не работает. И именно поэтому мне нравится использовать этот навык. Обычно я бы сейчас сказал следующее. Эй, пожалуйста, возьми этот PRD, а затем сохрани его в моем каталоге и назови prd.md. Спасибо. И я делаю это, потому что хочу, чтобы мой агент мог позже ссылаться на PRD, потому что у нашего агента все еще будут вопросы, и вместо того, чтобы спрашивать меня, он сможет делать все автономно, глядя на PRD. Мы закончили с первым шагом. Мы создали высококачественный и действенный PRD, используя навык написания PRD. И теперь вы можете сказать: «Хорошо, Ян, глядя на рабочий процесс, второй шаг — использовать навык grill me docs, но как нам его использовать? Должны ли мы создать план реализации?» Нет. Вот в чем дело: PRD, который мы только что создали, является самым важным файлом в каталоге вашего проекта, потому что он дает вашему кодирующему агенту все знания и данные, необходимые для быстрой, уверенной и безопасной разработки. И это также означает, что, поскольку наш проект относительно небольшой, он также заменяет планы реализации. Этот PRD теперь является нашим планом реализации. Но это также создает одну большую проблему. Это теперь наш единственный источник истины, и это означает, что мы должны быть очень точными и точными в нашем языке. Но что я имею в виду под этим? Итак, этот PRD использует много терминов, таких как транзакция, подписка, счет, и наш агент должен понимать, что такое транзакция, чем подписка отличается от счета, что такое ежемесячный снимок, как он работает. Поэтому мы должны убедиться, что наш агент не просто предполагает что-то, а точно понимает, что мы подразумеваем под нашим конкретным языком. И именно поэтому мы сейчас будем использовать и использовать навык grill me docs. Но теперь вы можете сказать: «Ян, все это имеет смысл. Мы хотим быть супер точными в нашем языке, но как этот навык помогает нам с этим?» Ну, позвольте мне дать вам небольшую предысторию. Этот навык был создан Мэттом. Я думаю, вы все знаете, кто он. И одна вещь о нем — он очень точен, как и навык. Навык похож на учителя, который говорит: «Подождите, что вы на самом деле имеете в виду под этим? Что вы имеете в виду под расходами, счетами, подписками? Как они работают? Можете ли вы объяснить все точно?» И это очень полезно, потому что расплывчатый язык продукта действительно быстро превращается в расплывчатый код. И этот навык будет неустанно опрашивать нас по каждому аспекту нашего плана, другими словами, нашего PRD. Я хочу, чтобы этот навык бросил вызов PRD, определил такие термины, как транзакция, счет, подписка, цель сбережений, и убедился, что мы случайно не построим что-то, чего мы не хотим. И поскольку мы теперь знаем, что такое навык и что он делает, мы можем его использовать. Итак, внутри здесь я снова создал супер простой промпт, потому что опять же, этот навык делает всю тяжелую работу. И кстати, все промпты и навыки связаны ниже в описании к YouTube, так что вы тоже можете их использовать. Но с этим покончено, я сейчас нажму Enter, и вы увидите что-то интересное. Наш агент снова вызовет навык, а затем задаст нам кучу вопросов. Как вы видите здесь, наш агент теперь вызвал навык, и у него есть вопрос к нам. Теперь одна вещь, которую вы увидите здесь, это то, что у нас только один вопрос. Почему это? Ну, если вы откроете навык, позвольте мне быстро открыть его, вы увидите здесь, что навык конкретно говорит: «Задавайте вопросы по одному, ожидая обратной связи по каждому вопросу, прежде чем продолжить». Потому что навык хочет, чтобы вы потратили как можно больше времени на каждый отдельный вопрос. Так что именно я сейчас и сделаю. Как вы видите здесь, я наконец закончил и ответил на 17 вопросов. И дело в том, что когда я изначально просматривал PRD, все выглядело хорошо. Но теперь, когда агент задал мне все вопросы, я понял, что было много открытых вопросов, что нехорошо, потому что это снова означает много места для предположений, которые вы не хотите. Например, вопрос четыре был: «Эй, каким должен быть месяц расходов?» Это означает, должны ли мы просто сказать: «Эй, пользователь может выбрать любую дату?» Или это должно быть в этом конкретном месяце? И теперь я сказал: «Эй, это должно быть основано на дате, и выбор даты должен быть ограничен этим активным месяцем». Это очень важно, и это теперь устранило один открытый вопрос и, соответственно, одно предположение. Но агент также сказал здесь: «Эй, должен ли я синхронизировать все эти знания с нашим PRD?» И да, я хочу этого. Поэтому я скажу следующее: «Эй, большое спасибо. Пожалуйста, теперь возьмите эти знания и обновите наш PRD». Так что приятная вещь в том, что теперь у нас есть два ресурса. У нас есть PRD, который является нашим единственным источником истины и самым важным файлом, а context.md в данном случае действует как дополнение. Он дополняет наш PRD еще большим количеством знаний, данных, контекста, что означает, что наш агент способен принимать еще лучшие решения и, соответственно, писать еще лучший код. И кстати, вот еще одна вещь, которую я хочу, чтобы вы запомнили. Цель этого навыка — не сделать ваш план длиннее или ваш PRD длиннее. Цель — сделать его чище и точнее, ничего больше. И это означает, да, вы потратите много времени на ответы на эти вопросы. Мне потребовалось 20 минут, чтобы сделать все это, но это также означает, что у вас теперь есть прочная основа, которая позволит вам выпускать продукцию экспоненциально быстро.
Теперь, когда PRD был написан и проверен нашим навыком Grill Me Dogs, нам также нужно фактически создать приложение. И именно здесь вступает в игру следующий навык разработчика. Мы будем использовать навык Next.js разработчика в качестве дополнения к нашему промпту, чтобы помочь нашему агенту реализовать весь необходимый код в правильной манере. И причина, по которой мы будем использовать этот конкретный навык, заключается в том, что мы не хотим, чтобы наш агент просто писал базовый React, а скорее код Next.js. Это означает паттерны, введенные Next.js, такие как app router, серверные компоненты, клиентские компоненты, кэшируемые компоненты, границы ошибок, кэширование метаданных, кто, куча [прочищает горло] вещей. И мы будем конкретно использовать этот навык разработчика Next.js, созданный этим парнем прямо здесь. И причина этого довольно проста. Я тестировал много навыков, в том числе официальный, созданный Vercel, и этот просто дал мне лучшие результаты. Потому что навык довольно простой, но в то же время достаточно продвинутый и понятный. Итак, старший разработчик Next.js с опытом работы с Next.js 14, app router с серверными компонентами, полностековые развертывания с акцентом на производительность и превосходное SEO. Что мне нравится в этом навыке, так это то, что все представлено очень просто. Планирование архитектуры, реализация маршрутизации, слой данных, оптимизация, развертывание, справочное руководство, app router, серверные компоненты. Потому что, как уже упоминалось, этот навык — это не просто маленький файл markdown, но у вас также есть подкомпоненты, такие как каталог ссылок. И как вы видите здесь, у нас теперь есть документация, которая дополняет основной файл markdown навыка. И что мне также нравится, так это то, что у нас внутри есть ограничения. Итак, что должен делать агент, использовать app router, сохранять компоненты как серверные компоненты, использовать нативный fetch, а также что агент не должен делать, преобразовывать компоненты в клиентские компоненты для доступа к данным, пропускать границы загрузки или ошибок, развертывать без запуска next build, и у нас также есть примеры кода. Опять же, по моему опыту, этот навык дает мне лучшие результаты. И да, есть также официальный навык, но он просто никогда не работал так хорошо, как этот, и поэтому я буду использовать этот конкретный навык.
Теперь, как вы видите здесь, это снова промпт, который я буду использовать. Итак, по сути, используйте навык разработчика Next.js, о котором мы только что говорили, чтобы создать Money Snapshot из PRD и context.md. Итак, внутри здесь я специально хочу, чтобы агент вызвал навык, но в то же время я также добавил весь соответствующий контекст. Это означает, в частности, наш файл PRD, который действует как наш файл реализации, и файл context.md, который дополняет наш PRD еще более точным языком. И прежде чем я сейчас нажму Enter, есть одна вещь, которую я хочу, чтобы вы знали, и это то, что я бы не рекомендовал вам делать это здесь в обычном производственном сценарии. Например, наш проект простой? Да, вроде того, но у нас все еще много движущихся частей. это полноценный проект, верно? С фундаментом, с фронтендом, с бэкендом. Нам нужно посмотреть на аспект безопасности. Нам нужен фронтенд, который выглядит хоть как-то прилично. Так что есть много вещей, которые должен реализовать наш агент. И обычно, что я бы рекомендовал вам сделать, это разбить все на подзадачи. Например, один агент должен реализовать, я не знаю, фундамент, затем бэкенд, а другой агент должен реализовать фронтенд, другой агент должен посмотреть на аспект безопасности и тому подобное. Но в этом случае я позволю своему агенту сделать все за один прогон, хотя я бы обычно этого не делал. И обычно, что я бы также сделал, это прежде всего, опять же, разбить все на подзадачи, а затем я бы взял подзадачу, создал высококачественный промпт, затем план реализации, а затем я бы позволил агенту создать код на основе плана реализации, затем я бы просмотрел код с помощью агента, имеющего PR-ревью. Это неважно. У меня много работы для видео на моем YouTube-канале, но я хочу, чтобы вы просто помнили, что вам не обязательно нужен один агент, чтобы построить все. И одна вещь, которую вы также должны осознать здесь, это то, что всякий раз, когда у нас есть новый промпт, я всегда начинаю новую сессию. Итак, если я открою свою панель агента, вы увидите здесь, что у нас есть два предыдущих разговора с агентом. Первый был для создания PRD, а второй агент был для создания PRT. И теперь это наша третья сессия агента. Каждый агент теперь специализирован и сосредоточен на одной конкретной задаче. Итак, поскольку вы теперь знаете все это, я нажму Enter и посмотрим, как наш агент справится и все ли получится.
Как вы видите здесь, наш агент теперь закончил. Он создал почти 10 000 строк кода. Черт. Вероятно, есть много вещей, которые не идеальны в коде, но эй, это нормально. Итак, знаете что? Давайте протестируем. Я уже запустил dev-сервер. Давайте вернемся, и это Money Snapshot. Интересно. Итак, давайте загрузим пример данных. И как вы видите здесь, запланированный доход 5200, общие расходы, чистый доход. Ага. Круто. Затем у нас есть счета, два неоплаченных, 230 долларов предстоящих, аренда, электричество, я полагаю, электричество, интернет, кредитная карта, минимум, подписки, цели сбережений. Черт, это выглядит отлично. Давайте проверим расходы. Что у нас здесь? У нас есть ошибка, но это на самом деле довольно круто, потому что теперь мы видим, что граница ошибки работает. Итак, что я сделаю, это просто скопирую эту ошибку. Давайте вернемся, и я вставлю ее сюда. Это здесь было в некотором роде ожидаемо, потому что опять же, мы хотели, чтобы наш агент создал продукт от 0 до 100 за один раз. И, конечно, он будет делать ошибки и промахи. Это совершенно нормально и совершенно ожидаемо. Давайте вернемся. Это теперь работает? Да, так что я могу добавить расход. Я вижу свои расходы. Давайте перейдем к счетам. Ага, предстоящие, неоплаченные, оплаченные в этом месяце. Затем давайте проверим подписки. Мы можем видеть сбережения, импорт CSV. Теперь это уже выглядит довольно красиво. Тем не менее, это может выглядеть еще лучше. Итак, давайте вернемся к нашей маленькой диаграмме. Мы закончили с шагом три. Мы создали наше приложение, используя навык разработчика Next.js. И следующий шаг — продолжить с навыком дизайнера. Но что такое навык дизайнера и зачем он нам нужен? Ну, по сути, как уже упоминалось, приложение в порядке. Оно выглядит нормально. Им легко пользоваться, но мы хотим, чтобы оно выглядело профессионально, как настоящий продукт. И интересная часть этого навыка дизайнера заключается в том, что он не просто делает UI красивее, что бы это ни значило. Он кодирует очень специфическую философию дизайна. Итак, вкус, детали взаимодействия, решения по анимации, отзывчивость, доступность и все те мелочи, которые пользователи могут сознательно не замечать, но определенно чувствуют. И для этого мы будем использовать этот навык проектирования дизайна Эмиля. Я полагаю, его зовут Эмиль, я не уверен. И круто то, что создатель навыка — бывший сотрудник Vercel, а теперь работает в Linear. И он даже создал много крутых проектов, таких как, например, Sona, лучший компонент тостов для React. Как вы видите здесь, он выглядит красиво. Это также то, что я использую на своем личном сайте. Так что он очень, очень талантлив. И приятная вещь также в том, что этот навык очень детализирован. Например, позвольте мне показать вам. Это навык. Он огромный. И это не плохо. Например, да, вы не хотите раздувать навык, но это не раздуто. Он все еще короткий, он все еще лаконичный, он просто очень детализирован. И что мне действительно нравится в этом навыке, так это то, что он фокусируется на всех мелких деталях. Потому что мелкие детали делают продукт великим. Итак, как вы видите здесь, у нас есть формат обзора. При обзоре кода UI вы должны использовать таблицу markdown с колонками до и после. Затем фреймворк принятия решений по анимации. Должна ли эта анимация вообще быть? Какова цель? Какой easing следует использовать? Это здесь очень детализировано. И это не просто навык, это, по сути, полный план действий для отличного UI и UX. И поскольку вы теперь знаете все это, мы можем использовать навык, чтобы сделать наше приложение идеальным. Я снова создал супер простой промпт. Используйте навык проектирования дизайна, чтобы отполировать UI Money Snapshot. Улучшите существующее приложение, чтобы оно ощущалось более целенаправленным. Что я также сделаю здесь, так это упомяну свой PRD, а также мой файл contacts.md для еще большего контекста. И это все. Я сейчас нажму Enter, и мой агент начнет работу. Он вызовет навык, он пройдет через все здесь. Опять же, это огромный навык, но он очень мощный. И одна вещь, которую я хочу упомянуть, это то, что я уже протестировал много фронтенд-навыков, например, около 20. И этот навык всегда показывал лучшие результаты, потому что он имеет наибольшую детализацию и, самое главное, он фокусируется на мелочах. Большинство фронтенд-навыков говорят: «Эй, не используйте, я не знаю, градиенты. Не используйте фиолетовую цветовую тему». Например, это хорошо, да, но это не учит агента вкусу. Но этот навык делает это, что меняет правила игры. И поскольку наш агент теперь закончил, мы также можем протестировать его. Итак, давайте вернемся, и это теперь наше приложение. Как вы видите здесь, у нас нет никакого редизайна, и это намеренно. Этот навык не предназначен для фундаментального редизайна, а скорее для обновления существующего дизайна и его улучшения. Итак, это здесь теперь выглядит очень чисто. У нас есть эта приятная линия прогресса. Давайте перейдем к расходам. Наша боковая панель теперь работает. Это тоже все выглядит отлично. Давайте перейдем к счетам. Мне это нравится. Это именно то, что я хотел. Опять же, у нас нет никакого большого редизайна, а скорее наш агент теперь сосредоточился на мелочах и довел их до совершенства. Теперь, конечно, мы могли бы пойти дальше и сделать еще больше обновлений, но это то, что вы можете сделать сами.
Теперь, когда наше приложение работает и выглядит хорошо, мы можем перейти к шагу пять, который называется «деслоп». Другими словами, мы хотим удалить сгенерированный ИИ мусор. Например, ненужные комментарии, странные функции, которые дублируются по всей кодовой базе 5000 раз, и тому подобное. И этот навык deslop был создан Cursor. Итак, если вы зайдете в Cursor, нажмите на маркетплейс, вы найдете все навыки здесь. И, как упоминалось, мы хотим использовать навык deslop. Теперь этот навык имеет пять областей фокусировки, и, как вы видите здесь, он очень короткий. Это плохо? Нет. Это очень распространенное заблуждение. Многие люди думают, что для того, чтобы навыки были хорошими, они должны быть большими, но это не так. Короткие навыки так же хороши. Все зависит от того, что должен делать навык. Теперь, в данном случае, этот навык имеет пять областей фокусировки. Дополнительные комментарии, которые не нужны, защитные проверки или блоки try-catch, которые являются аномальными, приведения к любому глубоко вложенному коду и другие шаблоны, несовместимые с файлом и окружающей кодовой базой. Итак, этот навык не пытается сделать все. Этот навык пытается сосредоточиться на этих областях, и это все. И важно помнить, что этот навык deslop — это не ревью кода. Это проход для очистки мусора. Он предназначен для сфокусированной и небольшой очистки всего мусора, сгенерированного нашим агентом. Итак, что я сделаю, это вернусь. Я создам нового агента, и внутри здесь я просто скажу: «Используйте навык deslop для очистки текущей ветки». И это все. Я нажму Enter, и агент начнет работу.
Теперь, как вы видите здесь, наш агент закончил, и он внес несколько изменений. layout.tsx удалил дубликат ensure app initialized. actions.ts удалил обертку get month record. Упростил это до return this. month.ts мы использовали get or create month. Затем expenses page.tsx обновлен для использования упрощенных вспомогательных функций. Итак, как вы видите здесь, мы удалили довольно много кода, и наше приложение стало еще лучше. Теперь, вот одна вещь, которую я хочу, чтобы вы запомнили. Поскольку эта ветка имеет 10 000 или почти 10 000 добавленных строк кода, этому агенту не очень легко найти все ошибки. Поэтому я упомянул в начале, попробуйте разбить свою кодовую базу или свой общий проект на небольшие подфункции, небольшие удобоваримые части, над которыми может работать ваш агент. И это позволит вашему агенту писать лучший код, но также и легче будет просматривать код.
Теперь, когда мы удалили сгенерированный ИИ мусор, я хочу, чтобы вы теперь продолжили, улучшая кодовую базу React. Что я имею в виду под этим? Ну, опять же, что мы используем в качестве нашего фреймворка? Мы Next.js. На чем построен Next.js? React. Это означает, что нам нужен прочный фундамент. И для этого мы будем использовать React Doctor. React Doctor ловит все ошибки, написанные вашим агентом, в плане плохого кода React. React Doctor — это инструмент, о котором я узнал совсем недавно, но он очень мощный. По сути, это комбинация навыка и CLI. CLI ловит все ошибки в вашей кодовой базе, а навык затем может исправить все ошибки. Другими словами, инструктировать вашего агента исправлять плохой код. И приятная вещь в том, что CLI дает вам оценку, то есть оценку здоровья от 0 до 100, и вы также получите все корневые причины. А затем, используя навык, вы можете исправить все ошибки и довести свою оценку от 0 до 100. Это означает идеальный код. Итак, позвольте мне показать вам. Это команда CLI. Я скопирую ее. Давайте вернемся. Я открою терминал и затем вставлю ее сюда. Теперь, как вы видите здесь, наш агент просканировал 60 файлов, и у нас довольно много ошибок и предупреждений. Но в целом качество кодовой базы не плохое. Оно отличное. 84%, что неплохо. Но опять же, у нас 98 проблем, и нам нужно их исправить. Итак, я настрою React Doctor для этого проекта. Да, и затем мы хотим установить навык. Итак, я нажму Enter. Затем я напишу you say no, и это все. Что мы теперь можем сделать, это скопировать проблемы в буфер обмена, и именно это я и сделаю. Итак, я скажу да, и теперь он скопирован в мой буфер обмена. Что мы теперь можем сделать, это создать новую сессию агента, и я вставлю ее сюда. И кстати, что вы также можете сделать здесь, это использовать эту команду React Doctor verbose. Именно это я и сделаю, и тогда вы получите полный контекст для каждой ошибки или предупреждения, что очень мощно. Но да, поскольку мы не хотим исправлять это вручную, мы будем использовать нашего агента. И внутри здесь наш агент сначала снова запустит ту же команду. Вместо NPX я скажу PNPM DLX. Затем он исправит ошибки, прочитает кодовую базу перед действием, исправит корневые причины, а затем снова запустит это, чтобы проверить, думаем ли мы. Итак, я сейчас нажму Enter, и наш агент начнет работу.
Как вы видите здесь, наш агент теперь закончил, и он улучшил нашу оценку React Doctor. Ранее она была 84, а теперь 98, и это довольно круто видеть. Итак, он исправил много ошибок, он исправил предупреждения с высоким воздействием, а затем также несколько инфраструктурных вещей. Теперь, конечно, остаются предупреждения, но они низкого риска, и мы оставим их как есть. Если я сейчас снова запущу эту команду, давайте вставим ее сюда, вы увидите то же самое. Оценка 98 с шестью проблемами. И с этим мы также закончили с шагом шесть. И последний шаг — это провести ядерный обзор. Но что именно я имею в виду под этим? Это один из моих наиболее используемых навыков и шагов в моем рабочем процессе. Это не обычный ревью кода. Этот навык не создает обычный ревью кода, и он также не совпадает с D Slop. D Slop удаляет сгенерированный ИИ мусор, а этот навык ядерного обзора, по сути, спрашивает, достаточно ли хорошо структурирована реализация, чтобы ее сохранить. Итак, он ищет структурные проблемы, такие как гигантские файлы, спагетти-условия, слабые абстракции, логика, которая не имеет смысла, неясные границы типов и упущенные возможности для упрощения дизайна. И этот навык был снова создан командой Codium. Итак, если вы зайдете в Codium и нажмете Customize, вы найдете этот плагин Codium Team Kit. А затем внутри здесь вы найдете навык термоядерного обзора качества кода. Кстати, мне нравится название. Оно довольно крутое. Теперь этот навык снова довольно приятный, потому что он очень сфокусирован. Итак, он не огромный, что, как вы уже знаете, не плохо. Многие навыки пытаются сделать слишком много одновременно, и тогда эти навыки на самом деле не дают хороших результатов. Вам нужны навыки, которые сфокусированы, детализированы, но в то же время не усложняют вещи. И это то, что я всегда ищу. И каждый навык, который я показал вам в этом видео, соответствовал этим критериям. Все навыки были сфокусированы, детализированы, но не усложняли инструкции. Итак, внутри здесь у нас теперь есть ожидания вывода, панель утверждения, отсутствие явных структурных регрессий, отсутствие очевидных упущенных возможностей для радикального упрощения реализации и тому подобное. Это снова один из моих наиболее используемых навыков. Я использую его каждый день, и всякий раз, когда я создаю PR, я запускаю этот навык. Так что это последний навык, но, на мой взгляд, также один из самых важных. Первый навык — это создание PR-команды, а последний навык — это обзор всего. Так что да, это довольно круто. И поскольку вы теперь знаете, что такое навык, опять же, на высоком уровне, это навык обзора, который очень сфокусирован на том, чтобы просто сделать ваш код лучше, а не переписать его с нуля. Итак, давайте вернемся к нашей панели агентов. Я создам новую сессию агента, а затем внутри здесь я скажу: «Используйте навык термоядерного обзора качества кода, чтобы просмотреть текущую ветку по сравнению с main». Теперь одна вещь, которую я понял с composer 2.5, заключается в том, что он часто пытается как можно быстрее получить результат. И это означает, что он часто не улавливает всего. Итак, здесь я также скажу: «Потратьте столько времени, сколько потребуется на исследование и поиск проблем». Итак, я сейчас нажму Enter, и наш агент начнет работу и попытается найти все драматические проблемы и автоматически исправить их. И пока это работает, я также хочу быстро поговорить о моем рабочем процессе. Обычно, как упоминалось, я стараюсь масштабировать вещи до небольших, легко усваиваемых функций. И это рабочий процесс, который я затем использую в этом конкретном PR. Теперь навык написания PRD — это то, что я использую только один раз в начале, потому что как только у меня есть PRD, нет необходимости создавать еще один. Но как только это сделано, я использую все эти навыки для каждого PR. Навык grill me docs проверяет мой план. Навык Next.js разработчика помогает мне реализовать план. Навык дизайнера помогает мне улучшить UI. Навык deslop помогает мне удалить сгенерированный ИИ мусор. Навык React Doctor помогает мне исправить весь плохой код React. И навык ядерного обзора помогает мне протестировать структуру и убедиться, что все прочно. Я использую эти навыки каждый день в этом конкретном порядке, и этот рабочий процесс помогает мне быстро, безопасно и очень хорошо выпускать код.
Как вы видите здесь, наш агент теперь закончил, и вердикт не одобряет структурные регрессии. Затем, что еще у нас здесь? Упущенные драматические упрощения. О нет. Что еще? Дублирующаяся логика очистки в sample data. Это, конечно, не нужно. Спагетти-сложность ветвления. Вот почему мне нравится этот навык. Иногда вещи работают. Наше веб-приложение работает. Но это не означает, что код будет поддерживаемым в долгосрочной перспективе. Но этот навык помогает мне очистить фундамент, сделать его прочным и строить на нем. И да, это все. Что я бы сейчас сделал, это, конечно, сказал бы: «Эй, все это выглядит отлично для меня. Пожалуйста, исправь все проблемы». И да, конечно, обычно вы также захотите потратить немного больше времени на просмотр всего, что нашел агент, но в данном случае это не нужно. Но да, это все. Это мой семиступенчатый рабочий процесс. Вот как я кодирую каждый день и как мне удается опережать большинство инженеров и пять кодеров. Надеюсь, вам понравилось видео. Пожалуйста, не забудьте поставить лайк и подписаться. Это будет для меня очень много значит и для моего сердца. Так что, пожалуйста, сделайте это. Пожалуйста, не забудьте присоединиться к списку ожидания моего стартового комплекта SAS, который я выпущу через две недели. Но с этим покончено, наслаждайтесь своим днем и увидимся в следующем видео. Конец связи. Пока-пока.