Страница решений: объясни, покажи, получи ответ

Нина отправила Льву список: «Добавить дату. Настроить напоминание. Исправить подпись». Лев ответил: «Что из этого нужно решить мне?» Он организует занятия в мастерской и отвечает за расписание. По списку задач он не видит ни проблемы, ни разницы между решениями.

На странице записи девять занятий. Рядом с названием указано время, а день спрятан внутри карточки. Чтобы найти подходящее занятие на субботу, посетителю приходится открывать карточки по очереди. Нина предлагает два способа: дописать дату в каждой строке или разделить список по дням. Какой выбрать — зависит от того, насколько большим станет расписание.

Страница решений помогает пройти путь от «что случилось?» до «выбираю вот это». Нина объяснит проблему, покажет оба варианта и назовёт, сколько работы они потребуют и что изменят для посетителя. Затем посоветует один из них и даст Льву выбрать.

Установи пакет командой dz install @dzhechkov/skills-decision-mockups. В среде с поддержкой скиллов вызови /decision-mockups или опиши нужную страницу. Пакет содержит файлы скилла, исполняемого bin у него нет. Для полной страницы используй доступный artifact-design; если его нет, возьми существующий шаблон. Для короткого ответа оформление не требуется.

Когда Лев закончит, он нажмёт «Скопировать ответы» и вставит результат в чат. Нина получит названия вопросов и выбранные варианты. Ответы сохраняются в браузере, поэтому Лев сможет вернуться к странице позже.

Перед упражнением попробуй сам ответить на его вопрос: что именно в этой истории должен решить организатор?

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

Нина разбирает две жалобы. В списке трудно найти день занятия. Напоминание приходит утром, когда готовить материалы уже некогда. Применение скилла поможет объяснить обе проблемы, но макет понадобится только для первой.

Нина рисует рядом «Как сейчас / После починки»: слева «Лепка · 11:15», справа «18 сентября · Лепка · 11:15». Под каждой фигурой .mock-note подсказывает, куда смотреть: «День приходится искать в карточке» и «День виден сразу». Лев за несколько секунд понимает, что предлагается изменить.

Теперь попробуй нарисовать отправку письма за 36 часов вместо утра занятия. На двух экранах окажется одно и то же письмо. Разницу лучше объяснить словами: раннее напоминание оставляет время подготовить материалы, утреннее учитывает изменения расписания накануне. Если время перенесут после раннего письма, понадобится ещё одно сообщение.

Скилл использует CSS-макеты без картинок и внешних ресурсов: целевой хост ограничивает их загрузку. Адрес example.com/lessons внутри нарисованной рамки служит подписью. Сам макет показывает предложение; реализацию проверяют уже в работающем интерфейсе.

Страница нужна, когда Льву трудно разобраться в последствиях. Если он всё понимает и просит короткий список задач, отправь список. Если нужно только объяснить статус без выбора, учти ограничение: скилл допускает такой запрос, но в версии 0.1.9 проверка наличия вопросов G6a в check_page.py отклоняет страницу без групп выбора. Не добавляй бессмысленный вопрос ради проверки; для короткого статуса выбери обычное сообщение.

Для пути заявки Нина рисует последовательность: отправитель → очередь → обработчик. При остановке обработчика очередь сохраняет заявку, а прямой вызов возвращает ошибку отправителю. Отдельная граница показывает, кто хранит вход и кто обрабатывает его. Рядом нужен текст с этим порядком и поведением при отказе; названия одинаковы в схеме и экспорте. Сравнение критериев удобно дать таблицей, один местный выбор — коротким текстом.

Лев просит Нину «сделать выбор по каждой находке». На карточке занятия написано «материалы включены», хотя глину участник приносит сам. Нина уже набросала две кнопки: «Исправить» и «Оставить». Остановись: зачем Льву выбирать вторую?

Мнимая развилка — это выбор, в котором один из вариантов нечем оправдать. Если оставить неверную подпись, участник придёт без глины и не сможет заниматься. Нина убирает кнопки, но сохраняет карточку: что написано неверно, к чему это приведёт и какой текст появится вместо обещания. Льву она объяснит, почему исправление вошло в план без вопроса.

С датой дело обстоит иначе. Дописать её в каждой строке — полтора дня работы; все занятия можно сравнить сразу, но строки станут плотнее. Добавить переключатель дней — четыре дня; длинное расписание легче просматривать, но занятия разных дней уже не увидишь одновременно. При девяти занятиях Нина советует дату в строке. Если расписание вырастет до десятков занятий в день, переключатель станет полезнее.

