Какие требования обычно специфицируются для фронтенд-разработки?

А, ну, вот это уже ближе к делу, блядь! Требования к фронту — это не просто «сделай красиво», а целая ебучья инструкция, как не облажаться и не получить в итоге говно, а не интерфейс. Слушай, разложу по полочкам, как есть.

На что смотреть, чтобы не вышло говно:

1. Функционалка, или «Что эта хуйня должна делать?» Тут всё просто, как три копейки. Нажал кнопку — должно произойти ровно то, что ожидается. Не «ой, а я думал, она другое сделает», а конкретика, блядь.

   • Поведение: Эта кнопка отправляет форму, эта — открывает модалку, а эта — сворачивает боковое меню. Никаких «а может, она так сделает?».
   • Работа с данными: Тыкнул «сохранить» — фронт должен не просто послать запрос куда-то в задницу, а ещё и показать: «Идёт сохранение, не дёргайся», потом «Всё, сука, окей!» или «Ой, бля, ошибка, вот такая».

     // Вот смотри, пример. Поле для почты.
     // Оно должно быть не просто дырой для ввода текста, а умным, блядь:
     // 1. Если ввёл "ya.ru" — это не почта, ёпта.
     // 2. Если накосячил — поле сразу краснеет, как морда пьяного.
     // 3. И чтоб сверху или снизу чётко написало: "Э, дружок, это не email. Где собака (@)?"
     // Вот это требование. А не "ну, чтоб валидировалось как-то".

2. Верстка и внешка, или «На что это должно быть похоже?» Тут дизайнеры обычно такие: «У меня тут в Фигме отступ 8 пикселей, а не 7!». И они, сука, правы.

   • Pixel-perfect: Значит, берёшь макет и делаешь один в один. Шрифт, цвет, тень, расстояние между буквами — всё, блядь. Не «примерно так». А то получится кривой косой говнокомпонент.
   • Адаптив: На компе — одна картинка, на телефоне — всё должно красиво сжаться, а не налезать друг на друга, как пьяные в маршрутке. Чёткие контрольные точки (breakpoints) — закон.
   • Анимации: Если кнопка при наведении должна плавно менять цвет за 200 миллисекунд с каким-нибудь ease-out — значит, так и делай. Не «ну, как-то плавненько». Это не плавненько, это раздолбайство.

3. Доступность (a11y), или «А если человек слепой или просто любит клавиатуру?» Вот это, блядь, многие просёкивают, а потом получают пизды от аудиторов или просто от совести. Интерфейс — он для всех, а не только для здоровых парней с мышкой.

   • Семантика: Не делай кнопку из <div>! Это <button>, ёпта! Навигация — <nav>. Это не прихоть, это чтобы скринридеры не охуели.
   • ARIA: Если у тебя какая-то хитрая, блядь, кастомная кнопка-выпадашка, надо ей подсказать, кто она такая, с помощью aria-label или aria-expanded. Без этого — тёмный лес.
   • Клавиатура: По сайту должны можно пройтись табом. Фокус должен быть виден. Нажал Enter на кнопке — сработало. Без этого — ты просто мудак.
   • Стандарты (WCAG): Есть такие документы, не просто так придуманные. Уровень AA — это как минимум. Контрастность цветов, чтобы дальтоник не плакал, размер текста и прочая хуйня.

4. Нефункциональщина, или «А как оно будет работать, когда пользователей будет овердохуища?» Красиво — это хорошо, но если страница грузится полминуты, то всем будет похуй на твои анимации.

   • Скорость: Эти ваши Core Web Vitals — не просто цифры. LCP (самая большая картинка или текст) — меньше 2.5 секунд. CLS (чтобы контент не прыгал) — почти ноль. Иначе Гугл тебя опустит в поиске, и будут правы.
   • Браузеры: Должно работать в Хроме, Фаерфоксе, Сафари и даже в этом новом Эдже. Не «ой, а в Сафари чёт криво». Значит, допиливай, пока не будет везде.
   • Безопасность: Выводишь что-то от пользователя на страницу? Экранируй, сука, символы! Чтобы какой-нибудь умник не вставил тебе <script>alert('лох')</script> и не устроил XSS. Это позор на всю деревню.

5. Состояния, или «А что, если нихуя не пришло?» Реальность — она сурова. Сервер может лежать, данные могут быть пустыми.

   • Загрузка: Пока данные летят, покажи скелетон или спиннер. Чтобы пользователь не думал, что всё сломалось.
   • Пустота: Если в списке товаров ноль — не оставляй просто белое поле. Напиши «Здесь пока пусто» или «Ничего не найдено». С картинкой, блядь.
   • Ошибка: Сеть пропала? Не «undefined», а человеческое «Не удалось загрузить данные. Проверьте интернет». И кнопка «Повторить».

Вот, собственно, и вся магия. Если всё это учесть — будет не просто «работающая хрень», а годный, блядь, продукт. А если халтурить — получится пиздопроёбина, которую и самому потом стыдно будет показывать.