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

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

Уже писал несколько раз про популярное сейчас увлечение. Сделал наш сайт: digital30.ru, несколько лендингов для друзей, делаю крупный проект для жены и ее школы химических знаний - большой образовательный проектchemika.ru, еще делаю для моего совместного с братом второго бизнеса по лабораторному оборудованию (это очень специализированный ресурс, но как нибудь покажу, что получается, и думаю уже скоро презентую новую (и я надеюсь намного лучше, чем та интеграция которую мы используем сейчас) систему аренды фототехники.

Сразу скажу, вся подборка - на мой собственный вкус - именно то, что я использую в своих проектах. Уверен, что у кого-то будут другое видение, а профессиональные разработчики вообще захейтят и скажут что это все детский сад. Но я их использую в каждом проекте и мне они здорово помогают и поэтому делюсь с вами. А любые новые идеи и предложения - приветствуются.

Все навыки устанавливай глобально. Но используй осмысленно и только там, где они действительно помогают задаче.
Можно сразу использовать в качестве промпта настройки проекта.

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

Impeccable - основной дизайн-навык. Используй его для проектирования визуальной системы темы: композиции, типографики, цветов, отступов, компонентов, состояний и общей логики интерфейса.
После работы с Impeccable обязательно проведи финальную проверку через Web Design Guidelines - на читаемость, доступность, консистентность, UX-паттерны и типичные ошибки веб-интерфейсов.

Playwright — обязательно проверь готовую страницу в реальном браузере. Протестируй основные пользовательские сценарии, интерактивные состояния, формы, навигацию и адаптивность на разных размерах экрана.

Chrome DevTools MCP - используй для точечной диагностики: web debugging, проверки DOM/CSS, layout-проблем, console/network ошибок, производительности и странного поведения интерфейса (я почти никогда не использую).

Code Simplifier - запускай только после завершения функциональной реализации. Сначала добейся корректной работы, затем упрощай структуру и убирай лишнюю сложность. Не рефактори код после каждого небольшого изменения. Но после крупных изменений применяю в обязательном порядке.

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

Emil Kowalski animate/review - подключай только если в теме действительно появляется содержательная анимация. Навык должен помогать понимать переход, изменение свойства или состояние интерфейса, а не использоваться как декоративный эффект.

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

Sentry / Supabase / Vercel MCP - используй только если текущий проект действительно работает с соответствующим сервисом и задача требует обращения к нему: диагностики ошибок, работы с данными, деплоем, логами или инфраструктурой. Редкий навык, почти никогда не применяется )