А теперь вернись к кнопке «Оставить». Она всегда лишняя? Нет: утреннее напоминание стоит сохранить, если время занятия часто меняют накануне вечером. Тогда письмо придёт с последним расписанием. Участникам останется меньше времени на подготовку — эту цену тоже нужно назвать.

В упражнении сначала выбери приоритет: сравнивать занятия разных дней или удобно просматривать длинное расписание. Оба решения можно обосновать. Проверяй каждую ветку вопросом: «При каких условиях я бы её выбрал?»

Нина сначала написала: «Добавить поле даты в список». Лев спросил: «А что сейчас не так?» Задача в очереди понятна автору, но ещё не стала объяснением. Карточка находки отвечает на три вопроса в одном порядке: что не так → чем грозит → как чиним.

Нина переписывает задачу для Льва:

1. Что не так: у занятия видно время, но не день. Список похож на афишу, у которой забыли даты.
2. Чем грозит: участник открывает карточки по одной, чтобы выбрать удобный день, и может перепутать занятия с одинаковым временем.
3. Как чиним: предлагаем дату в каждой строке или переключатель дней; у каждого варианта указываем срок работы и неудобства.

Для неверной подписи о материалах третья строка будет простым действием: заменить обещание перечнем того, что нужно принести. Карточка остаётся, хотя развилки нет. Лев увидит и вопросы, на которые нужно ответить, и исправления, которые Нина уже предлагает внести.

В сводке Нина отмечает размер работы S/M/L и важность находки. Они не заменяют последствие: «M» не объясняет, почему Лев должен обратить внимание. Назови то, что важно Льву: успеет ли участник подготовить материалы, сможет ли выбрать день, не пропустит ли занятие.

Попробуй составить три строки для пустого списка после выбора дня без занятий. Не добавляй четвёртую строку про внутренний файл. Если она нужна инженеру, вынеси её в справку, сохранив понятный основной текст.

Нина объясняет Льву запись так, как объяснила бы знакомому: аналогия раньше термина, одна на понятие. Список занятий похож на афишу: дата нужна рядом с каждым названием. Только после этого можно упомянуть внутреннее поле (lessonDay) как справку, если оно вообще помогает адресату.

Для напоминания подойдёт приглашение, принесённое перед выходом: человек узнал о встрече, но времени подготовить материалы уже мало. Дальше держись этой картины. Не превращай то же письмо через абзац в поезд, курьера и очередь — читателю придётся каждый раз строить новое объяснение.

Аналогия не должна обещать лишнего. У афиши нет интерактивной записи, а у реального письма бывают переносы и проблемы доставки. Скажи, какой кусочек устройства она объясняет: «Это сравнение про видимость даты, не про подтверждение записи». Для инженера внутреннее имя поля может быть полезно; Льву достаточно понять, где посетитель увидит дату.

Трудное место — статус «частично». Нина обновила день в письме, но забыла адрес мастерской. Фраза «готово частично» этого не объясняет. Напиши: «День обновлён, адрес пока старый; до отправки заменим его». Теперь Лев знает, что осталось сделать перед отправкой.

Перед следующим упражнением выбери свою аналогию для списка ожидания. Что она объясняет хорошо? Где может ввести в заблуждение? Попроси собеседника пересказать сравнение: совпало ли его понимание с твоим?

Нина написала под датой в строке: «Рекомендуем — так удобнее». Лев спрашивает: «А что мы теряем?» Цена варианта — это не только срок работы. Это ещё и неудобство, с которым придётся мириться после изменения.

На дату в каждой строке Нина отводит полтора дня: добавить подписи и проверить длинные строки на телефоне. Список станет плотнее, зато занятия разных дней останутся перед глазами. На переключатель — четыре дня. Он сократит длинный список, но добавит переход: чтобы сравнить субботу с воскресеньем, придётся переключаться.

Пример формулировки рекомендации: «Рекомендуем A: девять занятий удобно сравнивать в одном списке. Цена — полтора дня и более плотные строки. B полезен, если расписание вырастет до десятков занятий в день и человек заранее знает нужную дату; потребуется четыре дня и отдельный переход».

Лев может ответить: «Мы как раз расширяем расписание — выбираю B». Это нормальный результат. Рекомендация помогла ему увидеть, какое условие меняет выбор.

