А что указано в договоре - что под NDA , а что нет?

Например NDA может даже указывать что вы не имеет право никому говорить что вы работали над этими проектами.
В этом случае - конечно же нельзя выкладывать.

Или только "trade secrets" - тогда скрины скорее всего можно(хотя не гарант)... Но только после того как игра опубликована.

Или вы не имеете права выкладывать скрины разработки, но кто вам мешает, после того как игра опубликована - зайти как обычный клиент и сделать скрин основного экрана.

Итого: NDA разные, надо читать конкретно ваш. Проблема что содержимое NDA может быть под NDA :) В этом случае вы не можете его особо показывать (правда юристу можно, обычно :) ).

Что грозит - зависит от размера фирмы, и от того, насколько они захотят вас наказать.

Для чего лично вам использовать его - сложно сказать :)

Как его мы его используем:
1. динамика на странице, т.е. даже простое "если изменилось поле А то изменить поле Б" делается намного проще и быстрее чем на jquery/javascript
2. темлейтинг. Нужно вам например сделать удобный темплейт на JS - вы можете или сам движок придумывать. или использовать готовый. Vue - один из них.
3. Отображение данных с сервера. Опять же, можно генерировать весь хтмл на сервере, можно на клиенте. На сервере свои плюсы и минусы, на клиенте - свои.

Удобство VUE - что можно использовать на отдельных элементах отдельных страниц. Нет нужды полностью переходить на него для всех страниц.

Вот посмотрите примеры тут:
https://vuejs.org/v2/examples/hackernews.html

1. В России и в остальном мире - разное отношение к дизайну. Т.е. очень часто может быть что на компьютере верстальщика даже нет фотошопа :) Причина - цена лицензии.
2. Очень разные стили, мир идет к mobile-first, responsive и тд дизайну. В этом случае - фотошоп еще меньше нужен, а нужен инструмент, в котором ты сможешь подготовить макет, как дизайн выглядит в разных разрешениях.
3. задача Adobe XD немного другая чем Фотошопа. В фотошопе ты редактируешь картинку, и показываешь картинку. В XD ты можешь сделать полностью работающий (упрощённый) макет, чтобы проверить его в на разных разрешениях, устройствах и тд. Это дает возможность быстро прототипировать и проверять, насколько удобно будет пользоваться приложением, например на мобильных телефонах.
4. Adobe XD - не только веб, но и например телефоны, планшеты и тд. Т.е. можно проверять удобство работы например приложения на телефоне.

Бота для какого мессенджера? Вот это главный вопрос.

Slack - https://api.slack.com/bot-users
Facebook - https://messengerplatform.fb.com/
Viber - https://developers.viber.com/

Для многих остальных есть тоже.

Читаете документацию, изучаете и пишите.

1. xdebug. ежедневно, когда правлю баги. Как вы можете без неё жить ? :)
echo/var-dump/print_r ? Они же хуже, в разы,
xdebug ускоряет дебаггинг раз в 10

2. комиты напрямую через IDE, - git, svn
Почти не пользуюсь сторонними приложениями для этого.
Git так вообще очень удобно мержить, решать конфликты и тп.

3. терминал внутри IDE - очень удобно для запуска того же gulp, composer install, и тп

4. Авторефакторинг при переименовании классов, неймспайсов и тп.

5. Перемещение файлов.

Подумайте подругому:
Какие вы программы используете в работе ? И можно ли всё это объеденить в одной программе.

Например, я использую:
1. бразуер
2. SQL редактор (периодически)
3. Phpstorm

Если бы в шторме был удобный SQL редактор, то наверное я бы и его использовал :)