PurpleSchool
Иконка канала PurpleSchool

PurpleSchool

512 подписчиков

32просмотра

Репозиторий SEO & GEO Skills содержит 20 готовых скиллов для полного цикла поискового продвижения. Внутри есть всё: исследование ключевых слов, анализ конкурентов, написание оптимизированного контента, технические аудиты, отслеживание позиций и проверка качества по фреймворкам CORE-EEAT (80 пунктов) и CITE (40 пунктов). ИИ-агент сам соберёт семантику, проверит домен, найдёт ошибки и предложит, что улучшить. Подходит для Claude Code, Codex, Gemini CLI, Cursor и ещё 35+ агентов. Больше полезных скиллов — ищи в полном видео по ссылке под шортсом. #seo #geo #contentoptimization #aiagents #aiskills #ai #ии #aidevelopment #seoskills #geoskills

20просмотров

pnpm — это быстрый и экономичный менеджер пакетов, альтернатива npm и yarn. Он сохраняет пакеты глобально и линкует их жёсткими ссылками, экономя место на диске. В одиннадцатой версии разработчики полностью переписали индекс пакетов: вместо миллионов JSON-файлов теперь используется единая SQLite-база данных — установки стали ещё быстрее. pnpm теперь требует Node.js 22+ и работает как pure ESM. Встроили нативную публикацию пакетов — больше не нужен npm CLI. Добавили защиту цепочки поставок: minimumReleaseAge включён по умолчанию — свежие пакеты не подтянутся, пока им не исполнится хотя бы день. Плюс глобальные установки теперь изолированы в виртуальное хранилище — никаких конфликтов между разными версиями пакетов. Отличный апдейт для тех, кто ценит скорость и безопасность. #devnews #pnpm #npm #nodejs #yarn #packagemanager #webdev #frontend

14просмотров

Репозиторий Frontend Slides — это скилл для ИИ-агента, который создаёт красивые HTML-презентации с анимацией. Вам не нужно описывать дизайн словами — агент сам генерирует визуальные превью стилей, а вы просто выбираете понравившийся. Внутри 12 готовых стилей: от минималистичного Swiss Modern до дерзкого Neon Cyber. Можно создать презентацию с нуля или конвертировать существующий PowerPoint — все изображения и текст сохранятся. На выходе — один HTML-файл без зависимостей, который работает где угодно. Совместим с Claude Code, Codex, Gemini CLI и другими агентами. Больше полезных скиллов — ищи в полном видео по ссылке под шортсом. #frontend #aipresentation #frontendslides #aiagents #aiskills #ai #ии #aidevelopment #html

21просмотр

Репозиторий GStack — это 23 готовых инструмента, которые превращают вашего ИИ-агента в целую команду. Внутри есть скиллы, которые закрывают роли CEO для стратегического планирования, QA для тестирования в реальном браузере, Release Engineer для автоматического деплоя, Design Engineer для вёрстки, Security Officer для аудита безопасности и многие другие. Агент перестаёт быть просто генератором кода и начинает работать как системный инженер с чёткими обязанностями. Совместим с Claude Code, Codex, Gemini CLI и другими агентами. Больше полезных скиллов — ищи в полном видео по ссылке под шортсом. #gstack #aiagents #aiskills #ai #ии #claude #codex #aidevelopment

18просмотров

Субагенты — это маленькие AI-помощники, которые делают конкретные задачи вместо того, чтобы один большой AI-agent пытался делать всё сразу. Зачем они нужны? Чтобы разгружать основного агента, ускорять работу и не перегружать контекст. Какие бывают субагенты? Те, которые проверяют код, тестируют, ревьюят, рефакторят, ищут баги, пишут документацию, генерируют компоненты. Преимущества: каждый субагент заточен под свою задачу, их можно запускать параллельно, они работают быстрее и дешевле, а главное — не засоряют контекст основного агента. Плюс субагенты сокращают расход токенов, потому что для них можно взять модель поменьше, например вместо Opus использовать Sonnet. Как мы используем субагентов в нашем пайплайне — смотрите в полном видео по ссылке под шортсом. #subagents #ии #ai #aiagents #linting #codereview #claude #aidevelopment