Теперь перенеси сравнение в шаблон. В развёрнутой форме .opts.pickable каждый .opt начинается с жирного вердикта <b>Вариант A — …</b> и содержит свою цену. В компактной .picks обе цены находятся в <p class="rec"> той же карточки вопроса. Один рекомендуемый вариант отметь классом .suggest и словами «— рекомендуем».

G10a и G10b проверяют оформление, G10d — использование этих форм во всех группах. G10c ищет слова о цене в развёрнутых вариантах и выдаёт предупреждение. Чтобы проверить саму оценку, спроси исполнителя, учтены ли проверка телефона, пустой список и длинные названия.

Попробуй поменять приоритет Льва: расписание растёт, общий обзор больше не нужен. Перепиши рекомендацию в пользу переключателя, сохранив цену обоих вариантов.

Нина отличает условия задачи от наблюдений: факт называет источник, оценка — базу и диапазон, допущение — условие, неизвестное — данные, которые поменяют выбор. «20–40 заявок в минуту» без замеров остаётся непроверенным предположением. Если база оценки неизвестна, Лев может запросить данные. При недостаточных основаниях Нина объясняет, почему пока не рекомендует ни одну ветку.

«Откроем запись после апрува», — написала Нина. Лев остановился: «После чего?» Нина заменяет фразу: «Откроем запись после одобрения организатора». Теперь понятно и действие, и тот, от кого оно зависит.

Такие слова ищет проверка жаргона G15 в check_page.py. G15 ищет известные кальки по словарю в видимом тексте страницы. Для найденного слова скрипт сообщает строку, позицию и предлагает простую замену. «Фейлится» в рассказе об отправке письма можно заменить на «не отправляется» или «выдаёт ошибку». Исправь текст и запусти проверку ещё раз.

Но вот Нина написала: «Осуществляется реализация мероприятий по улучшению процесса записи». Словарь G15 может пропустить эту фразу: знакомых калек в ней нет. Льву от этого не легче. Нина перечитывает её и пишет, что делает на самом деле: «Добавляем дату рядом с названием занятия». G15 помогает вычистить известный жаргон; пустые и тяжёлые фразы находят при чтении.

Иногда слово из словаря употреблено буквально. Например, в тексте занятия по первой помощи могут встречаться «раны». Тогда на той же строке ставят HTML-комментарий calque: с причиной. Без причины проверка выдаст ошибку G15b. Обоснованный комментарий исключает из словарной проверки всю строку, поэтому перечитай и соседние слова: вместе с буквальным словом можно случайно пропустить жаргон.

Перед упражнением прочитай свою карточку вслух. На каком слове пришлось замедлиться? Можно ли заменить его конкретным действием: кто что делает и что получит участник?

Нина закончила черновик и собирается отправить ссылку. Но в одном вопросе она случайно оставила только одну кнопку. check_page.py найдёт такую ошибку до того, как страницу откроет Лев. Это Python-скрипт из пакета; ему достаточно стандартной библиотеки Python 3.

python3 /путь/к/decision-mockups/references/check_page.py booking-page.html

Замени /путь/к/ на путь к установленному скиллу, а booking-page.html — на имя своего файла. Скрипту нужен HTML-фрагмент страницы решений. Полный сайт этого курса устроен иначе и проверяется инструментами фабрики курсов.

Прочитай результат запуска:

1. Код 1 — найдена ошибка, мешающая публикации. Исправь указанное место и повтори проверку. В случае Нины нужно вернуть пропущенный вариант, если он полезен, или убрать мнимую развилку.
2. Код 2 — не удалось проверить файл. Проверь команду и путь: возможно, файл не существует.
3. Код 0 — блокирующих ошибок нет. Просмотри сообщения WARN, затем переходи к чтению и проверке страницы в браузере.

Скрипт проверяет, например, баланс div, использование цветов из токенов, три палитры, отсутствие внешних ресурсов, уникальность групп выбора и наличие хотя бы двух вариантов в каждой. Он также ищет заглушки, проверяет счётчик, оформление экспорта и отсутствие оболочки документа. Проверка наличия вопросов G6a отклонит страницу, если групп выбора нет совсем.

Предупреждение WARN само по себе не даёт код 1. Например, G10c просит обратить внимание на цену, а G3f — на небольшое число цветовых токенов. Нина читает каждое сообщение и решает, нужна ли правка.

Наконец она сверяет сроки с составом работ, перечитывает рекомендацию и открывает страницу. Можно ли выбрать и снять вариант, сохранить ответы после перезагрузки и скопировать их? Эти действия скрипт за неё не выполнит.

