Imported from imMeeto/midi-skills (
skills/cp-web/SKILL.md). Install upstream withnpx skills add imMeeto/midi-skills --skill cp-web. Copyright stays with the author.
name: cp-web description: Отвечает за техническую сторону сайта или лендинга: на чём собирать, где хостить, как не нарваться на требования по персональным данным, как ускорить и как принять работу у подрядчика. Даёт честную развилку «конструктор против кода» с признаками, по которым конструктор перестаёт справляться, обязательный технический минимум сайта в России, чек-лист безопасности и приёмки с технической и правовой частью, разбор того, что реально влияет на скорость — изображения, шрифты, сторонние скрипты. Текст страницы, структуру блоков и конверсию пишет cp-landing, семантику и позиции ведёт cp-seo, здесь только инженерная часть и приёмка. Use when the user needs to build a website, choose a stack or hosting, speed up a page, or accept work from a web contractor. Триггеры — «сделать сайт», «на чём собрать сайт», «конструктор или код», «где хостить», «сайт тормозит», «Core Web Vitals», «INP», «принять сайт у подрядчика», «техзадание на сайт», «кому принадлежит домен».
cp-web · Сайт технически
Скилл отвечает на четыре вопроса: на чём собрать, где разместить, как не нарушить, как принять работу. Про то, что написано на странице, — не сюда.
Самая дорогая ошибка в вебе для контентного проекта — не выбор фреймворка, а потерянные доступы и сайт, оформленный на подрядчика. Поэтому приёмка здесь — полноценный блок, а не приписка в конце.
Когда не этот скилл
- Нужен текст и структура посадочной страницы, первый экран, отработка возражений, форма →
cp-landing. Здесь — как это разместить и не сломать. - Нужны позиции, семантика, robots.txt под поисковых роботов, Clean-param →
cp-seo. Здесь — как исправить то, что техаудит нашёл. - Нужны строки robots.txt для ИИ-краулеров →
cp-geo. - Нужен правовой вердикт по конкретной ситуации — уведомление РКН, состав согласий, штрафы →
cp-compliance. Нужны интеграции и передача данных между сервисами →cp-automation.
Контекст
Читай из context/: 09-tech-ru.md §4 (технические требования и пороги), §5 (хостинг, локализация, связь с индексом скорости), §2 (Метрика и Вебмастер); 03-legal-ru.md §7 (персональные данные) и §9 (шрифты и лицензии); 06-design.md (шрифты с нормальной кириллицей, контраст); 07-evidence.md. Профиль бренда — brands/<slug>/: assets.md (домен, хостинг, счётчики, палитра, шрифты), offer.md (что продаётся — от этого зависит, нужны ли оплата и личный кабинет), rules.md (кто согласовывает). Не нашлось — скажи одной строкой и работай по врезке ниже, факты спрашивай, не выдумывай.
Врезка констант
Обязательный минимум любого сайта в РФ, собирающего контакты. Хостинг на территории РФ; HTTPS; мобильная версия; приемлемая скорость; robots.txt с Clean-param для Яндекса и sitemap.xml; счётчик Метрики с настроенными целями; политика обработки персональных данных со ссылкой рядом с каждой формой; раздельные согласия на обработку и на рассылку без преднажатых галочек.
Хостинг в РФ — требование регуляторное, не SEO. По ч. 5 ст. 18 152-ФЗ оператор обязан вести запись, систематизацию, накопление, хранение, уточнение и извлечение персональных данных граждан РФ в базах на территории РФ. Побочный эффект приятный: российский хостинг и CDN улучшают индекс скорости Яндекса, который меряется по переходам российских пользователей. Размещение данных на российском хостинге, доступном мировой аудитории, трансграничной передачей само по себе не считается.
Core Web Vitals официально используются системами ранжирования Google (уровень A). Оговорка из документации: поиск стремится показать наиболее релевантный контент, даже если опыт страницы неидеален.
INP заменил FID. Пороги: хорошо — ≤200 мс, требует улучшения — 200–500 мс, плохо — >500 мс. INP меряет все взаимодействия за визит, FID мерил только первое.
Индекс скорости Яндекса считается по обезличенным данным переходов из выдачи в браузере Яндекса, пятибалльная шкала, пороги не раскрыты. Расхождение с внешними измерителями — норма: они меряют разное на разной аудитории.
Шрифты. Ставить локально, не подключать с внешнего CDN. Кириллица: Golos Text, IBM Plex Sans и другие с полноценным кириллическим начертанием. Inter не использовать. Лицензию проверять по типу — desktop / web / app: web-лицензия нужна отдельно, и это самая частая незамеченная утечка прав.
Вход
Одним блоком.
- Что за сайт: одна посадочная, многостраничник, блог, магазин, сервис с личным кабинетом.
- Что он должен уметь: собирать заявки, принимать оплату, выдавать материалы, вести запись, интегрироваться с CRM.
- Собираются ли персональные данные — имя, телефон, почта, файлы. Это переключатель половины требований.
- Кто будет вести сайт после запуска: сам владелец, штатный человек, подрядчик, никто.
- Бюджет и срок — порядок величин, без точных цифр.
- Что уже есть: домен, хостинг, дизайн, тексты, счётчики. На кого оформлены домен и хостинг.
- Ожидаемая нагрузка: десятки визитов в день или всплески от рекламы и посевов.
Процесс
- Выясни, собираются ли персональные данные. Это первый вопрос, а не последний: от него зависят хостинг, согласия и половина требований. Есть формы — правовой блок обязателен.
- Пройди развилку «конструктор против кода» по признакам задачи, а не по вкусу. Отдельно ответь, кто ведёт сайт после запуска.
- Выбери инфраструктуру: хостинг (РФ или нет и почему), домен, почта, DNS. Домен и хостинг оформляются на заказчика — проверь это до начала работ, а не при передаче.
- Собери или поставь задачу подрядчику — состав требований берётся из блока «Обязательный минимум», текст страницы приходит из
cp-landing, технические требования поиска — изcp-seo. - Пройди чек-лист запуска целиком, каждый пункт проверкой, а не декларацией.
- Измерь производительность и зафиксируй значения с датой — иначе через месяц не с чем сравнивать.
- Пройди чек-лист безопасности и заполни реестр доступов.
- Закрой правовой контур и передай спорное в
cp-compliance. - Прими работу по списку приёмки, если делал подрядчик. Значения скорости, тестовая заявка и восстановленная резервная копия — до подписания, не после.
Развилка · конструктор против кода
Честный ответ: для большинства контентных и услуговых проектов конструктора достаточно, и убеждать в обратном — вредительство. Проблема начинается там, где задача выходит за его границы.
| Признак задачи | Конструктор | Код или CMS |
|---|---|---|
| Посадочная, сайт-визитка, блог, портфолио | да | избыточно |
| Формы заявок, интеграция с почтой и мессенджером | да | — |
| Приём оплаты через встроенную интеграцию платёжного сервиса | обычно да, проверять список интеграций | — |
| Личные кабинеты, роли, доступ к контенту по подписке | нет | да |
| Нестандартная логика оплаты: рассрочка, подписки, частичная оплата, свой расчёт | нет | да |
| Интеграции с чем угодно за пределами готового списка | нет | да |
| Хранение персональных данных под собственным контролем | зависит от того, где физически лежит база — выяснять до старта | да |
| Высокая или всплесковая нагрузка, тяжёлые страницы | ограничения тарифа — проверять | да |
| Тонкая работа со скоростью и разметкой | ограничена шаблоном | да |
| Экспорт и переезд без потерь | обычно затруднён — проверять до старта | да |
Правило выбора. Считай не «что мощнее», а кто будет это поддерживать через год. Сайт на коде без человека, который его ведёт, устаревает и падает быстрее, чем конструктор.
Три вопроса, которые задаются конструктору до начала работы, а не после:
- Где физически хранятся данные форм — на территории РФ или нет.
- Можно ли выгрузить сайт и базу целиком, если решишь уйти.
- Оплата сервиса проходит российской картой сейчас и без посредников.
Промежуточный путь: CMS на своём хостинге. Дороже конструктора в поддержке, дешевле разработки с нуля, данные под контролем. Требует обновлений — заброшенная CMS с дырами хуже конструктора.
Обязательный минимум · чек-лист запуска
| Пункт | Как проверить |
|---|---|
| Хостинг в РФ, если собираются персональные данные | договор и физическое расположение серверов, а не «мы российская компания» |
| HTTPS на всех страницах, http редиректит на https | открыть сайт по http, посмотреть на редирект и на предупреждения браузера |
| Один канонический хост: www или без www, слэш на конце — одна версия | четыре варианта URL руками, все ведут в одну версию |
| Мобильная версия | реальный телефон, не эмулятор: формы, меню, кнопки, размер шрифта |
| Скорость и CWV | блок ниже |
robots.txt с Clean-param для Яндекса и указанием sitemap |
анализатор robots.txt в Вебмастере на конкретных URL. Подготовка файла → cp-seo, ИИ-краулеры → cp-geo |
| sitemap.xml отдаётся, в нём только канонические 200-е URL | открыть файл, ткнуть в случайные адреса |
| Метрика с целями | цель на отправку формы, а не только на визит. Проверять отправкой тестовой заявки |
| Политика обработки персональных данных | опубликована по постоянной ссылке, ссылка рядом с каждой формой |
| Раздельные согласия | две галочки: обработка и рассылка. Ни одной преднажатой |
| Формы реально доходят | тестовая заявка с чужого устройства: пришла ли, куда, кому, попала ли в базу |
| Страница 404 | существующая, с навигацией, отдаёт код 404, а не 200 |
| Резервные копии настроены | восстановить копию на тестовой площадке, а не поверить в наличие |
Производительность
Мерить: CWV по полевым данным (реальные пользователи) для Google и индекс скорости в Вебмастере для Яндекса. Лабораторный прогон показывает, что чинить, но нормой не является.
Что реально влияет — в порядке частоты.
1. Изображения. Обычно первая причина медленной страницы. Отдавать в современных форматах, в нескольких размерах под разные экраны, с явными width и height (иначе вёрстка прыгает), с ленивой загрузкой всего, что ниже первого экрана. Картинка первого экрана — наоборот, грузится приоритетно.
2. Шрифты. Локально, не с внешнего CDN. Три причины: скорость (нет лишнего соединения к чужому домену), надёжность (недоступный CDN = страница без шрифта), правовая (лицензия web проверяется отдельно). Формат woff2, поднабор под кириллицу и латиницу, font-display: swap, не больше двух семейств и минимум начертаний. Подключение шрифта с внешнего CDN — типовая находка при приёмке.
3. Сторонние скрипты. Виджеты чатов, пиксели, счётчики, всплывающие окна, карты. Главный источник плохого INP: каждый вешает свои обработчики в основной поток. Правило: каждый скрипт на странице должен иметь названного владельца и причину. Нет причины — снять. Что осталось — грузить отложенно и не в первом экране.
4. Всё остальное: лишний CSS и JS из шаблона, отсутствие сжатия и кеширования, тяжёлые анимации, встроенные видео вместо превью-заглушки.
INP лечится не «оптимизацией картинок», а работой с тем, что выполняется в ответ на клик. Если тяжёлый обработчик висит на кнопке отправки формы — картинки не помогут.
Безопасность · проверяемый чек-лист
| Пункт | Как это выглядит правильно |
|---|---|
| Секреты не в открытом коде | ключи API, токены, пароли базы — в переменных окружения или хранилище секретов. Не в репозитории, не в теме оформления, не в публичном JS. Утёкший ключ считается скомпрометированным — меняется, а не «прячется» |
| Права по минимуму | у каждого — только нужный доступ. Один общий пароль администратора на всех участников недопустим |
| Отдельные учётные записи | у подрядчика своя, у копирайтера своя. Ушёл человек — отозвали доступ, а не сменили общий пароль |
| Резервные копии | автоматические, хранятся отдельно от боевого сервера, проверены восстановлением. Непроверенная копия — не копия |
| Защита форм от спама | капча или скрытое поле-ловушка плюс ограничение частоты отправок с одного адреса. Без этого база забивается мусором за неделю после первой рекламы |
| Обновления | CMS, плагины, шаблоны обновляются. Заброшенный плагин с уязвимостью — типовая точка взлома |
| Домен оформлен на заказчика | владелец домена в реестре — заказчик, не студия и не «Вася, который делал». Продление — на календаре с напоминанием |
| Хостинг оформлен на заказчика | договор и оплата от заказчика. Аккаунт подрядчика — потеря сайта при конфликте |
| Реестр доступов | один документ: где домен, где DNS, где хостинг, где репозиторий, где счётчики, где почта, у кого какие права |
Приёмка сайта у подрядчика
Универсальный инструмент. Принимается не «красиво или нет», а по списку. Всё, что не проверено при приёмке, чинится потом за свои деньги.
Техническая часть.
- Сайт открывается по https, http редиректит, один канонический хост.
- Мобильная версия проверена на реальном телефоне: формы, меню, кнопки.
- Формы отправляются и доходят — тестовая заявка с чужого устройства, известно, куда она попала.
- Метрика стоит, цели настроены и срабатывают на тестовой заявке.
- robots.txt и sitemap.xml на месте и не режут нужное.
- Скорость измерена, значения зафиксированы в акте — иначе через месяц не докажешь, что стало хуже.
- Страница 404 отдаёт код 404.
- Изображения оптимизированы, шрифты локальные, лишних сторонних скриптов нет.
- Резервная копия сделана и восстановлена на тестовой площадке при тебе.
- Исходники и доступы переданы: репозиторий или архив, база, панель хостинга, DNS.
Правовая часть. 11. Домен зарегистрирован на заказчика. 12. Хостинг оформлен на заказчика, оплата с его стороны. 13. Хостинг на территории РФ, если есть формы сбора контактов. 14. Политика обработки персональных данных опубликована, ссылка рядом с каждой формой. 15. Согласия раздельные, преднажатых галочек нет. 16. Права на дизайн, тексты и изображения переданы или лицензированы — письменно, с указанием объёма. 17. Шрифты лицензированы под web-использование. Проверяется отдельно, это самая частая незамеченная утечка прав. 18. Использованные изображения и иконки имеют законное основание: стоковая лицензия, CC с соблюдением условий, собственная съёмка. 19. Уведомление в РКН подано до начала сбора данных (обязанность заказчика, не подрядчика, — но проверить надо до запуска).
Организационная часть. 20. Написано, кто ведёт сайт дальше и что входит в поддержку. 21. Известно, что делать при падении и к кому идти. 22. Реестр доступов заполнен и лежит у заказчика.
Правовое
Информация на 04.08.2026, не юридическая консультация; применимость определяет юрист. Спорные и меняющиеся места — через cp-compliance.
Сайт с формой — это обработка персональных данных. Не «просто заявки»: имя, телефон, почта становятся персональными данными в момент, когда попадают в базу.
| Обязанность | Что это значит для сайта |
|---|---|
| Уведомление в РКН до начала обработки (ст. 22 152-ФЗ) | подаётся до запуска формы. Исключения по пп. 1–6 ч. 2 ст. 22 утратили силу с 01.09.2022 — практически обязано почти любое лицо, собирающее контакты |
| Политика обработки (ч. 2 ст. 18.1) | опубликована, прямая ссылка с каждой страницы сбора |
| Согласие (ст. 9) | конкретное, информированное, сознательное: раздельные галочки на обработку и на рекламные рассылки, ничего не предвыбрано |
| Локализация базы в РФ (ч. 5 ст. 18) | зарубежный CRM, рассыльщик или форма без первичной российской базы — нарушение |
| Трансграничная передача (ст. 12) | отдельное уведомление до начала передачи |
| Утечка (ч. 3.1 ст. 21) | два уведомления в РКН: 24 часа с момента выявления и 72 часа — результаты расследования. Продления нет, выходные срок не приостанавливают. Отвечает оператор, даже если инцидент у подрядчика |
Практическое следствие: зарубежная аналитика и зарубежные рассыльщики, собирающие данные напрямую с формы, не закладываются. Первичная база — российская, дальше по необходимости и с оформленными основаниями.
Размеры штрафов из памяти не называются: они менялись в 2024–2025 и во вторичных источниках расходятся. Нужна сумма — сверять с действующим текстом КоАП на дату.
Выход
ПРОЕКТ: <домен> · тип <посадочная / многостраничник / блог / магазин / сервис>
СОБИРАЕТ ПДн: <да / нет> ← переключатель половины требований
РЕШЕНИЕ ПО СТЕКУ
<конструктор / CMS / код> — потому что <признак из развилки>
границы: что этот путь не сможет — <перечень>
кто ведёт после запуска: <кто>
ИНФРАСТРУКТУРА
хостинг: <где, РФ или нет, почему>
домен и хостинг оформлены на: <кто>
почта, DNS, репозиторий: <где>
МИНИМУМ ЗАПУСКА
<чек-лист с отметками: готово / нет / не применимо>
ПРОИЗВОДИТЕЛЬНОСТЬ
измерено: <CWV полевые, индекс скорости Вебмастера, дата>
что чинить: <по приоритету — изображения / шрифты / сторонние скрипты>
БЕЗОПАСНОСТЬ
<чек-лист с отметками>
ПРАВОВОЕ
<что есть, чего нет, что нельзя сделать задним числом> → cp-compliance
ПРИЁМКА (если работу делает подрядчик)
<22 пункта с отметками, значения скорости зафиксированы>
Чек-лист перед выдачей
- Ответ на «собираются ли персональные данные» получен — от него зависят хостинг и половина требований.
- Развилка «конструктор против кода» разобрана по признакам задачи, а не по вкусу.
- Названо, кто ведёт сайт после запуска.
- Хостинг в РФ обоснован как правовое требование, а не как SEO-приём.
- Пороги INP приведены с пометкой уровня A, расхождение измерителей объяснено.
- Шрифты локальные, кириллица нормальная, Inter не предложен, лицензия упомянута.
- Про формы сказано, что их проверяют отправкой тестовой заявки с чужого устройства.
- Домен и хостинг оформлены на заказчика — пункт есть в явном виде.
- Резервные копии проверены восстановлением, а не «настроены».
- Правовой блок подан как информация с датой и со ссылкой на
cp-compliance.
Красные линии
- Не размещать базу с персональными данными граждан РФ за пределами РФ и не советовать этого ради удобства.
- Не давать инструкций по обходу блокировок и по обходу требований закона.
- Не запускать сбор контактов без уведомления РКН, опубликованной политики и раздельных согласий.
- Не оформлять домен и хостинг на подрядчика. Никогда, ни при каких договорённостях.
- Не хранить секреты в коде и репозитории. Утёкший ключ меняется, а не прячется.
- Не обещать конкретных значений скорости и позиций после доработок.
- Не называть сумм штрафов и цен сервисов из памяти — только после сверки на дату.
- Не принимать работу без тестовой заявки, проверенного восстановления копии и переданных доступов.
- Не ставить шрифты с внешнего CDN и не использовать шрифты без проверенной web-лицензии.