42просмотра

AI-кодинг — это мощно, но есть подводные камни. AI-код требует ревью, ему нельзя слепо доверять. Нужно использовать инкрементальный подход — никакого «сгенерируй мне всё сразу». Важно помнить про контекстное окно: ограничение по токенам никто не отменял, большой проект туда не впихнуть. Документация живёт с проектом и требует постоянной поддержки — если она устарела, AI будет врать. Нужен MCP, но у него есть ограничения: безопасность данных, латентность, и не все инструменты его поддерживают. Как мы обходим эти ограничения в нашем пайплайне — смотрите в полном видео по ссылке под шортсом. #ии #ai #aiagents #aidevelopment #vibecoding #aipipeline #aiprogramming #aicoding

31просмотр

Commit Skill учит ИИ-агента писать коммиты по стандарту Conventional Commits с описанием на русском языке. Скилл автоматически определяет нужный тип — feat, fix, refactor, docs, chore, style, test, perf, ci, build — и подходящий scope: backend, frontend или конкретный модуль вроде auth, transactions, categories. Вместо бессмысленных "update" и "fix" агент создаёт структурированные коммиты с маленькой буквы, без точки в конце, кратко и по существу. Скилл также умеет декомпозировать большие изменения на несколько логических коммитов. Совместим с Claude Code, Codex, Gemini CLI и другими агентами. Больше полезных скиллов — ищи в полном видео по ссылке под шортсом. #commit #aiagents #aiskills #ai #ии #claude #codex #aidevelopment #gitcommit

32просмотра

Это реальный вопрос с фронтенд-собеседования: как сделать интерактивный компонент доступным? В шортсе рассмотрим правильную разметку модального окна на примере. Для кнопки, открывающей модалку, используйте aria-haspopup="dialog", чтобы скринридер объявил, что кнопка открывает диалог. Само модальное окно — role="dialog" или role="alertdialog", aria-modal="true", чтобы фокус оставался внутри. Заголовок свяжите через aria-labelledby, описание — через aria-describedby. Атрибут title недостаточен для доступности, используйте aria-label для немых элементов без текста или описание через aria-labelledby. Фокус при открытии должен перемещаться в модалку, а при закрытии — возвращаться на кнопку. На собеседовании важно показать, что вы понимаете не просто ARIA, а сценарии использования с клавиатуры и скринридера. Полный разбор — в большом видео по ссылке под этим шортсом. #a11y #modalwindow #frontend #frontendinterview #middle #senior #techinterview #codinginterview

44просмотра

Репозиторий Superpowers содержит в себе набор скиллов для полного цикла работы над программным обеспечением. Внутри есть скиллы для отладки с чёткой четырёхфазной методологией, автоматического код-ревью с проверкой соответствия плану, TDD с циклом красный-зелёный-рефакторинг, написания детальных планов реализации, работы с git-worktrees для изолированных веток и так далее. Всё это превращает ИИ-агента из генератора кода в системного инженера, который ведёт проект от идеи до релиза. Совместим с Claude Code, Codex, Gemini CLI и другими агентами. Больше полезных скиллов — ищи в полном видео по ссылке под шортсом. #superpowers #aiagents #aiskills #ai #ии #tdd #codereview #debugging #claude #codex

47просмотров

Документация для AI отвечает на вопрос «что это за проект». Помимо глобального описания проекта, например в CLAUDE.md, нужно делать документацию по каждому модулю. В ней описывать: зачем нужен модуль, какой API предоставляет, что в нём находится, зачем он нужен пользователям и как они используют этот модуль. Это даёт AI-агенту дополнительный контекст и заметно улучшает качество кода. Что касается хранения — есть несколько техник. Можно складывать всё в папку docs. А можно создавать документацию рядом с каждым компонентом, в той же директории. Документация + скиллы дают AI полную картину: документация про «что делает проект и модули», скиллы про «как именно делать». Как мы организуем документацию в нашем пайплайне — смотрите в полном видео по ссылке под шортсом. #documentation #aicontext #ии #ai #aiagent #claudemd #claude #aipipeline