Для новой версии ответа Нина сначала готовит манифест: python3 references/check_answer.py --prepare manifest.json > current-manifest.json. Этот отдельный шаг проверяет контекст и вычисляет revision. Получатель вызывает python3 references/check_answer.py current-manifest.json answer.json, пересчитывает хеш и отказывает при старых основаниях. Приём использует его собственный текущий манифест; присланный старый манифест не заменяет его. Код 0 — текущий допустимый ответ, 1 — отказ, 2 — ошибка чтения/вызова.

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

Нина смотрит на страницу вечером, Лев откроет её днём. Если подпись даты исчезает в одной теме, весь разговор о выборе теряет смысл. Палитра токенов — как набор подписанных банок с краской: названия одинаковы, а подходящие для освещения значения различаются.

Шаблон требует три блока:

1. Полную светлую палитру на голом :root.
2. Тот же набор имён в @media (prefers-color-scheme: dark) с :root:not([data-theme="light"]).
3. Тот же набор в :root[data-theme="dark"] для принудительно выбранной тёмной темы.

В тёмных блоках меняются значения, а не только подпись режима. body задаёт фон через var(--...); цветовые литералы за пределами палитр, включая style="…", блокируются. Нина не красит дату отдельно случайным цветом: использует существующий токен из шаблона.

G3d/G3e сравнивают наборы имён, G3g/G3h проверяют, что тёмные значения отличаются. Предупреждение о небольшом количестве токенов G3f не равно блокирующему отсутствию палитры. Например, два разных серых цвета всё ещё могут сливаться на экране.

Открой страницу в обеих темах: видны ли дата, стоимость, отметка рекомендации и выбранный вариант? Затем проверь узкий экран. Важное широкое содержимое должно прокручиваться внутри своего контейнера, а не утаскивать всю страницу вбок. Лев должен прочесть варианты и выбрать один из них с телефона так же легко, как с большого экрана.

В прежнем формате 0.1.9 Лев пробует черновик: выбирает дату в каждой строке и общую запись на новое занятие, но оставляет вопрос о напоминании открытым. Нине нужно увидеть оба ответа и оставшийся вопрос. Экспорт ответов собирает тему, дату, вопросы и выбранные варианты в текст, который можно прочитать без самой страницы.

У каждой группы свой уникальный data-group и понятный читателю data-label, у варианта — короткий data-val. В группе активен один вариант; повторный клик снимает выбор. Значение data-val попадает в экспорт, поэтому «да» без контекста хуже, чем «Открыть общую запись».

Вот что Лев получит после нажатия «Скопировать ответы»:

Решения по записи на занятия (12.09.2034):

Выбор 1 — день занятия: Показывать дату в каждой строке
Выбор 3 — начало записи: Открыть общую запись

