• По умолчанию у пользователя нет задач.
• Первая/ новая задача создается по нажатию кнопки Add Task
• У задачи редактируемое название. Переход в режим редактирования названия осуществляется по двойному клику мыши или автоматически при создании таска.
• У каждой задачи может быть любое количество шагов.
• У каждого шага может быть одно из 3-х состояний Todo/In Progress/Done. Состояние изменяется по клику на статус. Todo меняется на In Progress, In Progress на Done, Done на In Progress
• Шаг может быть удален по нажатию на кнопку удаления.
• Редактирование названия шага по двойному клику
• У каждой задачи показывается общее количество шагов и количество завершенных
• Если у задачи все шаги завершены то таска считается завершенной, это сотояние должно быть отмечено цветом фона
• Данные должны сохранятся в Local Storage

Старайся чтобы строки кода не были очень длинные желательно до 100 символов, особенно это касается шаблонов

Разделить данные и представление. При изменении обновлять только измененный элемент,

• Не создавать для каждой задачи и шага свои методы. Например deleteTask, newStep, showStep и тд создаются каждый раз в функции showTask. В большой кодовой базе и при большом объеме данных будет утечка памяти
• Не создавать отдельный обработчик для каждого повторяющего элемента, использовать делегирование событий. Например вместо $task.find('.js-task__delete-task').on('click', deleteTask);
  использовать $('body').on('click', '.js-task__delete-task', deleteTask).
• Сохранять данные каждый раз при изменении, а не только на unload. Данные не сохранятся при внештатном закрытии страницы
• Везде использовать строгое сравнени ===
• Не использовать if/else без скобок. Если нужна короткая запись то можно так flag && doSomething() или flag ? doSomething1() : doSomething2();
• Не использовать contentEditable использовать input. contentEditable имеет другое предназначение
• Вместо if(state) {$el.addClass('a'); else {$el.removeClass('a')'} можно использовать $el.toggleClass('a', state)
• Сейчас PROGRESS_STEP, db, initTasks, newId, removeByID глобальные. Что бы этого избежать нужно использовать самовызывающуюся функцию IIFE

Есть несколько вариантов

• Разбить код на несколько файлов, а потом склеить файлы в нужно порядке галпом
• Лучший использовать JS модули. Через gulp и browserify или webpack. Я рекомендую webpack

Написать логику приложения на JS использую ES2015+ и JQuery

Метод принимает один аргумен e. Но аргумент e может быть нативным event-ом, так и кастомным объектом со свойством action. Такая реализаци сложно читается и не ясно намерение метода. Рекомендую поменять сигнатуру на ($task, action). + Такая реализация поможет избавится от call. Call и apply очень мощное средство, но нужно использовать при крайней необходимости.
Вторая проблема метод делает больше чем надо. По названию метод только должен обновлять статус, но никак не удалять задачу. Старайся, что бы каждый метод выполнял только одну задачу.
action === 'delete-step' || action === 'add-step' || action === 'change-step-progress' можно заменить на
['delete-step', 'add-step', 'change-step-progress'].includes(action)
Функциональность по определению завершенности задачи лучше поместить в модель

Сверстать все компоненты без js
Цвета и шрифты можно использовать любые. Для иконок использовать http://fontawesome.io/
Использовать Sass