Они только что превратили Claude Code, Codex и Cursor в настоящего senior-разработчика.

Причём бесплатно.

Называется это Superpowers, и проект уже набрал 204 000 звёзд на GitHub.

Проблема агентных инструментов на достаточно крупных проектах всегда одна и та же:

- Они сразу лезут в код
- Отлаживают всё вслепую
- Игнорируют тесты
- А по мере роста проекта начинают галлюцинировать

Superpowers решает эту проблему, навязывая процесс работы senior-инженера:

→ Сначала брейншторминг, и только потом написание кода
→ Строгий TDD (Red → Green) без исключений — если теста нет, код удаляется
→ Параллельная работа через субагентов в изолированных Git worktree
→ Контекст остаётся под контролем даже во время многочасовой автономной работы

Теперь процесс выглядит не как:

Промпт → Код → Молиться

а как:

Brainstorm → Spec → Plan → TDD → Subagents → Review → Ship

Ни строчки кода до появления проходящих тестов.

Поддерживаются Claude Code, Codex, Cursor, Gemini CLI, OpenCode и Copilot CLI.

Полностью Open Source.

Лицензия MIT.

Теперь вам не нужно писать промпты вслепую.

Ваш агент работает как senior-разработчик.

@WebDev_Plus

Если хотите изучить Python, SQL или Machine Learning, у Kaggle есть бесплатные курсы с сертификатами.

Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта.

Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат.

Найти их можно на сайте Kaggle в разделе Learn.

https://www.kaggle.com/

@WebDev_Plus

Кто-то выложил в open source библиотеку со всеми тех-логотипами, которые вам когда-либо могли понадобиться — в виде чистых, оптимизированных SVG.

Называется developer-icons. Вот что в ней есть:
→ 200+ логотипов технологий (React, HTML, JS, Docker и другие) в виде полноценных компонентов
→ гибкая настройка размера, цвета и толщины stroke для каждой иконки
→ масштабирование под любое разрешение без потери качества
→ встроенные light/dark и wordmark-варианты
→ поддержка tree-shaking — в bundle попадут только импортированные иконки

Больше не нужно копаться в Figma-экспортах или вставлять случайные SVG, найденные на Stack Overflow.
npm i developer-icons — импортируете иконку, вставляете в JSX, и готово.
Полностью open source. Лицензия MIT. 2.1k звёзд.

@WebDev_Plus

#Laravel Tip

А вы знали, что Laravel понимает ваши связи между моделями и позволяет писать код намного чище 👇

@WebDev_Plus

Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFGrysSZ ИП Галактионов Тихон Витальевич, ИНН 771618975809

Сегодня узнал, что zsh умеет вызывать функцию для несуществующих команд. Поэтому если добавить это в .zshrc, можно буквально писать prompt’ы прямо в терминал:

command_not_found_handler() {
  codex "$*"
  return $?
}

Теперь любая неизвестная команда будет автоматически отправляться в Codex.
Это не очень хорошая идея.

@WebDev_Plus

Наконец-то это происходит

npm планирует по умолчанию блокировать postinstall-скрипты в одном из будущих релизов.
В ближайшее время (через поэтапный rollout) пользователи, скорее всего, начнут сначала получать предупреждения.

Ссылка на implementation PR для первой фазы: https://github.com/npm/cli/pull/9360

Ссылка на RFC с описанием всех связанных изменений и трёхфазного плана rollout’а:
https://github.com/npm/rfcs/pull/868

Сейчас смержена только Phase 1 для npm v11.16, А вот настоящее блокирование по умолчанию планируется уже в npm v12 (Phase 2), и PR для этого ещё только готовится.

@WebDev_Plus

Подготовьте свой сайт к взаимодействию с ИИ-агентами с помощью Lighthouse → https://goo.gle/3ReK3JD
Если вы хотите, чтобы ИИ-агенты действительно корректно работали с вашим сайтом, новый экспериментальный аудит в Lighthouse позволяет проверить:

- Обнаруживаемость сайта для ИИ-агентов
- Интеграцию с WebMCP

Доступность для ИИ-систем
#GoogleIO

@WebDev_Plus

Можно сделать sticky-navbar, который меняется при скролле, на чистом CSS — без JS и библиотек анимаций.

header {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .nav-bar {
    max-width: 56rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
  }
}

Теперь браузер сам понимает, когда sticky-элемент «прилип» к верхней границе, и всё срабатывает через один container query.
Пока доступно только в Chromium-браузерах — без Firefox и Safari, что, конечно, обидно.

@WebDev_Plus

Если хотите, чтобы Claude нормально делал вам слайды, не используйте Claude Design.

Используйте Reveal.js. - https://github.com/hakimel/reveal.js

Пусть Claude генерирует презентации как обычные HTML + Markdown-файлы.

Это намного приятнее:

→ слайды лежат в коде
→ их легко редактировать
→ можно хранить в Git
→ можно версионировать
→ можно быстро менять структуру
→ можно деплоить как обычную веб-страницу

Вместо того чтобы возиться с визуальным редактором, вы просто описываете, какую презентацию хотите получить, а Claude собирает её как фронтенд-проект.

Для разработчиков это ощущается естественнее.

Слайды становятся не «файлом презентации», а частью нормального рабочего процесса.

@WebDev_Plus

Открой X.

Выполни этот JavaScript в консоли браузера:

s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);

Наслаждайся.

@WebDev_Plus

npm install новый месяц

npm install возможности

Цитата с верой

@WebDev_Plus

Design Engineering Tip

Попробуйте делать textarea, которая растёт вместе с контентом, вместо вложенного скролла внутри поля.
Так пользователю проще писать длинный текст, а форму легче просматривать целиком.
CSS:

textarea {
  field-sizing: content;
}

Маленькая деталь, но UX сразу становится приятнее.

@WebDev_Plus

Кейс большой frontend-миграции от ВКонтакте. Команда перевела ключевые разделы vk.com на SPA. В итоге получили ускорение первой отрисовки страницы на 25% и ускорение среднего времени перехода между разделами в 3,5 раза.

Переход был плавным: снаружи все привычно, внутри — новая платформа

https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu

@WebDev_Plus

Мой набор JavaScript-библиотек, без которых уже сложно представить разработку:

🛡 zod → валидация схем и типобезопасная проверка данных
📅 date-fns → работа с датами без боли и лишнего веса
📊 tanstack-table → мощные и гибкие таблицы для React
🔐 better-auth → аутентификация пользователей без лишней возни
🎞 motion → анимации на JavaScript с современным API
🔤 fontsource → подключение веб-шрифтов прямо через npm
📈 chart.js → доступные и удобные HTML5-графики
🐻 zustand → простое глобальное управление состоянием
🖱 pragmatic-drag-and-drop → drag-and-drop от команды Atlassian
⌨️ hotkeys-js → горячие клавиши и клавиатурные шорткаты

@WebDev_Plus