Без ответа: Выбор 2
```

Порядок ответов следует документу. В хвосте неотвеченных вопросов подпись сокращается до сегмента перед « — ». Когда все ответы есть, хвост исчезает. Нина сразу увидит, к какому вопросу ещё нужно вернуться.

Для страницы записи Нина выбирает отдельный ключ localStorage, например workshop-booking-2034-09. Чужой ключ может перенести ответы между страницами. Счётчик «Выбрано N из M» берёт M из DOM, а в HTML-слоте изначально стоит 0. Кнопка копирует через clipboard с запасным textarea/execCommand и подтверждением «Скопировано».

Варианты — кнопки с role="button", tabindex="0" и aria-pressed. Enter/Space работают как активация кнопки; полная радиогруппа с перемещением стрелками не реализована. Группы плоские. Пресеты при необходимости кликают те же варианты, не заводя вторую систему выбора.

Повтори проверку Нины: выбери вариант, сними его повторным кликом, активируй клавиатурой, перезагрузи страницу. Затем скопируй ответы в пустое окно и проверь, понятно ли, что выбрано и какой вопрос остался открытым.

Теперь Нина включает v2 через подготовленный инертный манифест с pageId, revision и стабильными ID. Экспорт ответов сохраняет задачу, сделанное/оставшееся, почему сейчас, основания/источники, цену, риски и неизвестное. Selected означает конкретный вариант; «Отложить», «Нужны данные» и «Нет ответа» остаются разными состояниями. Рекомендация не выбирается сама, а выбор не означает выполнение.

Лев копирует читаемый текст. Рядом доступен отдельный полный JSON ответов для проверки; Нина не ищет JSON среди подписей и цитат. Если текущий манифест недоступен, контекст можно читать, но проверка версии ожидает. Старые строки хранения не восстанавливаются как согласие v2. При изменении оснований с теми же ID Лев подтверждает всю страницу заново.

У Нины готовы объяснения, варианты и макеты. Осталось собрать их в страницу, по которой Лев сможет пройти от начала до конца. Сборка из шаблона начинается с копии templates/page-skeleton.html. Заполняй её по частям: шапка, сводка, разделы с находками, карточки, макеты, вопросы. Подставь тему, дату и ключ в настройке пикера; для v2 подготовь полный манифест.

Удали все заглушки, в том числе из комментариев: незаполненный шаблон не пройдёт проверку G13. Файл страницы решений — HTML-фрагмент с <title>, стилями и скриптом, без <!doctype>, <html>, <head> и <body>. Оболочку документа добавляет Artifact-хост.

Проверь файл скриптом, перечитай варианты и попробуй страницу в браузере. Затем опубликуй её через Artifact-инструмент своей среды. Укажи название, короткое описание и значок; при обновлениях значок сохраняется. Скилл рассчитан на хост, где публикация по тому же пути обновляет прежнюю ссылку, а другой путь создаёт новый артефакт. Убедись, что твоя среда это поддерживает: сам пакет страницу в интернете не размещает.

Нина отправляет ссылку вместе с сообщением: «Выбери варианты, нажми “Скопировать ответы” и вставь текст сюда. Подпись про включённые материалы исправляем без вопроса — она неверна. Для напоминания макета нет: меняется время отправки, а не экран. Оплату в этой странице не разбираем».

Перед упражнением составь свой план страницы на бумаге или в редакторе. Для даты выбери подпись в строке или переключатель дней; запиши обе цены и причину рекомендации. Добавь вопрос о начале записи на новое занятие: открыть её для всех или сначала пригласить пробную группу? Общая запись требует двух дней подготовки. Пробная группа — одного дня, но открытие для всех придётся отложить; зато можно уточнить программу по итогам первого занятия.

Проверь план: объяснил ли ты проблему и последствия, посоветовал ли один путь, назвал ли условия для другого? Реши, где нужен макет и какой текст Лев вернёт в чат. Затем в упражнении разбери шаги передачи страницы.

Перед передачей Нина пробует обе темы при узкой ширине: текст, кнопки и фокус не должны скрываться за панелью. Tab/Shift+Tab, Enter/Space, сброс с фокусом, disclosure и скроллер схемы проверяются в настоящем браузере. Отказ хранения не мешает текущему ответу. Проверка DOM не показывает, что произнесёт screen reader или как поведёт себя другой хост.

Нина задала Льву два коротких вопроса: «Как доставлять заявки?» и «Как сообщать об отказе?» У каждого варианты A и B. Версия контекста фиксирует показанные условия, а не только буквы ответов. «A» без названия вопроса неоднозначно: Нина уточнит, что выбрал Лев.

Для простой развилки достаточно текста: задача, сделанное/оставшееся, почему сейчас, ограничения, риск, неизвестное и цены. Нина показывает полные названия вопросов/вариантов, состояния и версию. Инструкция: «Ответьте названием вопроса и полным названием варианта; либо напишите „Отложить“, „Нужны данные: [вопрос]“ или „Нет ответа“ для указанного вопроса».

Лев отвечает: «Как доставлять заявки? — A; Как сообщать об отказе? — Отложить». Нина составляет документ ответов с той pageId/revision, которую записала при показе. Лев не пишет JSON и не копирует хеш. Пропущенный вопрос остаётся unanswered. Повторяющиеся полные названия, «да», «рекомендация» или потерянная привязка требуют уточнения. Это работа агента по инструкции, не автоматический распознаватель фраз.

Если после ответа изменились условия доставки, Нина не подставляет новую revision в старый ответ. Реальная проверка по её текущему манифесту откажет; Лев подтвердит всю страницу заново. Без доверенного текущего манифеста версия остаётся непроверенной. Хеш не доказывает правдивость источника и личность отвечающего.

Компактному ответу не нужны HTML/CSS и HTML gate. Для полной страницы сохраняются русский экспорт, плоские группы, кнопки aria-pressed и две темы; стрелки радиогруппы не реализованы. Gate по-прежнему отклоняет ноль групп: не придумывай выбор для статуса. Прежний формат 0.1.9 продолжает работать отдельно.

Попробуй вернуться к задаче после перерыва: можешь ли восстановить, почему нужен ответ и что осталось сделать? Проверка файла этого не измеряет. Нина готовит сравнение чата, прежней страницы и нового формата; результаты появятся только после реальных человеческих сессий.