51просмотр

Lingui — это библиотека для интернационализации (i18n) JavaScript-приложений. Работает с React, Vue, Node.js и даже Astro со Svelte через плагины сообщества. В шестой версии разработчики полностью перешли на ESM, сократили размер node_modules на 44% и уменьшили количество зависимостей со 146 до 104. Появилась поддержка многопоточности в CLI — переводы извлекаются и компилируются быстрее. Добавили возможность именовать плейсхолдеры в JSX через атрибуты, теперь переводчики не путаются в цифрах. И главное — библиотека адаптировалась под AI-эру: появились llms.txt файлы для обучения нейросетей и Agent Skills для автодополнения кода в AI-ассистентах. Мощное обновление для тех, кто делает многоязычные проекты. #devnews #lingui #i18n #internationalization #react #esm #js #javascript

50просмотров

Скиллы — это рецепты для AI. Они объясняют, как делать ту или иную задачу: какую структуру компонента использовать, какие импорты ставить, как именовать файлы, какой стиль применять. Если документация отвечает на вопрос «что это за проект», то скиллы отвечают на вопрос «как именно делать». Скиллы есть везде — и в Claude Code, и в Codex, это стандартный механизм. Без скиллов AI хаотит и выдаёт каждый раз разный результат. Со скиллами — консистентный код, единый подход и меньше правок. Как скиллы встроены в наш AI-пайплайн — смотрите в полном видео по ссылке под шортсом. #skills #aiskills #ии #ai #aidesign #aiagent #claudecode #codex

51просмотр

keepsimple.io/uxcore — это бесплатная библиотека когнитивных искажений. Более 100 паттернов с примерами для продактов, дизайнеров, HR и маркетологов. Нужно понять, почему пользователи кликают не туда, почему сотрудники принимают странные решения или как убедить заказчика? Здесь собраны эвристики, ошибки мышления и способы их использовать в работе. Каждый принцип — с объяснением и конкретными кейсами. Никакой воды, только прикладная психология для IT. Сохраняйте в закладки — пригодится и для интерфейсов, и для презентаций. #devnews #ux #ui #productdesign #productmanagement #uxresearch #cognitivedistortions #webdev

54просмотра

Есть проект трекера расходов — API, пользователи, транзакции, категории. Но не хватает счетов. Даём Claude и Codex задачу: нужно реализовать счета, чтобы транзакции можно было привязывать к определённому счёту и переводить деньги с одного счёта на другой. В рамках задачи требуется сделать именно API изменения. Всё делаем в plan mode — сначала план, потом код. Смотрим, кто продумал логику грамотно, у кого API получился рабочим, и насколько модели справились с доработкой структуры. Полное сравнение Claude и ChatGPT — ссылка под шортсом! #claude #claudecode #chatgpt #codex #opus #ai #aicoding #aiassistant #ии #api

54просмотра

После того как Pencil + MCP помогли перевести макет в компоненты, остаётся другая проблема — AI выдаёт неконсистентный вывод. Каждый раз компоненты выглядят и работают по-разному. Решение — скиллы и качественная документация проекта. Скилл задаёт «рецепт»: как делать то или иное — структуру компонента, стили, импорты. А документация описывает, что это за проект: архитектура, слои, принятые соглашения. В итоге AI выдаёт единый стилевой подход, одинаковый макет даёт одинаковый результат, а итераций с дизайнером становится меньше. Как это настроить — в полном видео по ссылке под шортсом. #pencildev #aiskills #mcp #ии #ai #aidesign #ui #aiagent #claude #claudemd

