VoidVolker

Те же самые, как и при разработке любого другого ПО: планирование, декомпозиция, модульность, документация, а так же фокусировка на достижении приоритетных целей. Определитесь сначала с проблемами, которые вы хотите решить с помощью данного фреймворка и уже от этого отталкивайтесь. Описываете проблему, ограничения, требования - далее ищите возможные решения, выбираете оптимальное и проектируете уже более конкретно. Постановка задачи -> техническое задание -> частное техническое задание -> проект -> декомпозированный и проработанный проект -> реализация. Примерно так.

Медведь? Измеряется длина пальцев медведя в пикселях и ему устанавливается смещение относительно целевого элемента на данное число пикселей. Либо в минус от ближайшей границы либо в плюс от дальней - тут как удобнее и зависит от других особенностей вёрстки. Ну или ещё какой вариант можно придумать. Плюс в данном случае изображение медведя с прозрачностью и на один пиксель с полупрозрачностью заходит на целевую картинку.

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

Как угодно. Хоть флекс, хоть грид, хоть таблица хоть без всего этого.

Используя соответствующие параметры в CSS: https://htmlbook.ru/css/border-style

Вот тут в редакторе отлично видно, почему так:


Исправить достаточно просто: отделить стрелку в отдельную фигуру.

Самый простой и логичный вариант: конвертировать цифры в заданном шрифте в SVG в нужном стиле с заданным фоном в самой цифре. Далее делаем рамку контейнеру с контентом, при этом цифру просто смещаем на толщину линии относительно нужной границы, чтобы часть рамки цифры выходила за границу родительского контейнера и была не видна.

не уверен как отразится на производительности наличие 10000 элементов

Крайне отрицательно. Для вашей задачи единственный вариант - это использовать canvas и соответствующую графическую библиотеку. Для проверки просто сделайте обычную таблицу и посмотрите как быстро оно будет работать.