archelon

<details>
   <summary>Спойлер</summary>
   <p>Текст</p>
</details>

Скорее всего есть элементарные готовые решения

Готовые решения бывают для часто используемых, но долго реализуемых вещей. Там где много кода. В Вашем случае это две строчки кода и упростить их уже не куда, так что вряд ли есть решения.
Учите jquery, вот Вам готовое решение:

$('.somebtn').on('click',function(){
  var firstinput =  parseInt($('.firstinput').val());
  var secondinput =  parseInt($('.secondinput').val());  
  $('.someresult').text(firstinput + secondinput);
});

https://jsfiddle.net/yrmrh0a1/
Что тут упростить?

CSS никак.
jQuery - https://jsfiddle.net/w3xfe3pk/

Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.

1) Когда смотришь на макет, то не должно быть вопросов "как это сверстать", а только несколько вариантов на самый сложный элемент.
2) Скорость. Если будет выбор - то выберут кто быстрее.
3) Умение тестировать. Надо уметь ловить баги во всех браузерах и устройствах самому. А не "на проверяй" руководителю, когда исправил код, а как отображается не посмотрел даже.

Эти 3 пункта считаю важнее, чем стек технологий, которыми владеешь.

Youtube -- очень дешево и очень сердито, многие курсы уже полностью выложены

transition: top 1s 5s; /* длительность анимации 1сек, задержка ПЕРЕД анимацией 5сек */

Кроссбразерный это значит что в каком бы браузере Opera,Mozila, Safari.... я бы не открыл твой сайт, он везде должен отображаться одинаково корректно без съежания и т.п.
Адаптивный это значит что на любом устройстве, с любым разрешением я мог открыть твой сайт и он подстаивался под разрешение моего устройства, типа скрывались огромные меню, допустим колонок статей на моем планшеты было 2, а не 4 как на моем фулл хд мониторе, шрифты подгонялись под размер и были читабельными. Крч гуглом учись пользоваться

Не единственное. Как правило, используют layout или html coding, реже - makeup или markup.

выбор CSS-фреймворка лежит на мне как на дизайнере... Просто у каждого CSS-фреймворка свои библиотеки, компоненты, виджеты и т.д...

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

Или же мне вообще срать на все это и делать в стиле "я дизайнер - я творю, а как это сверстают меня не волнует?"

Вы - дизайнер (я надеюсь, что хороший, или по крайней мере стремитесь им стать). Соответственно вы лучше остальных членов команды понимаете как что должно выглядеть. Если вы на макете одинаковые элементы делаете одинаковыми, а не "на глазок, плюс-минус пара пикселей" с требованием верстать pixel-perfect, и к этому прикладываете стайлгайд - все будет хорошо. Вообще стайлгайд - очень полезная вещь, особенно в долгоживущих проектах. И плюсик в карму дизайнеру. Главное - не зазнавайтесь: если хороший верстальщик говорит, что вы где-то что-то ляпнули - проверьте, может и правда ляпнули. Если вы единственный дизайнер на проекте - вас кроме верстальщика проверять обычно некому.

Псевдо-официально:
НДФЛ 13%
Пенсия 22%
Медицина 5,1%
Соцстрах 2,9%
= 43%
+ прибыль самой компании
Итого минимум половину денег будете отдавать просто так.

ИП:
регистрация 800 руб + 28 тыс руб/год + 1% (свыше 300 тыс. руб./год) + УСН 6%

ООО:
регистрация 4 тыс + уставной капитал 10 тыс. + УСН 6% + НДФЛ 9%