5просмотров

Unhead — это библиотека для управления мета-тегами в заголовке документа. Она работает с React, Vue, Solid, Svelte и даже с ванильным JS. Раньше head-теги рендерились один раз и всё. А в третьей версии добавили стриминг для SSR. Теперь, когда страница грузится частями, новые title, meta и link пушатся в DOM по мере готовности — никаких задержек. Unhead также обзавёлся новыми плагинами: ValidatePlugin сам найдёт ошибки в мета-тегах, CanonicalPlugin сгенерирует канонические ссылки и почистит трекинговые параметры, а MinifyPlugin сожмёт инлайн-скрипты и стили. Плюс теперь есть один унифицированный Vite-плагин и DevTools для отладки head-состояния в браузере. Весь код переписан синхронно и стал легче на 11 процентов. #devnews #unhead #ssr #metatags #webdev #frontend #react #vue #js

1просмотр

Главное преимущество Pencil.dev перед Figma — архитектура. Pencil хранит всё в структурированном JSON, а не в бинарном формате, и заставляет мыслить флексами, а не абсолютными координатами. Макеты лежат в Git — понятная история изменений, кодревью, ветки. Через MCP AI-агент одновременно работает с Pencil, дизайн-системой токенов, вашим Git-репозиторием и API. В итоге макет доступен как структура, а у агента есть неограниченный доступ к данным. Именно это позволяет качественно переводить макет в компоненты без потери информации. Подробности — в полном видео по ссылке под шортсом. #pencildev #figma #ии #ai #aidesign #ui #uidesign #mcp #aiagent

9просмотров

XSS возникает, когда разработчик доверяет пользовательским данным. Уязвимый код: element.innerHTML = userInput или eval(userInput). Злоумышленник может вставить ﹤script﹥alert(1)﹤/script﹥ и украсть куки. Безопасный код: textContent вместо innerHTML, использование DOMPurify для очистки, избегание eval и new Function, экранирование данных на сервере и клиенте, CSP заголовки. Разница между уязвимым и безопасным кодом — это разделение между Junior и Middle разработчиком на собеседовании. Полный разбор — в большом видео по ссылке под этим шортсом. Подписывайтесь, чтобы не пропустить остальные вопросы. #xss #crosssitescripting #frontend #frontendinterview #middle #senior #techinterview #codinginterview

7просмотров

Pencil.dev — это как Figma, но с AI-подходом. И он решает сразу несколько проблем при создании макетов. Первая — это скорость. AI-дизайнер за 5-10 минут накидывает несколько вариантов макета, вы сравниваете, анализируете и выбираете оптимальный, прежде чем делать финальный. Никакого ручного переноса, никаких часов на перерисовку. И всё это удобно работает с обычным Claude или Codex, которые легко подключаются к Pencil. Какие ещё задачи закрывает Pencil — смотрите в полном видео по ссылке под шортсом. #pencildev #ии #ai #aidesign #ui #uidesign #frontend #design

4просмотра

Rspack — это сборщик на Rust, совместимый с экосистемой webpack. Он создан для того, чтобы дать ту же гибкость, но с дикой скоростью. И вот вышла вторая мажорная версия. Производительность выросла: прирост до 100% относительно 1.0, а в режиме с кешем сборка ускорилась в 4 раза. Добавили tree shaking для Module Federation — теперь общие зависимости обрезаются на уровне экспортов. Экспериментально завезли поддержку React Server Components. Починили работу с import.meta — теперь неизвестные свойства не заменяются на undefined, а сохраняются как есть, плюс добавили поддержку import.meta.main, filename и dirname. Также завезли import defer — можно сначала загрузить модуль, а выполнить позже, удобно для контроля сайд-эффектов. Количество загрузок выросло с 10 до 500 тысяч в неделю. Rspack 2 — уже не просто альтернатива, а полноценный зверь. #devnews #rspack #rust #webpack #bundler #webdev #js