Должны ли все Frontend-разработчики знать всё это?

Картинка чисто схематическая. Часть фреймворков не пригодится, а некоторые блоки в процессе изучения раздуются до размеров 20-30 подблоков. А так в принципе верно.

Безусловно надо знать актуальные версии JS + HTML + CSS.
Всё остальное изучается по мере надобности.

Сама эта картинка - просто понапихали все названия и аббревиатуры, которые смогли вспомнить - лишь бы побольше на страницу впихнуть.

Не всё. Выборочно. Например, знать все фреймворки не обязательно, пока ты используешь один из них.

50x50

Много устаревшего и справа вообще набор CSS хлама так расписан, как будто ты половину времени будешь это изучать, вторую половину JS, но это не так.
В левой стороне многое устарело и некоторых вещей не хватает, тайпскрипт вообще малюсенький, а ему надо времени немало уделить. Картинку можно обрезать вот так, зеленое это надо выбрать что-то одно, но можно и все

Зависит от уровня фронтенд-разработчика, и актуальная мапа здесь: https://roadmap.sh/frontend

Нет, это обобщенная картина, все это знать невозможно. В реальности используются основные технологии. Html,css, js, и один фреймворк/библиотека. Те же препроцессоры css нужно знать верстальщику, в таблице указаны все возможные фреймворки/библиотеки, естественно всеми одновременно пользоваться нет необходимости и знать соответственно тоже. Ну а если реально существует работа, требующая всех указанных в таблице навыков, она будет стоить столько, что ни одна контора в рф себе позволить не сможет

нет. развод инфоцыган на курсы