Архітектура: лист рішень
Сімдесят один стенд закінчуються тим самим реченням: «етап 09 стартує з цього списку, зведеного в architecture.md». До кроку 7.60 того файлу не існувало. 98 знахідок лежали в 7300 рядках логу, який не відкривають.
Усе, що етап 08 заміряв і навмисне не полагодив, згорнуте в найменшу кількість рішень, які це закривають. Не переказ логу: лог пише, що сталось, а це пише, що лишилось винним.
Кожне рішення несе замір, що буде якщо лишити, скільки коштує змінити, і рекомендацію. Відповідь - так або ні по рядку. Нічого не вигадано: кожне число прочитане з коду або з браузера 9 серпня, і де воно розійшлось із тим, що записав ранній крок, узяте свіже, а розбіжність названа.
Навіщо сторінка, а не тільки файл
CLAUDE.md: «артефакт, якого ніхто не бачить у браузері, не існує для того, хто ухвалює рішення». Дев'яносто вісім знахідок у логу - це нуль знахідок для власника.Ці рухають пікселі. Кожне - одне рішення на багато файлів, і саме тому жоден крок їх не брав: значення переїжджає один раз, за рішенням, сказаним уголос.
| Рішення | Заміряно | Рекомендація |
|---|---|---|
1.5px | Було не 44 в 26, а 33 оголошення в 23 файлах. Стару цифру міряв наївний grep: він рахував прозу в коментарях за код і ловив 11.5px підрядком. Заміряно трьома способами: getComputedStyle віддає 1px при DPR 1, 2 і 3; прямокутник коробки з 1.5px побайтно дорівнює коробці з 1px (95.156 x 41.594), тоді як 2px дає 97.156 x 43.594; перепис усіх ненульових країв на 40 екранах у двох ширинах віддає рівно три: 1px 34 262 · 2px 440 · 4px 16, і жодного 1.5. Чотири - це кільце двох спінерів, де край малює форму, а не межу | Зроблено: 1px, 33 оголошення в 23 файлах, і правило записане в tokens.css: товщин дві, волосина 1px і важка 2px. A/B: нульовий прохід 0 рядків, різниця 0 рядків. Лишилось одне питання: у checkbox.css 1.5 був аргументом, а не звичкою («коробка 18px - це сама лише лінія, і волосина там читається як прямокутник із нічого»). Аргумент може бути правий, а значення його ніколи не робило. Хоче та коробка 2px - це рішення власника |
Не 21 значення, а 18 меж. Межа на N пишеться (min-width: Npx) з одного боку і (max-width: N-1px) з другого - рахувати 479 і 480 як два значення означає порахувати одну межу двічі. Розібрано з 76 листів, коментарі зняті: 116 блоків @media, 112 умов ширини, 18 меж. Найуживаніша - 860 (39 оголошень у 15 файлах), і її в наборі немає; далі 720 (20), 480 (13), 620 (10 у 9 файлах). Чотири межі писали двома способами, і три з них справді накладались: city-dialog закривався на max-width: 480, тоді як checkout-form відкривається на min-width: 480 - на цьому одному пікселі спрацьовували обидва правила; те саме на 640. І 620, і оця показує: product-card закривався на max-width: 620, а дев'ять оголошень відкриваються на min-width: 620. Заміряно рівно на 620 на listing.html: картка виходила 286 x 498, а на піксель ширше вона 286 x 553. На 620 картка малювала суміш вузького й широкого правил | Зроблено: дев'ять оголошень переписано за конвенцією, і після цього жодне значення в системі не вживається і як min-width, і як max-width - перевірено повторним розбором усіх блоків @media, і дві справжні одиначки, у яких член набору був за 40px, згорнуто - banner 700→720, order-row 820→860. A/B: нульовий прохід 0, різниця 3834 рядки, і всі до одного - розкладка (позиція, розмір, grid-template-columns, проміжки). Ні кольору, ні типу. Список у самому записі теж був неточний: 559 і 759 названо одиначками, а це конвенційно правильні вузькі половини меж 560 і 760. Не зроблено, бо це рішення: 560, 620, 640, 760, 960, 1040 служать двом і більше файлам кожна і позначають межу змісту, а не крок сітки. 419 у restock-note лишається із заміряною причиною. Питання власнику одне: набір здобуває 860 і 620 - чи компоненти носять по написаній причині? ЗАКРИТО на 7.70, і питання було про набір, якого немає. У DESIGN-artifacts.md немає жодної точки перелому, жодного @media, жодного слова про адаптивність і рівно одне тризначне значення в px на 111 рядків - і це замір контрасту. Рядок у tokens.css «DESIGN-artifacts.md називає три з них» був хибний, а на ньому трималося все питання. Отже відповідь не в жодній із двох гілок: блок у tokens.css і є набір, і завжди був єдиним. Тепер він так і записаний: 11 меж, при кожній - файли, які на неї спираються, і [?] там, де джерело не каже, чому число саме таке. Переміряно: 11 меж, 110 умов ширини, 76 листів (7.64 записав 18 меж, хоч його ж таблиця після двох згортань перелічує 12). Одне згортання лишалось, і це власне правило 7.64, застосоване до випадку, який воно пропустило: 900 → 860. checkout-form.css був єдиним користувачем 900 - чотири оголошення - і 900 стоїть за ті самі 40px від 860, що й згорнуте 820. Заміряно до згортання на 860/870/880/899 на всіх п'яти екранах оформлення: бокового скролу немає, нічого нового не обрізано, колонка форми виходить 444 поруч із фіксованими 360 коробки суми, а смуга стає на 410-584px коротшою. A/B на ширинах смуги: нульовий прохід 0, 3094 рядки рівно на дев'яти парах - три екрани оформлення на 860, 880 і 899 - і все до одного розкладка. На 840, 900 і 960 - нічого. Більше не згортається нічого: межа, на яку погодились два файли, це рішення, а не дрейф | |
Рахунок був правий, прочитання - ні. 32 в 18 файлах підтверджено. Але це не одна ідея, а чотири: перепис у браузері дає 355 екземплярів у 27 формах - бровка (14), плашка на землі 10px (8), дисплейні капси Oswald (3) і наголос усередині тексту, де великі літери в самих словах, а не в text-transform (2). Одне обличчя на всі 32 зробило б ініціали аватара й «Новинку» заголовками розділів. І «14 із 32 вже такі» - ні: за екземплярами 12/black/muted було 32 з 355. Найгучніші два - заголовок підвала (145, --text-primary) і мітка шухляди (102, --text-secondary). А ще A3 порахував половину сім'ї: є другий токен --ls-eyebrow .08em, названий буквально «бровка», ним пишуть ще 6 оголошень у 5 файлах, і в записі його немає | Зроблено: два токени - два голоси, і кожен тепер вживає один. --ls-caps .04em - бровка: Inter 12 black uppercase --text-muted, дев'ять оголошень переїхали. --ls-eyebrow .08em - системний підпис: моноширинний, «або» в чекауті й авторизації, підпис візуалу, плашка промо; після 7.63 усі його користувачі моноширинні. Колір вирішив замір, а не смак: кожна бровка називає щось у 14px і темніше за себе, і заголовок підвала був єдиним, хто був такий самий темний, як те, що він називає | |
--fw-black не малюється | Кожна сторінка просить family=Inter:wght@400;500;600;700. Начертання 800 немає, Chrome бере найближче й не синтезує. Той самий рядок 12px по вагах: 400 = 221.094 · 500 = 223.281 · 600 = 225.469 · 700 = 227.656 · 800 = 227.656 · 900 = 227.656. Від 700 угору число стоїть. На токені висіло 87 оголошень у 38 файлах | Рішення власника: --fw-black: 700. Вагів чотири, і код тепер каже те число, яке малює екран. Видимих змін нуль. Ім'я лишається, і це теж частина відповіді: два семантичні імені на одному значенні - зазвичай власний дефект цього проєкту (B1), але tokens.css уже несе виняток, який цим керує - --bg-discount і --bg-danger обидва --red-50 навмисне, бо знижка не є помилкою. Тут те саме: --fw-bold означає «це наголос», --fw-black - «це найважче в своєму блоці». Тому друга гілка лишається одним рядком: додати 800 у запит шрифту, повернути токен на 800 - і регістр, під який писали тип, приходить скрізь одразу. Це вигляд, а не ремонт, і він чекає на етап 09 |
| A9 · єдиний бічний скрол у продукті знайдено і напів-полагоджено 7.64 | 40 екранів на 21 ширині від 360 до 1440 - 840 завантажень. Вбок їде рівно один екран: product-oos.html, двома смугами, і завжди той самий ряд - «Повідомити про надходження» плюс серце. Механіка: .bb .buyrow мав flex-wrap: wrap тільки в телефонному блоці, тож вище 479 ряд не міг перенестись узагалі. Двом дітям треба 358 + 52 + 12 = 422, а колонка коробки покупки має 303 на 480 і 395 на 860 | Полагоджено переносом одного оголошення: перенос належить ряду, а не ширині - ряд, якому дозволено ламатись, нічого не коштує там, де він влазить. Заміряно після: шість із семи ширин чисті (560, 860, 900, 960, 1040; 480 зі 103px до 39, 520 з 63 до 19). Звірено по всіх шести екранах товару на семи ширинах - більше не зрушило нічого. Решта - не css. На 480 власний мінімум підпису 358 усередині колонки 303. button.css уже має на це правило: «де жодна розкладка не дасть місця, підпис задовгий для кнопки, і це рішення про слова». Тобто або коротший підпис, або ширша колонка між 480 і 620 |
Запис помилявся тричі. Шкала йде не до 30, а до --fs-34, і всі дев'ять щаблів у вжитку: 10 (30 оголошень), 12 (134), 14 (177), 16 (44), 18 (20), 20 (34), 24 (19), 30 (14), 34 (1). «Шість літералів» - їх було дванадцять оголошень на вісім значень, плюс тринадцять font-size: 0, що не розмір, а спосіб прибрати текстовий вузол. У записі немає 13px, 11.5px двічі й 60px, зате є 13.3px, якого в коді немає взагалі - це дефолт браузера на голому інпуті, а не оголошення | Підлога справжня - додано --fs-8, на ньому три оголошення: підпис у мініатюрі замовлення, у мініатюрі сертифіката і плашка «Новинка» на картці списку, яку писали 8.5px. Півпікселя не є кроком, і шкала його не тримає. Стеля щаблем не є, і це відповідь, а не пропуск: над 34 живуть п'ять літералів і це п'ять різних робіт - 36 ціна в коробці покупки, 38 бонусна цифра, 38 заголовок промо, 50 цифра оцінки, 60 код 404. tokens.css уже має правило, написане на 5.9: «значення, вжите один раз, є значення, а не токен». Ще три літерали пішли в наявні щаблі: .cbh і .cbsave з 11.5 у --fs-12, .cbnote з 13 у --fs-14. Дванадцять сирих оголошень стали шістьма | |
948 оголошень про відступи, і 1092 їхні частини вже читають токен. Сирими лишались 33, і це три різні речі, а не один борг. Один - літерал там, де точний токен уже є: п'ять штук, padding: 16px поруч із --space-16 і подібні. У записі A5 цієї групи немає взагалі, а вона єдина, що не коштує нічого. Два - повітря, яке відмовлялось це сказати: 5, 10, 14, 18, 20, 26 у панелі заспокоєння і на зворотному лінку. Три - зазор, і це взагалі не відступ: 132 під фіксовану панель покупки, 100 під шапку, 60 під таб-бар, 310 під ведмедя, 150 під позначку полиці, 54 під закриття, 46 під серце | Зроблено. П'ять підстановок із нульовим зсувом. Для повітря - одне правило замість шести смаків: кожне з тих чисел стоїть на один-чотири пікселі вище щабля, тож округлення вниз, і панель стає тихішою, а не гучнішою (принцип 4). 18→16, 20→16, 14→12, 10→8, 26→24, 5→4. Зазори лишаються сирими навмисно: щабель зробив би їх неправильними, а не охайними - вони відповідають розміру іншого елемента і міняються разом із ним. Тепер вони перелічені в tokens.css, щоб наступний прохід не прочитав їх як дрейф | |
| A6 · плитка товару | Обидва твердження цього рядка були хибні, і хибні так само, як у A1, A3, A2, A4 і A5: пораховані з тексту, а не зміряні в браузері. Кадрів не чотири, а дев'ять імен у семи файлах: 34×38, 40, 46, 46, 52×56, 56-84, 60, 70, 74×81.4. І «жоден не щабель» - неправда: чотири з дев'яти записані токенами драбини (34, 38, 40, 46), а п'ятий, .ob-line .ph, був щаблем, записаним літералом. Запис також жодного разу не глянув на велике фото: .pcard .ph був 10/11 у базі, 1/1 під 620 і 1 усередині .pmini - один елемент, дві форми, за шириною | Форма зроблена. Фотографії - 2048×2048, малюються вписаними, тож неквадратна рамка лишала нерівне повітря (196.8 у 246×270.59: 24.6 збоку, 36.9 згори). 10/11 прийшла з _wf.css:482 на етапі 04, до появи фотографій, і в DESIGN-artifacts.md її немає - походження [?]. Правило в tokens.css: рамка фотографії товару квадратна, бо квадратна фотографія. П'ять зведено, два оголошення видалено, а не додано. Заодно закрито дефект, якого в записі немає: скелет обіцяв 10/11 над карткою, що малює 1/1 - стрибок 17px на 390. Розмір лишається відкритим - вісім розмірів, і жоден файл не каже, чому плитка поповнення 46, а рядок оформлення 60. Це смак, а не вимір, і це рішення власника |
Перша половина взагалі не була дефектом. Квадрат кажуть 5 правил через aspect-ratio і 110 двома рівними числами, і межа між ними не звичка: усі п'ять - коробки, які не обирають свою ширину (три без ширини взагалі, .ci-ph бере 74 з колонки сітки, .pcard-l .lph міняє 84 на 56 на 560), а всі 110 тримають одне фіксоване число і це гліфи, аватари, спінери й контроли, де width+height - єдине написання, яке взагалі задає розмір <svg>. gallery.css тримає по одному з кожного. Виконати рекомендацію буквально означало б переписати 110 правил і зіпсувати більшість. Друга половина - не 22, а 55 оголошень у 21 файлі: рахувати треба з розкритими скороченнями, бо структура пише border: 1px solid var(--line-hair), а колір - border-color: var(--line-hair). 22 - це число з другого боку тієї самої міри: стільки разів кольоровий блок справді щось змінює | Вирішено виміром, а не смаком. Структурна сторона називає колір 328 разів, кольорова повторила 54. Тобто повторення покриває 16%, а 274 кольори їдуть усередині скорочення й у кольоровому блоці не згадані. Це не може бути записом походження. Довести опис до повного = дописати 274 мертві рядки; другий послідовний світ - на 55 коротший, і взято його. A/B: нульовий прохід 0, різниця 0. Лишаються дві речі, схожі на повторення: відновлення після скидання (.acc-links, border: 0 у запиті повертає колір на currentColor) і 22 справжні відмінності. Правило - у tokens.css, видиме - на сторінці Колір. Заодно виправлено 73 у коментарі product-card.css: 73 - це кількість файлів, а не пар |
A7 має історію, і її варто прочитати
Крок 7.55 прочитав одну таку пару як здвоєний медіа-блок і видалив половину. 7.56 записав ще вісім таких «дефектів» у трьох файлах. 7.57 відкрив ті файли й побачив, що всі до одного - поділ структури й кольору, про який заголовок кожного файлу каже вголос. Три кроки на форму, бо форму заміряли, а причину припустили.І 7.69 мало не став четвертим. Перша спроба видаляла підрядком: re.escape з count=1 ловив перше входження border-color:var(--line-hair) будь-де у файлі, а не те, що в потрібному правилі. Через це .acc-prof і .co-err-box втратили рядки, яких не було в списку, і рядок .co-err-box був справжнім перевизначенням: перепис побачив, що край пішов з rgb(233,231,226) у rgb(217,217,217). 67 рядків різниці замість нуля - і саме A/B це знайшов, а не читання. Інструмент переписано: коментарі маскуються пробілами тієї самої довжини, тож зсуви парсера дорівнюють зсувам сирого тексту, і видалення йде за позицією, з кінця. Друга спроба: 0.
Рішення, 12.08.2026: недобір за AA на акцентному тексті для крамниці прийнятний
На екранах не змінюється нічого. Але перепис 7.81 знімався на 40 кольорових екранах, а їх 88, тож перед тим як записати рішення, порахували заново - усі 88 на 390 і на 1280, з відкритими станами. На 390: 18 акцентних форм, 8 не проходять, 62 екземпляри. На 1280: 21 форма, 12 не проходять, 172 екземпляри. Шість класів:.on · .uiv-cur · .acc-link · .btn--text.btn--inline · .cbnew · .addr-tag. Повна таблиця - на color.html.Чотири речі, у яких таблиця нижче помилялась - і всі знайшлись від перерахунку, не від перечитування
1..badge «еталон», 28 екземплярів при 2.91 - найбільший рядок тут - більше не акцентний: крок 8.10 звів .badge, .addr-tag і .tf-mini в одну форму, і колір поїхав з нею. Найбільша позиція A10 була мертва два кроки, а лист її досі перелічував. 2. Знак ₴ рахували як такий, що проходить: цифра при 20/700 бере поріг, а одиниця біля неї малюється 11px/700 і не бере - це 56 із 62 на 390. 3. .acc-link це 31, а не 8, і одне з його тіл - rgb(242,240,237), 2.75 - найгірший контраст у продукті, якого немає в жодному записі. 4. Найбільшу форму не малював жоден перепис. .on «Українська» - це 82 екземпляри на 82 екранах, і вона всередині .wfh-langmenu, яке відкриває toggleLang(). Обхід станів шукав open[A-Z] плюс два імені, набрані руками, і з тих двох toggleDrawer у продукті не функція, тоді як toggleBurger, toggleDrCat і toggleLang є і не відкривались ніколи. Список із двох - це так само список, у файлі, чий власний перший урок саме про це.DESIGN-artifacts.md тримає замкнене правило: акцент на тексті - тільки від 19px жирного, бо #FF5A00 на білому це 3.13:1, а це AA лише для великого тексту. Крок 7.74 застосував його до ціни. Більше ні до чого його не звіряли жодного разу. Заміряно тепер по кожному елементу, який браузер малює --text-action і який має власні видимі слова: 16 форм на 40 екранах, кожна проти тієї поверхні, на якій справді стоїть, з композицією альфи.
| Форма | Екз. | Кегль / вага | Поверхня | Контраст | WCAG |
|---|---|---|---|---|---|
.badge «еталон» | 28 | 10/600 | rgb(255,245,240) | 2.91 | не проходить |
.acc-link «Адреси» | 8 | 14/600 | rgb(250,249,247) | 2.97 | не проходить |
.more «Читати більше» | 8 | 14/700 | біле | 3.13 | не проходить |
.addr-tag | 2 | 10/700 | біле | 3.13 | не проходить |
.cbnew | 2 | 30/600 | rgb(250,249,247) | 2.97 | не проходить |
.hptag «Акція тижня» | 8 | 12/500 | rgb(28,28,28) | 5.45 | проходить |
.big · .new | 8 | 38/600 · 36/600 | біле | 3.13 | проходить, великий |
| вісім грошових форм | 72 | 20-30 / 700 | біле | 3.13 | проходить |
П'ять форм не проходять AA - 48 екземплярів. Найбільша з них Перепис 12.08.2026 каже інше: на 390 - 8 форм і 62 екземпляри, на 1280 - 12 і 172, найбільша .badge: 28 штук по 10px на теплій поверхні..on «Українська» на 82 екранах, а .badge уже чорнильний.
Правило надто суворе
.hptag це 12/500 і 5.45:1, бо він на майже чорному. Той самий помаранчевий на інверсній поверхні читається краще за будь-який текст на білому, а правило забороняє його разом з усім іншим: воно говорить про кегль там, де вирішує поверхня.І надто м'яке
.cbnew це 30/600 - за WCAG великий текст, - і все одно 2.97, бо стоїть на --bg-surface, а не на білому. Про теплі поверхні правило не каже нічого, а вони знімають 0.16, і цього досить.Три виходи, і всі три - рішення про значення: підняти кегль, зняти акцент або лишити з написаним винятком. Кроком вітрини не береться: правило замкнене, і міняється воно вголос - «змінна -> значення -> чому».
Спершу було неправильне питання. «Чи є елемент ширший за в'юпорт» - питання не те: усередині горизонтального скролера так і має бути, а свип 7.84 рахував і їх. Питання - чи їде сама сторінка: documentElement.scrollWidth > innerWidth. Переміряно так на 7.86 по двох шарах, 182 сторінки x 5 ширин: 137 пар із 910 їдуть, і 129 з них - рівно ширина 720.
Причинний тест чистий. Із 53 сторінок, що проходять 720, у 24 футерної сітки немає взагалі, а решта 29 - кольорові. Жоден сірий екран із футером не проходить 720, і жоден кольоровий не падає.
| На 720 | Колонки .wff-cols | Сума |
|---|---|---|
| сірий | 254.1 · 105.6 · 80.7 · 74.3 · 164.2 | 678.8 + 64 проміжки |
| кольоровий | 149.8 · 116.4 · 92.9 · 92.9 · 172.1 | 624.1 + 64 проміжки |
| різниця | уся в першій колонці: 254 проти 150, і це колонка розсилки | |
min-content тієї колонки справді 254 у сірому й 150 у кольорі, і поле дає туди 149 проти 26.
7.84 назвав .wff-phone, і це було не те
23px жирного з nowrap - це найзовнішній елемент, що переповнює, а не причина: колонка телефону в сірому 164, у кольорі 172, тобто в шарі, який не ламається, вона ширша. Назвати найзовнішню коробку причиною - та сама помилка в іншому пальті, що й рахувати дітей скролера переповненнями: обидві читають симптом з екрана й на цьому спиняються.Досі не взято, і тепер із кращої причини. Обидва поля рахують flex: 1 1 0% і min-width: 0px, отже справа не в цих двох оголошеннях, і наступний замір має бути про внесок поля, а не про його декларації. Коли він буде, виправлення - це перенесення з шару, який уже працює, а не значення, вигадане тут.
126 із 913 імен класів системи оголошені більш ніж в одному файлі компонента. Заміряно читанням усіх 73 таблиць стилів. Частина з цього - законне повторне використання, і воно себе називає: .uiv-ic у 21 файлі це примітив іконки, .on у 18 і .open у 12 - спільні слова стану, .btn--accent у 4 - кнопка всередині інших компонентів. Решта - зіткнення, і всі зіткнення це короткі загальні імена: .ar у 7 файлах, .x у 5, .ct у 5, .m у 4, далі .ok .ph .ic .sub .ci .tl .cnt .nm .old .bb .lt.
Чого це коштує, заміряно. На 22 організмах, які взагалі малюються, 78 дочірніх класів усередині кореня мають більш ніж одного власника, тож таблиця складу кожного стенда частково нечитна: з коду не сказати, чий .ct у рейці кабінету - account-shell, chip, client-row, counter чи filter-group. Найгірші: hero 13, product-grid 14, auth-dialog 10.
І це підлога, а не підсумок. Перепис звіряє таблицю стилів із таблицею стилів і ніколи - з розміткою. У .dn один власник у карті й два значення в продукті: небезпечна нотатка під «Видалити клієнта» в client-dialog.css - і <span class="dn">Нова Пошта</span> на трьох екранах чекауту, де правила немає ніде.
Один живий наслідок, і його виправлено на 7.86
footer.css:38 оголошував .fh .ar{ transition:transform .18s ease }. Воно збігалося з 280 елементами й не вигравало на жодному, бо всі 280 лежать усередині .fgroup, де filter-group.css каже те саме на 20ms довше й на один клас специфічніше. Футер не малює жодної стрілки. Оголошення було не у своєму файлі, на екрані не змінювало нічого, і бачив його тільки вирішувач. Знято.Це не крок перейменування - перейменування це Крок 6, після етапу 09. Сюди належить замір і правило, яке з нього випливає: компонент може оголошувати тільки те ім'я, яким володіє, а те, яким не володіє, - тільки складати.
| Організм | Що саме правда |
|---|---|
system-page | 16 класів, 0 кольорових екранів, 0 будівників у JS. Його розмітка є на wireframes/404.html, 500.html, maintenance.html, system.html - чотирьох сірих екранах без кольорового двійника. index.css імпортує файл на всіх 40 кольорових екранах, і він не малює нічого. Колірного блоку в ньому немає взагалі, хоч його ж шапка обіцяє колірний блок |
cookie-banner | 20 класів, 0 кольорових екранів. Плейсхолдер id="wf-cookie" є рівно в ОДНОМУ файлі репозиторію - wireframes/system.html. Футер при цьому пропонує «Змінити згоду» на 31 кольоровому екрані, а обробник відкочується на location.href='system.html', якого в design/ немає |
cat-overlay | 14 класів, 0 кольорових екранів, і розмітки немає в жодному html обох шарів: wfCatOverlayEnsure() створює її на перший дотик |
client-dialog | .cedel до кольору дістатись не може: wfClientEdit() викликається лише з п'яти wireframes/coach-*.html |
account-shell | 15 власних класів поза кольором, і це чотири різні види, а не один: 11 - таблиця реєстру екранів самого прототипу (.wt-*, будує wfTree), 2 не існують у розмітці ніде, 1 на одному сірому екрані, 1 - рейка тренера |
buy-box | .qty і .tier - продуктові рішення, лишені у файлі: лічильник, про який коментар у розмітці каже, що його прибрали, і блок тарифу, який замінив .coachbox .cbtier |
І факт під усіма ними
Кольоровий шар це 40 екранів; сірий прототип - 142. У 42 екранів тренера кольору немає зовсім - а тренер це первинна аудиторія цього продукту, канал, про якийCLAUDE.md каже, що при конфлікті рішень виграє він. Шість із 24 файлів організмів не мають колірного блоку взагалі: cat-overlay, city-dialog, client-dialog, cookie-banner, nav-drawer, system-page.
Це рішення про обсяг, і воно власника, а не дефект на підмітання: або кольоровий шар доростає до потоків, які мають значення, або файли, що обслуговують лише сірі екрани, чекають, доки він доросте. Чого не можна робити далі - шліфувати компонент до пікселя на 40 екранах, поки в цілого потоку первинної аудиторії шліфувати нічого.
Ці три числа - стан на 11 серпня 2026, і рішення нижче саме на них відповідає
Переміряно 2026-08-14 кроком 6: кольоровий шар це 87 екранів плюс хаб етапу (46 покупця, 41 тренера), сірий прототип - 141 екран плюс власний хаб, отже сірими лишаються 54. Потік тренера з таблиці нижче в кольорі від кроку 7.95, і «42 екрани тренера без кольору» - закрите, а не відкрите.Абзац лишено, а не переписано: це питання, на яке власник відповідав, і відповідь без нього не читається. Помітка потрібна тому, що читач, який прийде сьогодні, інакше прочитає вже ухвалене рішення про обсяг як відкрите - рівно та поразка, проти якої написане правило «md живий, html не застигає». Знайдено 2026-08-15 при закритті пункту 7 бэклога, який називав два застарілі записи; обидва вже були виправлені у своїх файлах, а цей третій не стояв у жодному списку.
Рішення власника, 11 серпня 2026: розфарбувати ВИБІРКУ потоку тренера - шість-вісім екранів
Не всі 42 і не жодного. Достатньо, щоб система побачила канал, без 42 екранів одразу.Вісім, і жоден не обраний тут на смак. Шість це призначення, які називає власна навігація тренера в wireframes/_nav.js; два інші названі замкненими продуктовими рішеннями в CLAUDE.md: coach-landing (вхід, на який уже вказує «Для тренерів →» з кожної кольорової шапки), coach-home, coach-clients (збережений список клієнтів), coach-session - сама первинна робота, coach-orders, coach-client, cart-coach (кошик з позначкою клієнта) і coach-verify (роль на наявному акаунті).
34 екрани, що лишаються сірими, - це стани, а не потоки: завантаження, порожньо, помилка й діалоги підтвердження тих самих восьми. Стан дешево фарбувати після того, як його екран існує, і дорого - до того.
Що це міняє для етапу 09: дизайн-система перестає описувати 28% продукту й починає описувати канал, навколо якого продукт побудовано. Шість файлів організмів, які сьогодні не мають колірного блоку взагалі, отримують перший кольоровий екран, на якому їх можна заміряти. A13 закрито як питання обсягу й відкрито як робота.
Крок 7.90 зняв btn--l з головної кнопки шухляди в design/cart.html і design/cart-oos.html - двох продуктових екранах, які малюють цей підвал, - і відзвітував 64 -> 52, замірявши висоту на обох. Власник відкрив design/kit/cart-drawer.html, стенд цього ж організму, і кнопка там була 64.
Обидва твердження правдиві. Стенд несе власну копію розмітки, зняту з design/cart.html тоді, коли стенд генерували на 7.86, а рамка демо несе третю. Правка, написана в розмітці, не їде далі; правка, написана правилом, їде, - і саме це CLAUDE.md вже каже вголос («виправляти правилом, а не редагуванням одного файла руками: ручна правка не переживає наступного клонування»). 7.90 вписав ручну правку у два файли з чотирьох, і причина, з якої він так зробив, лишається чинною: розмір контрола обирає той, хто його ставить. Бракувало не правила, а перевірки - ніхто в оснастці не питав, чи стенд досі збігається з продуктом, який він фотографує.
І найгірше тут не застарілий піксель. Власний текст стенда, на три рядки нижче демо, уже казав «L -> M, 64 -> 52». Сторінка суперечила сама собі, і неправою була саме картинка.
Перевірка, написана й запущена. Для кожного елемента з класом btn* - design/*.html з одного боку, design/kit/*.html і design/kit/demo/*.html з іншого - ключем береться його власне характерне ім'я, а порівнюється набір класів btn*. Це перевірка фотографії, а не стилю: чи показує стенд той розмір і ту обробку, що показує продукт. Вона знайшла ще три, усі справжні, усі виправлені:
| Де | Що казав стенд | Що каже продукт |
|---|---|---|
kit/toolbar.html | .mc як btn--outline btn--s btn - S, 40px | btn--outline mc - M, 52px, і .mc несуть обидві кнопки ряду, а стенд у другої його втратив. Підпис стенда весь час казав «висота 77», а демо стільки не мало |
kit/restock-note.html | .oosbtn на контурному сабміті контактного рядка | .oosbtn це акцентна «🔔 Повідомити про надходження» в .buyrow; у сабміта контактного рядка імені немає взагалі. Стенд показував контурну кнопку під іменем акцентної |
kit/button.html | приклад у настанові: btn--accent btn--l co-confirm | btn--accent btn--l btn--full co-confirm - приклад загубив ширину, яку продукт справді ставить |
Чого перевірка не робить - сказано вголос
Лише кнопки; ключем береться перше характерне ім'я, тож елемент без такого імені пропускається; і за «продукт» вона береdesign/*.html, тож розмітка, яку скрипт будує на льоту - cat-overlay, діалог міста, тости, - лишається поза нею. Кнопку несуть 36 продуктових ключів, і саме вони покриті. Після чотирьох виправлень розбіжностей 0.І прохід, який із цього виріс: усі стенди, обидві ширини, два питання
Прохід 7.88 відкривав 24 стенди організмів. Цей відкрив усі 83 сторінки вdesign/kit/ на 390 і 1280 - 166 завантажень - і питав кожен блок .kp-demo: чи малює він щось, і чи стоїть щось усередині за межами власної коробки.
Порожніх - 3, справжніх із них 2. icon.html, демо анатомії, на обох ширинах: три текстові гліфи всередині .uiv-ic, ширини 22, 20 і 10, а висота нуль - демо було 50px відступів і більше нічим. Атом при цьому поводився правильно: .uiv-ic це display: flex з line-height: 0, і розмір коробка бере від SVG усередині, якого текстовий знак не дає. Перший рядок тієї ж сторінки каже «обгортка навколо inline-SVG» - демо суперечило ліду. Перебрано на data-glyph. view-toggle.html на 390: .vtoggle живе в .ltool, а вона display: none до 860, тож на телефоні демо не малює нічого - і продукт поводиться так само. Не дефект, а порожнеча без пояснення; тепер пояснена.
| Форма | Рядків | Що це |
|---|---|---|
.sech +8 | 6 | button, qa-item, section-head, обидві ширини. Уже є в інвентарі вміщення 7.89 як відома форма |
.lprice-col +37 / +12 | 3 | product-card, discount, price на 390. Справжній дефект продукту, а не артефакт стенда |
.btnset +18 | 1 | button на 1280, і на базовій лінії HEAD рівно те саме - 906 клієнтських проти 924 скролу на обох серверах. Було до цього кроку |
.lfav +6 | 1 | product-card на 1280. ::after{ inset: -12px -6px -12px -13px } серця - описане розширення цілі 18x20 -> 37x44, яке виходить за коробку навмисно |
| не перевірено | 7 | badge .lph, який дав +13 на одному проході й +16 на наступному - єдиний рядок проходу, чиє число зрушило, і пояснення в нього немає, skeleton +10 на div без класу, stack-action .ti +9, trust-strip .cs-th +6 (уже в списку 7.89). Поштучно не перевірені, і сказано саме так, а не зараховані в чисті |
.lprice-col - дефект продукту, і числа однакові в обох шарах
.pcard-l це grid-template-columns: 84px 1fr auto auto; від 559 і нижче вона стає 56px 1fr, тож четверо дітей переносяться, і колонка ціни падає в 56-піксельну доріжку фото. Заміряно на design/listing-list.html при 390 - на продукті, не на стенді: clientWidth колонки 56, scrollWidth 93, бо «1 520 ₴ −15%» просить 93, а колонка оголошує white-space: nowrap. На design/kit/product-card.html числа ті самі. Сторінку вбік це не везе - текст малюється поверх сусідньої комірки дій, - тож усі проходи, які питали про сторінку, а не про коробку, його не бачили.
Тут не виправлено, і навмисно. Будь-яка проста лагодка рухає доріжку, спільну з рядом фото: minmax(56px, auto) розширює колонку фото до 93 і зсуває заголовок на 37 праворуч; grid-column: 1 / -1 виносить дії в третій ряд і робить кожну картку вищою. Це рішення про розкладку з видимою ціною в обидва боки, воно не є регресією цього кроку, і вигадати його наприкінці кроку про розсинхрон копій - це рівно той спосіб, яким значення потрапляє в систему без рішення. Етап 09, як рішення.
І сліпа пляма перевірки, знайдена, поки виправляли знайдене нею
Вона ключить елемент його ж характерним іменем - тож елемент, у якого стенд це ім'я загубив, для неї невидимий. Кнопку сортування.ltool на стенді написано btn--outline btn--s btn, а в продукті btn--outline btn--s ctrl: рендер той самий, бо ні .btn, ні .ctrl не оголошують геометрії, - але ім'я інше, а btn перевірка з ключів викидає. Знайдено рукою. Вирівняно з продуктом разом із .count, який загубив ctrl так само.
І одне твердження під цим теж виявилось хибним. Стенд тулбара казав, що дві смуги різняться на 20px через відступи, «обидві тримають btn--s, тобто коробку 40». Мобільна половина - неправда. Заміряно в design/listing.html: 57 = 1 волосина + 16 поле + 40 контрол; 77 = 12 + 52 контрол + 12 + 1 волосина. А під арифметикою стоїть рішення, яке код робить і ніде не каже: на телефоні контроли смуги це M, на десктопі S. Більша ціль - на пристрої, якого торкаються.
Одне значення поїхало разом із цим
.cd-cont носив btn--l і після того, як 7.89 зробив із нього посилання. З чотирьох речей, які btn--l оголошує - min-height: 64, поля, border-radius: 12, font-size: 18, - перші три перебивало власне правило підвалу, тож приземлявся лише кегль: на десктопі друга дія читалась 18, а головна над нею - 16. Змінна -> значення -> чому: font-size другої дії шухляди, --fs-18 -> --fs-16, бо на 7.89 цей контрол перестав бути кнопкою, а клас розміру, який приземляє одну властивість із чотирьох, це оголошення, що вдає рішення. Заміряно після: 16px на 320, 360, 390, 430 і 1280.
Підвал, переміряний на тому самому в'юпорті 700, на якому взято всі попередні числа: 207px у cart.html на всіх п'яти ширинах, 254 у cart-oos.html з його додатковою нотаткою, головна 52, друга 39, а scrollWidth - clientWidth підвалу, шухляди й сторінки - 0. Рамка стенда тепер читає ті самі 207 / 52 / 39, що й продукт.
«Тапаю Каталог - не підсвічується» і «верхня смуга перекриває закрити й назад». Два повідомлення в одному, два різні файли, одна форма під ними.
Вкладка
wfCatTabEl() читав .wf-tab[href="../../wireframes/catalog-page.html"] - точний літерал. У кольоровому шарі uivFixLinks переписує це посилання на відносний шлях, тож селектор не збігався ні з чим, і openCatOverlay() вішав catov-open на ніщо. Клас був правильний, правило, яке його читає, правильне, а елемент його не отримував ніколи. Тепер селектор читає форму: вкладка, що відкриває накладку, це вкладка, яка несе її обробник.
І друга половина - у tabbar.css. .catov-open читав лише mega-menu.css і лише для чорнила СЛОВА. Смужку цей файл давав тільки [aria-current="page"], тож навіть із класом вкладка, що стала поточною, не мала жодної позначки, - а сторінка під накладкою тримала свою смужку й казала читачеві, що він там, звідки пішов. Тепер обидва стани в одному рядку, умова написана один раз. Перевірено на трьох екранах, відкрито й закрито: смужка рівно одна і на правильній вкладці в обидва боки.
Накладка
.wf-catov була fixed; top: 0; z-index: 49, а .uiv-topbar оснастки це fixed; top: 0; height: 40; z-index: 92. ✕ накладки сидить на 12..40 - цілком під смугою, - і elementFromPoint у його центрі повертав шеврон смуги: тап відкривав список екранів замість того, щоб закрити каталог. --shell-top існує рівно для цього, і .cart-ov, .cart-drawer, .auth-ov та .wfh читають його з кроку 7.26 - ця панель у той прохід не потрапила. Після: накладка від 40, ✕ на 52, elementFromPoint повертає BUTTON.cx.
Це п'ятий і шостий випадки однієї форми за цей етап - після тринадцяти селекторів кільця фокуса, UIV_SIGN_ONLY, одинадцяти іменних викликів у Escape і шести id у uivIcons. Літерал і список панелей, який вели рукою, - і в обох випадках те, що додали пізніше, лишилось поза ним.
Одне число лишили як є, свідомо
.wf-catov{ bottom: 57px } це висота таб-бару, набрана константою, і вона розійшлась: заміряно на 390, .wf-tabbar має 59. buy-bar.css набирає ту саму смугу як 61. Два файли, два числа, одна смуга, а смуга власної висоти не оголошує - вона складається з відступів. Токен це рішення про значення; вигадувати його всередині виправлення бага - спосіб, яким значення потрапляє в систему без рішення. Етап 09.Власник назвав хід: підказка «Знижка й бонуси» стояла окремим рядком, а окремий рядок коштує власної висоти плюс власного відступу. Її місце - під словом «Разом», у тій самій колонці, із сумою збоку від обох, і сума на щабель менша.
Написано на .cd-foot, і розмітка не зрушила. .cd-total стає display: contents, і його двох дітей розставляє сітка підвалу: слово в колонку 1 рядок 1, сума в колонку 2 через обидва рядки й по центру, підказка в колонку 1 рядок 2. Між словом і підказкою відступу немає - вони одна пара, а повітря під парою належить дії, де його вже тримали .cd-cont і .cd-blocked.
Змінна -> значення -> чому: кегль суми --fs-30 -> --fs-24. 24 це щабель, який у шкалі вже є нижче 30, а не число, обране тут. Сума перестає бути найвищим у підвалі й стає врівень із двома рядками поруч - саме це й дозволило рядку ввібрати підказку.
| Крок | Висота | Частка екрана 800 |
|---|---|---|
| до 7.88 | 256px | 32% |
| 7.89 · друга дія стає посиланням | 219px | 27% |
| 7.90 · головна L -> M | 207px | 26% |
| 7.93 · підвал стає сіткою | 181px | 22,6% |
І рамка стенда показала 181 одразу
Чотири файли малюють цей підвал, і жодного з них не редагували. Це вся A14, сказана в позитиві. «Немає в наявності» - 227 зі своєю заблокованою дією; на 320 підвал 200, бо підказка переходить у два рядки;scrollWidth - clientWidth нуль на підвалі, шухляді й сторінці на 320, 360, 390, 430 і 1280.tools/dry-run.mjs - перевірка, яка заміняє розкотку, бо на цьому етапі її немає. 54 сірі екрани без кольорового двійника проти 1 153 класів, які оголошує система: 228 класів у 79 сім'ях без компонента. Форма цього числа і є знахідка, а не саме число.
| сім'я | класів | екранів | що це |
|---|---|---|---|
info-* | 8 | 6 | сторінка контенту: тіло, картка, статистика, кроки, зміст, «оновлено» |
q-* | 35 | 1 | квіз |
op-* | 24 | 2 | замовлення оформлено |
ov-* | 12 | 1 | оверлей підказок пошуку |
loy-* | 12 | 2 | сторінки лояльності |
| решта 74 | 1-10 | 1-4 | власний блок одного екрана |
Рівно одна сім'я перетинає більше двох екранів. info-* обслуговує шість контентних сторінок, а власне правило драбини каже, що патерн потребує трьох. І найбільша купа - та, якій не можна формувати систему: q-* це квіз, який locked-рішення 2 кладе в post-launch.
Відкладено навмисне, і це інше, ніж пропущено
Порт можливий сьогодні:wireframes/content-about.html несе 17 правил info-* у власному <style>, тобто те саме джерело, з якого прийшли всі 84 компоненти. Спиняє інший кінець. Шість екранів досі сірі, тож компонент, зроблений зараз, не носив би ніхто - а «клас, якого ніхто не носить» це третій список зводу, чия робота такі компоненти ВИДАЛЯТИ. Компонент і екрани, що його носять, приходять разом, на етапах 09-12.Перейменування не рухає пікселі й не є рішенням про мову. Воно чекає, доки візуальна мова стане.
| Одна ідея, два імені | перше | друге |
|---|---|---|
| замовлення як рядок | .aord-* · 1 екз. | .oh-* .ord-* · 4 |
| плашка «основна» на адресі | .adef .tag · 1 | .addr-tag · 3 |
| плитка товару | .t · i | .ph · .gthumb |
| слово в рамці, яке веде у відфільтрований каталог | .flink · 12 | .relbox · 10 |
Останній рядок заміряно поруч, на одному екрані (7.80): край, фон, кегль і гарнітура збігаються - rgb(217,217,217), біле, 14, Inter, - а п'ять речей ні: 131x40 проти 93x48, відступ 8/12 проти 12/16, радіус 100 проти 8, вага 600 проти 700, чорнило rgb(28,28,28) проти rgb(91,91,84). Обидва - <a href="listing.html">. Довід на користь різниці є (рейка звужує цей список, підвал веде в інший), і в коді його ніде не сказано.
Одне ім'я, дві ідеї - десять штук: .cb це квадрат прапорця і блок сертифіката; .sr це рядок підсумку і префікс .sr-live, живої області для скринрідера; .ci, .tag, .ct, .cur, .new, .old, .cut - кожне по два значення.
Чотири класи є в розмітці й немає в жодному листі: .ob-main і .ob-side, по 4 екземпляри - клітинки сітки; .pd-block, 8 екземплярів на двох найчитаніших екранах магазину; .loadmore, 7 на семи екранах. Нічого не зламано - працює елемент, а не ім'я, - але той, хто шукатиме правило, не знайде його. .loadmore м'якший випадок: гачок для поведінки, якої ще не написано, це прийнятна причина для класу без правил.
B4 · Кнопки поза набором кнопок знайдено на 7.61
Крок 6.7 замінив 56 власних імен кнопок одним закритим набором, і перепис 7.61 каже, що набір ще не закритий. Рахуючи лише контроли, чиє слово - вилучення: 17 із них не носять ізbutton.css жодного класу. Усі сімнадцять тримають дві форми: вилучення рядка в .co-line .li-acts, яке checkout-form.css малює руками шістьма оголошеннями, і ✕ на чипі фільтра. Жодна не руйнівна за змістом розділу C, тож дефекту ніхто не побачить - але це рівно та форма, яку крок 6.7 і мав закінчити, і перепис, що поставить те саме питання про інші слова, знайде ще.Двадцять п'ять знахідок називають стан, якого не малює жоден екран: дванадцять до кроку 7.74, шість зі стендів 7.75 - 7.77, три з 7.78 - 7.80 і чотири з останніх п'яти молекул на 7.81 - 7.83. Це не робота css - це екрани, і вони належать тому, хто вирішує обсяг.
| Стан | Де | Що зараз |
|---|---|---|
| відгуків ще немає | product-reviews.html | зведенню оцінки нічого зводити |
| історії покупок немає | нотатка про поповнення | новий покупець бачить блок без рядків |
| адрес немає | account-addresses.html | список порожній і без слів |
| замовлень немає | account-orders.html | вкладки стоять над нічим |
| фото немає | галерея | рамка показує «фото товару» блідим |
| складу немає | таблиця складу | таблиця з порожніми клітинками |
| розділ порожній | будь-який .sech | 37 заголовків, 28 виходів, і нічого про порожній |
| сигнал не підтверджено | смуга довіри | сертифіката на партію немає, смуга все одно його обіцяє |
| максимальний щабель · порожній реєстр | лояльність | є в сірому, немає в кольорі |
| замовлення скасовано | рядок замовлення | у коді три стани, у шляху щонайменше чотири |
| опису немає | блок опису, product | блок просто відсутній, і хто його ховає, у коді не сказано |
| питань ще немає | секція «Питання» | заголовок стоїть над нічим |
| на питання ще не відповіли | .qaitem | усі відповіді в коді - магазину; «чекає» не має ні вигляду, ні слів |
| остання сторінка | пагінатор | стрілка «далі» на 4-й із 4 виглядає й натискається як на 1-й |
| після натиску «Показати ще» | пагінатор | немає ні завантаження, ні «це все» |
| за фільтром нічого | рейка, listing-empty | рейка виглядає так само, і жоден фільтр не позначений як той, що обнулив видачу |
| сертифіката на партію немає | смуга довіри й мініатюра | аркуш із печаткою малюється незалежно від того, чи є документ за ним |
| жоден логотип не завантажився | ряд брендів | шість слів у рамках читаються як зламаний блок, і цього ніхто не помічає |
| повідомлення, яке не можна пропустити | тост | 4.2 секунди й aria-live="polite": помилку, що блокує оформлення, можна не побачити й не почути |
| «Знайдено: 0» | смуга каталогу | над порожньою видачею виглядає так само, як над повною |
| цю ціль обрано | плитки цілей | плитка не лишає сліду; повернувшись, людина починає спочатку |
| ви вже тренер | банер тренера | «Ви тренер?» показується всім, зокрема тренеру |
| опису категорії немає | SEO-блок | блок лишається із заголовком і без тексту |
| ЗАКРИТО на кроці 7.61 |
Останній - першим, і його зроблено крок 7.61
Рекомендація була саме така: руйнівна дія, яка виглядає як будь-яка інша кнопка, - єдиний рядок цієї таблиці, що може коштувати людині чогось. Фініш є..btn--danger це модифікатор над --outline і --text, він бере родину небезпеки, якою вже малюють дев'ять інших файлів, і лягає на десять контролів, чий натиск не відкотити. Заміряно після: дев'ять екземплярів на двох екранах із сорока, коробка не зрушила (140x52 до і після), сірий прототип не зрушив, а підтвердження, яке віддається disabled, лишилось сірим у всіх чотирьох станах. Підтвердження, якого рекомендація теж просила, виявилось наявним - три діалоги, які будує wireframes/_nav.js. Бракувало тільки фінішу. Двадцять чотири рядки вище лишаються відкритими, і в шести нових є візерунок, якого не було в перших дванадцяти: п'ять із шести це ДАЛЕКИЙ кінець списку - опису немає, питань немає, відповіді ще немає, остання сторінка, «це все». Прохід добре бачив порожній початок речі й не бачив її кінця, а кінець - це там, де людина вже все прочитала і все ще не вирішила. Повний розбір - на стенді Кнопка.[?]CLAUDE.md: вигадане число отруює кожен етап нижче. Ці намальовані справжнім текстом на справжніх екранах:
- цикл споживання - «зазвичай вистачає на ~30 днів»
- пороги лояльності, відсотки знижок, ставка нарахування - кожна цифра на екрані лояльності
- відсоток тренерського тарифу
- тарифи доставки
Відкладено власником на кінець усіх етапів (12.08.2026)
Не «колись», а конкретно: ці чотири чекають, доки етапи скінчаться, і закриваються разом. Чекати нічого не коштує з причини, написаної в цьому ж розділі - той[?], що несе власний замір, закривається одним реченням, а той, що не несе, коштує окремої сесії в браузері. Усі чотири свій замір несуть. Чого не можна робити тим часом: читати будь-яке з цих чисел як факт на етапі нижче. CLAUDE.md: вигадане число отруює кожен етап під собою, а число, якого власник ще не дав, - вигадане, хоч би яким розумним воно виглядало.| Що | Стан |
|---|---|
| панель фільтрів | у кольорі design/_nav.js дає 201 рядку роль, зупинку табуляції, aria-checked і пробіл (7.34). Сірий шар тримає весь дефект |
| два механізми прапорця | системний - це <span class="cb"> без input, оживлений скриптом. Два місця вживають справжній <input type="checkbox"> і малюють коробку операційної системи. Жоден файл не каже, який канонічний |
Роль обіцяла кнопку, яку ніхто не міг натиснути. Заміряно до правки на трьох екранах товару: 12 мініатюр, 12 із роллю, 12 з ярликом, 0 із зупинкою табуляції і 0 з обробником клавіш. Ще чотири на product-loading.html - скелети .skpulse, і в них нема ні ролі, ні фокусу навмисно: заглушку не фокусують. Дано tabindex="0" і Enter/Пробіл. Перевірено клавіатурою: до правки .focus() віддавав індекс -1, а Enter не робив нічого; після - фокус сідає на третю, Enter переносить on з 0 на 2 і головне фото змінює transform з none на 1.75. Не зроблено роллю tab, хоч так читалося б точніше: це вже рішення про поведінку, а не ремонт | |
aria-label | Правила ставили не те питання. Речення інтерфейсу вжите як селектор, а тим реченням володіє voice, не цей файл. До чого вони насправді тяглися - заміряно: .ei трапляється в продукті сім разів, і чотири з них - емодзі (коробка, серце, попередження, візок). Інші три тримають фотографію, і кожна з тих трьох стоїть усередині однієї з двох поіменованих секцій, а більше жодного .empty .ei ніде немає. Отже ярлик заміняв один простий факт: у цій ілюстрації є зображення. Це каже :has(img) - його не зламає перейменування і він не вимагає класу. Правило .sech тієї ж форми: desc-block.css:14 уже дає .pdesc ті самі max-width:800px; margin-inline:auto, тож сенс - «голова колонки опису бере міру колонки», і це каже .sech:has(+ .pdesc). A/B: нульовий прохід 0, різниця 0. А ще ті два правила дещо ховали: вони були побайтно однакові, окрім двох чисел - 126/118 і --space-8/--space-4 - для того самого круглого обличчя, у тій самій коробці, з двох файлів 1024×1024 з однаковим кадруванням. Спільне правило взяло 118 і --space-4 (так уже малюють двоє з трьох), третє лишилось одним рядком і класом, тож не зрушило нічого. Чи має той рядок існувати - рішення власника: це форма A6 у меншому масштабі |
Дві таблиці стилів писали слова, які чують. Згенерований вміст потрапляє в дерево доступності, тож content - не тільки малюнок. Перевірено всю систему: вісім файлів малюють рядок, і рівно два з восьми чути. cert-thumb.css давала посиланню ім'я «переглянути сертифікат (PDF) PDF», badge.css:69 - «фото ★ ПОПУЛЯРНЕ», двічі на listing.html. Обидва полагоджено формою альтернативного тексту content: "PDF" / "": дереву дістається порожній рядок, жоден піксель не рухнувся (звірено властивість за властивістю на обох серверах). Правила, що розділяє почуте й мовчазне, у коді немає: обидва почуті сидять у посиланні, але ✦ рядком нижче теж, і мовчить. [?], заміряно поекземплярно. «Детальніше» в order-row.css мовчить і від цього не стає правильним - це повне слово інтерфейсу в css, і воно належить voice: крок 6 | |
Перший крок по організмах пішов до тих одинадцяти з двадцяти чотирьох, яких у спокої не існує. Заміряно справжньою клавіатурою на восьми, що рендеряться: фокус заходив у панель 0 із 8 разів, п'ять Tab давали 0 із 40 зупинок усередині, Escape досягав 6 із 8. Чотири з них несуть aria-modal="true" - тобто кажуть читачу з екрана, що решта сторінки інертна, поки клавіатура крізь неї проходить; у діалозі міста 34 контроли, і жоден не досяжний без миші. Полагоджено одним проходом, ключеним на форму: .open + position: fixed + ненульова висота + хоча б один видимий фокусований усередині. Форму перевірено проти кожного елемента з .open, який продукт узагалі вміє показати, ще до того як правило написали: ловить вісім панелей і правильно лишає осторонь три скрими, два інлайн-меню й мовне. Після: 40 із 40 зупинок усередині, 8 із 8 закриваються Escape, фокус повертається на той самий контрол, що відкрив. Ролі й aria-modal п'ятьом панелям без них не додано: .wf-drawer це <nav>, і назвати його діалогом - рішення про семантику, а не ремонт поведінки | |
Кільце вмикається поіменно. Прочитано з таблиць стилів: 24 правила оголошують кільце, і вони покривають кожен фініш кнопки, чипи, прапорці, радіо, перемикач, лічильник кількості, поле, OTP, крихти, пункти меню, перемикач вигляду, обране, рейтинг, дію стовпчиком, шапку групи фільтра й повзунок. Посилання покриває link-row.css списком із тринадцяти селекторів, написаним рукою. Тобто компонент без фінішу кнопки, який у той список не потрапив, дістає браузерне кільце за замовчуванням - і це не чиясь позиція, а те, що перелік робить з усім, що додали після нього. Сьогодні поза списком п'ять: .gtile (48), .blogcard (36), .brandbox (24), .relbox (10), .certthumb (3). На index.html плитка цілі й кнопка за сорок пікселів від неї малюють різні кільця, і системне тільки одне з них. Питання лишається власника, але тепер воно гостріше: кільце належить формі чи списку? | |
Рядок нижче просив прохід клавіатурою, бо програмний .focus() не вмикає :focus-visible. Зроблено на трьох компонентах: .relbox, .brandbox і .certthumb отримали фокус натисканням Tab, :focus-visible справді збігся на всіх трьох - і всі три носять браузерне синє rgb(0, 95, 204) без жодної тіні. Це ті 66% у конкретиці: три посилальні компоненти, три браузерні кільця, а власне кільце системи оголошене й не вжите | |
:visited · :active частково хибний рядок | :visited справді немає ніде. А от «:active немає в чипів» - неправда: chip.css:153-157 несе .chip:active, .dr-chip, .hero-chips a, .flink, .mgchip, .ptab, .ord-tab, .cegoals button, .afilter .x, а :220 - ті самі у стані .on. Хтось із пізніших кроків це закрив і рядок не оновив. Лишається правдою для перемикача (switch.css, жодного :active) і для пагінації |
Підтверджено дослівно: wireframes/_nav.js:1791 будує <label class="fopt"><span class="cb"></span> ЯРЛИК <span class="ct">N</span></label>, а ім'я мітки - це весь її текст. Озвучене, воно звучить як «в наявності сімдесят один», тобто як значення, а не як підрахунок. Полагоджено комою і більше нічим: число сховане з імені (aria-hidden) і повернуте в явний aria-label, зібраний із тих самих двох видимих рядків. Жодного нового слова не вигадано - текст інтерфейсу належить voice/docs/microcopy.md, а не файлу поведінки; редакція «71 товар» читалася б краще, вимагає правила множини (71 товар, 13 товарів) і тому чекає на рішення voice. Заміряно після: 50 рядків фільтра, усі 50 з іменем, «В наявності, 71», видимий текст не змінився | |
| як малюється фокус НОВЕ, знайдено на 7.72 | Нові зупинки табуляції змусили спитати, що взагалі малює фокус у продукті. Перепис на 40 екранах, лише видимі елементи: 3898 фокусованих. Своє кільце системи бере 1244 (32%), дефолтну синю Chrome - 2591 (66%), нічого - 63. Перший прогін цієї переписі дав 14 989 елементів і 74% «без кільця», і це була закрита мегаменю й закрита шухляда: приховані елементи не фокусуються, а їхній обчислений стиль - дефолт. Виправлено в інструменті. Справжня знахідка - оті 66%: система оголошує --ring-focus і --ring-focus-control, а дві третини фокусованих беруть браузерне. Про 63 «нічого» нічого не стверджую: програмний .focus() законно не вмикає :focus-visible на частині елементів, тож їх треба обходити табуляцією, а це інший інструмент |
Дві штуки з дев'яноста восьми. Обидві рухають пікселі. Обидві закрито на кроці 7.60 - тому самому, що написав цей файл, - і A/B заміряв рівно два передбачені зсуви й нічого більше: account-empty.html вищий на 8.00px, account.html нижчий на 10.00px.
| Що | Видима зміна | |
|---|---|---|
| F1 | design/account-empty.html:81 несе style="padding:20px 14px". Інлайн перебиває будь-який лист, а 20 і 14 не на жодній шкалі. Зняти - і коробка візьме власні --space-24 / --space-16 | одна коробка більша на 4px згори і 2px з боків |
| F2 | .rk-item:first-of-type не збігається ні з чим: перший DIV у картці - це .ah. Сусідній :last-child доводить, що симетрія була задумана. Працює .rk-lead + .rk-item | перший рядок поповнення підтягується на 10px згори |
Цей прохід двічі витратив кроки на форму, яка виявилась системою, що працює як задумано. Записано, щоб не сталось утретє. На 7.75 перепис дав ще чотири такі форми одразу - і жодна не стала кроком, бо їх спитали в браузера до того, як виправляти.
Це не дублікати
- Значення в секції структури й воно ж у секції кольору - це поділ етапу 08. 22 пари. Заголовок кожного файлу каже це вголос
- Груповане правило, а потім правило для одного з його імен - база й перекриття. 32 пари
- Оголошення, побите власним модифікатором, не мертве:
.emptybox.mini,:nth-child,.oh-thumbs i.more - Оголошення, побите інлайном від скрипта, не мертве, коли скрипт дає дані, яких лист знати не може - галерея бере чотири кадри одного знімка з
_nav.js:918. 7.76 загострив перевірку до питання: інлайн ставить ДАНІ чи ВИГЛЯД? Скрипт писав п'ять властивостей на.pd-img: одна називала, яке фото (дані, лишається), чотири - як намальована коробка (вигляд, поїхали вdesc-block.css). Три з чотирьох повторювали лист, а четверта йому суперечила: у файлі стоялоcontain, і воно не намалювалось жодного разу - Скорочення з
background-image: none, побите пофотографійними правилами, це запасний варіант, а не мертвий рядок.blog-card.css .blogcard .bim- 36 збігів, 0 перемог, бо в усіх трьох карток своє фото через:nth-child. Це те, що дістанеться четвертій - Четвертий список, написаний рукою, і перший, що досі коштував пікселів - 7.87.
uivIconsобходить шість поіменованих id і більше нічого, тож будь-який блок поза ними лишається з емодзі прототипу. Заміряно на діалозі клієнта: 12 текстових знаків, три з них видимі в спокої. Після того як його попросили обійтиbody, 10 із 12 стали знаками, а два - ні:🔳і🚚не входять до жодної карти, і це діра в НАБОРІ, а не в проході - Значення, що йде в код, - це синтаксис; значення, що йде в атрибут, - це текст - 7.87.
wireframes/_nav.jsбудувавonclick="wfPickCity('...')", вставляючи назву міста в рядок JS усередині HTML-атрибута. Одне з двадцяти чотирьох міст - «Кам'янець», і його апостроф закривав рядок: клік кидав помилку на всіх 34 екранах із цим діалогом. Тепер значення йде вdata-city, а один делегований слухач читає його назад - Прив'язувач ставить собі прапорець, а знята розмітка несе той прапорець із собою - 7.87. Кожен
wf*іuiv*пишеdata-wfcart/data-wfqty/data-uiv*на елементі, який уже підключив. Знята з живої сторінки розмітка несе його, тож у свіжій рамці прив'язувач виходив, нічого не підключивши: лічильник малювався бездоганно й не відповідав ні на що. Демо, яке показує контрол і не запускає його прив'язувача, показує те, чого в продукті немає - Рамка, яка масштабується, щоб уміститись, перестає читатись раніше, ніж перестає вміщатись - 7.87.
min(1, avail/declared)клав демо на 1180 у колонку 332 при k = 0.28, і 16px тексту малювався по 4.5px. Тепер підлога 0.62, а нижче обгортка їде вбік: смуга прокрутки чесна, літера в 4.5px - ні. Той самий скрипт забув про поля, у яких стоїть, і зрізав останні 2px на всіх 48 рядах - Драйвер перепису спиняє кожну анімацію, і вирішувача теж - 7.86.
cdp.mjsвкидає*, *::before, *::after{ animation-play-state: paused !important; animation-delay: 0s !important }на старті документа; крок 7.51 поставив це туди, щоб нульовий прохід не повертав 56 рядків рухомих кадрів. Ціну не записали: жодного твердження про рух цим приладом зробити не можна, а вирішувач, який іде через той самий драйвер, звітує правило самого приладу як переможця над кожнимanimation-*у продукті. Чотири з 193 знахідок «не виграє ніде» були рівно цим. Контрольна анімація, створена в сторінці під час заміру, теж читаєтьсяpaused- так і спіймали - «Чи є елемент ширший за в'юпорт» - неправильне питання - 7.86. Усередині горизонтального скролера так і має бути. Питання, яке збігається з тим, що відчуває людина, це
documentElement.scrollWidth > innerWidth. Неправильне питання роздуло A11 і, гірше, два кроки показувало не на той елемент - Перепис, що групує за префіксом, треба навчити всім префіксам - 7.86. Родини токенів у зборі були написані з пам'яті й проґавили шість, тож
--scrim-*,--veil-*,--fade-*,--tint-*,--ring-*і--fill-*не потрапили в ЖОДНУ колонку кожної згенерованої таблиці токенів:overlay.css, чиє існування цілком стоїть на--scrim-overlay, читався як «0 семантичних ролей». Префікси перерахували зtokens.css, а не пригадали - Рамка не має перемальовувати те, що обрамляє - 7.86. Перше правило стенда для панелей розкладало їх у потоці (
position: static; inset: auto), щоб вони не накривали сторінку. Одинадцять із них склались у нульову висоту, бо панель, поставлена черезinset: 0, власної висоти не має, щойно в неї забрати позицію. Механізм, який працює, не чіпає жодного оголошення: трансформований предок стає дляfixed-нащадка тим блоком, від якого рахуєтьсяinset. Він не ловить94vw/86vh, і стенд це каже, а не вдає - П'ять меж заміряно власними ширинами і визнано здоровими (7.81): 620 і 960 у плиток цілей, 720 у ряду статей, 860 у двох смуг і рейки, 760 у SEO-блока. По одній ширині з кожного боку кожної межі: кожне правило перемикається рівно на своєму пікселі, і жодна ширина не малює суміш вузького й широкого. Саме це 7.64 виправляв у картки товару на 620. Не відкривати за підозрою - тільки перезаміром по смузі
:nth-childі:nth-of-typeне взаємозамінні, і система вживає обидва - один раз правильно, один раз ні. Уblog-card.cssпрямі нащадки ряду це завжди.blogcard, тож рахунок збігається з позицією. Уrestock-note.cssу картці є ще й шапка, тож чергування зсунуте на одиницю й тримається випадково (пункт F2). Один прийом, протилежний результат - причина не змітати жоден із двох- Стандартні ширини перепису не бачать смуги між точками перелому. 360 і 1280 роблять правило в
(min-width: 620px)схожим на мертве, якщо для того самого селектора є(min-width: 960px): на 1280 виграє друге, на 360 не діє жодне, а між ними ніхто не міряє. Вирішувач 7.75 доповівgoal-tile.css @620 .goaltilesяк «збігів 4, перемог 0»; воно виграє від 620 до 959. Той самий урок, що на 7.70: смузі потрібні власні ширини --size-40- це щабель драбини. 7.58 назвав кнопку 40px «поза драбиною»; це рівно.btn--s- Сірий прототип не заморожений архів. Усі 40 кольорових екранів вантажать
wireframes/_nav.jsзаради поведінки - І він не поза прийманням (7.84). Дев'ять кроків свип казав «боковой прокрутки немає» на 356, потім 372, потім 408 парах, і жодна з них не була сірим екраном. Перевірка, яка не відкриває теку, не може її очистити
doneу реєстрі означає «сторінка існує», а не «етап завершено». Вжите в другому значенні, воно зробилоdesign/kit/overview.html- готовий і редагований щодня - тегом<span>, тобто вітрина була недосяжна з бічної панелі проєкту, який вона документує- «Хто саме отримує X» тут раз за разом відповідають СПИСКОМ, і все, додане після списку, лишається поза ним. Тричі за цей прохід, у трьох різних файлах: кільце фокуса через тринадцять селекторів у
link-row.css(7.82), карта знаківUIV_SIGN_ONLY, через яку хрестик тоста малювався шрифтом (7.78), і одинадцять іменних викликів у обробнику Escape, через які дві панелі не закривались узагалі (7.85). Список доречний лише там, де членів не можна описати - а тут можна було щоразу: заміряти форму, перевірити форму проти всього, що продукт уміє показати, і ключити правило на неї - Правка в розмітці не їде далі; правка в правилі їде. Кіт тримає другу й третю копію розмітки кожного організму - стенд і його рамку, обидві зняті з продуктового екрана тоді, коли стенд генерували. Зміни продуктовий екран рукою - і копії лишаються там, де були; так сторінка почала казати «64 -> 52» текстом на три рядки вище кнопки, яка малювалась 64. Або зміна йде правилом, або копії пересинхронізовують тим самим кроком і хтось про це каже. Перевірка тепер є, і питання в неї одне: чи носить кожна кнопка стенда той самий розмір і ту саму обробку, що в продукті? Чотири розбіжності на першому запуску, у чотирьох різних файлах, і одну з них першим побачив власник (7.91)
- У властивості з переходом немає одного значення в мить зміни. Знята в ту саму мить, коли лягає клас,
getComputedStyleповертає значення, ВІД якого йде перехід, - тож підпис вкладки читався «неправильним», поки смужка й накреслення поруч читались «правильними», що виглядає точно як одне оголошення блока, яке лягло, і сусіднє, яке ні..tlоголошуєtransition: color .15sдвома файлами вище, навмисно. На t=400 обидва правильні, а правило не було хибним ніколи. Будь-який прохід, який знімає обчислений стиль одразу після зміни стану, читає старе (7.92) NAV_ACTIVE- для сторінок ПОЗА реєстром. Сторінка, яка є в реєстрі й водночас оголошує себе супутником, малює свій рядок двічі
| Що | Скільки |
|---|---|
Було 168, не 167, і design/ не був чистий: одна в kit/docs/btn-census.json, у записаному рядку заміру. Решта - voice 81 · ia 44 · research 24 · wireframes 18, і всі до одної всередині української прози (з_явиться, п_ять, обов_язковий, зв_язки (де _ - це U+02BC)), де U+02BC - поширений вибір, а правило проєкту каже інше. voice/microcopy.html сам це позначив дефектом своїми словами: «Здоров'я» проти «Здоров_я» з U+02BC (різний апостроф!). Замінено посимвольно: 168 замін у 34 файлах, 158 змінених рядків, і в кожному рядку єдина відмінність - апостроф (перевірено порівнянням мінусів і плюсів git diff). У репозиторії не лишилось жодного | |
'Inter', sans-serif літералом | Запис хибний в обох половинах. Не «9 у семи файлах, де є --font-body», а 9 у п'яти, і в жодному з них --font-body не існує. Сім - на сторінках design/concept/*, які не вантажать system/index.css, тільки _nav.css і шрифт із Google: там літерал - єдиний спосіб це сказати. Ще дві - проза всередині <code> на цій сторінці й на стенді «Наявність», тобто опис самої знахідки. У компонентах не лишилось жодної: якийсь пізніший крок їх звів, а запис у трьох місцях досі казав протилежне - тут, у architecture.md і на стенді, який стверджував читачеві неправду. Виправлено в усіх трьох |
інлайнових style= | 74, не 75, у 23 файлах. Найбільше в account-loading (12) і product-loading (7) - висоти скелетів. Оцінка «майже всі дані» лишається в силі |
stack-action.css | Коментарі збалансовані: 15 /* проти 15 */. Структурна перевірка кожного кроку від 7.68 повертає нуль незбалансованих на всіх 76 листах. Рядок або застарів, або не був правдою |
DESIGN-artifacts.md | Висновок правильний, усі цифри застарілі. Ворота «акцент на ціні тільки від 19px bold» тримаються: заміряно всі вісім носіїв акцентної ціни, узятих з одного правила price.css:166-174, а не з вгаданих селекторів. Картка сітки 20/700 на 390 і 24/700 на 1280 (запис казав «card 22 / mobile 19»), картка списку 20/700 («list 21»), акція 30/700, коробка покупки 36/600, вкладка PDP 20/700, панель покупки 20/700, рядок кошика 20/700, рядок оформлення 20/700. Із п'яти названих у записі вціліла одна - «buy box 36»; «shelf 19» називає носія, якого немає, а три справжні (вкладка PDP, рядок кошика, рядок оформлення) у списку відсутні. Коробка покупки проходить розміром, а не вагою: 600 - не bold, але 36px це велике за WCAG незалежно від ваги |
| 803 посилання в нікуди ЗНАЙДЕНО І ЗАКРИТО на 8.18 | 803 з 2882 внутрішніх посилань у design/ не вели нікуди - проти 0 з 1579 у wireframes/, тож усі до одного внесло розфарбування. Четверо воріт їх пропускали, і форму цієї сліпої зони варто назвати, бо вона передбачає наступну: кожен інструмент у tools/ розглядає екран, а мертве посилання нічого не каже на сторінці, яка його несе - 404 стається на наступній, куди жоден прохід не заходить. 650 - одна причина: стенд design/kit/ і його демо лежать на різній глибині й ділять розмітку, тож hero.html:35 в одному рядку пише ../../wireframes/catalog-page.html (вірно) і ../../listing.html (корінь репозиторію). 152 - тираж: кольоровий екран показує на один із 41, які ще сірі; тепер вони ведуть у ../wireframes/, і це перенесення, а не нове рішення - вітрина вже рендерить 193 такі посилання навмисне. 1 - фавікон самого хаба дизайну. П'ята перевірка: tools/links.mjs, і виправлення читається з самого href, а не з набраної таблиці |
Другий урожай кроку, знятий тим самим лічильником, лише навпаки. Патерн - те, що повторилось три і більше разів; правило вживання - те, що не сталося ЖОДНОГО разу, хоча могло.
Заміряно tools/pattern.mjs по 142 сірих і 88 кольорових екранах на 390px, у двох читаннях, і це не одне питання: raw рахує те, що стоїть у документі, rawv - те, що має коробку в цю мить. Різниця сама по собі знахідка: account-profile несе сім елементів із позначкою dark, а чотири з них - кнопки підтвердження трьох закритих діалогів. Кожен рядок нижче каже, з якого читання його число.
Два застереження - частина заміру, а не примітка до нього. Перше: обхід ішов лише на 390, тож .frail і .ltool - десктопна рейка фільтрів і десктопна панель - не видимі ніде в корпусі. Правило про них читається з документа, і лічильник, що дивився б тільки на намальоване, назвав би обидва мертвими. Друге: пак велить рахувати цей підкрок по design/*.html, що суперечить його ж власному правилу двох корпусів двома сторінками вище. По самій кольоровій вибірці «один на екран» було б твердженням про 88 екранів, 34 з яких - стани іншого. У кожному рядку стоять обидва корпуси.
| # | Правило, в термінах класів системи | Клас | Звідки взято | Компоненти | Як перевірити на новому екрані |
|---|---|---|---|---|---|
| U1 | Одна оболонка на екран, і вона викликається, а не пишеться: її будують wfHeader() / wfFooter() | композиція | лічильник: .wfh .wff .wf-tabbar .wf-drawer .wf-city максимум 1 на кожному зі 142 сірих і 88 кольорових екранів, в обох читаннях | header, footer, tabbar, nav-drawer, city-dialog | у документі один header.wfh, і його поставив скрипт |
| U2 | Оболонка не показується в оформленні замовлення і на службовій сторінці | контекст | лічильник: відсутня рівно на 8 сірих екранах - checkout checkout-declined checkout-loading checkout-loggedin checkout-noaddr 500 maintenance overview. Плюс wireframes/docs/conventions.md, розділ 7: «Checkout uses the simplified header (logo + support only) per cart.md, not the full header» | header, footer, tabbar, nav-drawer, city-dialog | на екрані оформлення немає header.wfh взагалі |
| U3 | На екрані входу є шапка й немає підвала | контекст | лічильник: .wff додатково відсутній на auth auth-code auth-error auth-loading auth-newuser, де .wfh при цьому є | footer | п'ять екранів входу, нуль footer.wff |
| U4 | Крихти стоять лише там, де в сторінки є батько | контекст | лічильник: .crumb максимум 1 на тих 111 сірих екранах, що їх мають, і відсутній на 31 - чотири стани головної та index, чотири стани кошика, п'ять входу, п'ять оформлення, чотири мегаменю, два order-placed, 404, 500, maintenance, overview, content-newsletter | breadcrumb | на головній, у кошику, в оформленні й на вході немає nav.crumb |
| U5 | Один порожній стан на екран; коробка порожнечі - на блок, і це інший клас | композиція | лічильник: .empty максимум 1 на своїх 12 сірих екранах, .errbox максимум 1, але .emptybox максимум 3 на account-empty - в обох читаннях і обох корпусах | empty-state | .empty один раз; .emptybox лише всередині картки, ніколи як власна порожнеча екрана |
| U6 | Одна рейка фільтрів, одна панель інструментів, один список | композиція | лічильник, читання по документу: .frail .fsheet .ltool .listing максимум 1 на своїх 12-13 сірих екранах. Читання по видимому на 390 показує .frail і .ltool на нулі екранів - це десктопна половина пари | filter-rail, filter-sheet, toolbar, product-grid | по одному в документі; телефон показує шторку, десктоп - рейку |
| U7 | Один кабінетний рейл на екран | композиція | лічильник: .acc-nav максимум 1 на 44 сірих і 33 кольорових екранах, обидва читання | account-shell | один aside.acc-nav |
| U8 | btn--accent це фініш, а не ранг «головна дія екрана» | композиція | лічильник: видимих .btn--accent буває 13 на одному кольоровому екрані (home-cart) і 3 у сірому, бо акцентну кнопку «У кошик» носить кожна картка товару; власна позначка головної дії сірого шару dark доходить до 5 видимих (coach-client-new). Два документи проєкту суперечать одне одному, і лічильник їх розсуджує: DESIGN.md, рядок 44, каже «One orange per view. ... A second filled orange button on a screen means the screen has not decided which step is the main one», а button.css, рядок 20, каже, що .btn--accent це «the one action of a REGION». Продукт слухає другий, і перший застарів. conventions.md, рядок 130, на боці зони: «Each zone has one main action; the screen's main action is a real <a href> to the next». wireframes/docs/critique.md, рядок 384, уже записав правило зіткнення на етапі 07: «коли на сторінці є кошик-полиця, головна дія належить їй ... .cshelf ~ .pstrip .btn.dark стає контурною» | button, product-card, banner, trust-strip | дві залиті акцентні дії ніколи не стоять одна над одною в одній зоні |
| U9 | Ряд із двох дій береться патерном, а не новим ім'ям контейнера | композиція | лічильник: одна композиція, 70 сірих і 58 кольорових екранів, під 53 іменами контейнера; 19 із них несуть правило в 15 файлах компонентів, а 10 не несуть жодного | action-row (патерн), button, 10 файлів, з яких правило переїхало, і два, з яких воно свідомо НЕ переїжджало - client-dialog і system-page: їхні ряди лишились у власних файлах і названі в patterns/action-row.css у блоці WHAT DID NOT MOVE | новий ряд дій пише class="actions"; відхилення пишеться .x.actions{ } у власному файлі компонента, ніколи на екрані |
Чого тут навмисно немає. Три класи заборон не взаємозамінні. «Тут потрібен не бейдж, а тег» - це заміна, і вона лишається антиправилом на сторінці свого компонента, бо там є що взяти натомість. Дев'ять рядків вище - композиція і контекст: компонент правильний, неправильна його кількість або місце. Жодне з них не записується антиправилом, бо іншого компонента брати не треба, і саме тому вони живуть окремим розділом.
Один автор, два видимі місця. Автор - цей розділ. Сторінки компонентів, які правило називає, несуть підпункт «Обмеження» з витягом і посиланням сюди.
Одне правило, і все нижче - його адресна книга: НОВЕ З'ЯВЛЯЄТЬСЯ В design/system/ СПЕРШУ, ПОТІМ НА ЕКРАНІ. НІКОЛИ НАВПАКИ. Екран не заводить власних стилів; те, чого йому бракує, це замовлення для системи, а не виняток на сторінці. Це речення й відрізняє дизайн-систему від теки зі стилями, і саме тому воно лежить у чотирьох місцях одразу - тут, у кореневому CLAUDE.md, у design/system/CLAUDE.md і в DESIGN.md: у кожного свій читач.
| Що додаєте | Куди це лягає | Коли воно НЕ готове |
|---|---|---|
| Компонент | П'ять речей. 1) design/system/components/<ім'я>.css - колір семантичною роллю, геометрія примітивом, жодного hex і жодного голого числа всередині класу. 2) design/kit/<ім'я>.html з п'ятьма блоками: анатомія, варіанти й розміри, коли вживати, правило й антиправило, стани. 3) Рядок у design/kit/_nav.js у групі СВОГО рівня. 4) Рядок в inventory.md з рівнем. 5) @import у index.css у свою групу рівня, не в кінець файла | Бракує будь-чого з п'яти. Останні два пункти пропускають найчастіше, і причина структурна, а не в недбалості: система вже зібрана, тож дописати файл у кінець здається безпечним. Це рівно те, від чого драбина рівнів розсипається за кілька місяців, і тоді вже ніщо у файлі не каже, у якій групі він мав бути |
| Стани компонента | Чотири на будь-чому інтерактивному - спокій, :hover, :active, :focus-visible - тим самим проходом і одразу в обох темах. Кожен читає токен і не вигадує значення | Стан написаний стилем, а не токеном. Або є лише у світлій. Бейдж, заголовок і роздільник станів не отримують, і на їхніх сторінках так і написано |
| Правило вживання | Рядок у розділі I. Правила вживання із заповненим «звідки взято»: порахували на екранах / ухвалили рішенням вище / зловили критикою. Плюс підпункт «Обмеження» на сторінці кожного зачепленого компонента, з лінком назад сюди | Колонка «звідки взято» порожня - це вигадування під іншою назвою. Або правило живе лише в чиїйсь голові чи лише в чаті: наступного разу воно не спрацює |
| Композиція | Три названі екрани - файл у design/system/patterns/ + сторінка + рядок у групі «Патерни» + рядок інвентаря. Збирається з наявних компонентів, власних стилів не заводить.Два екрани - лишається розміткою і йде в таблицю кандидатів на patterns.html | Не можете назвати три екрани. Або знадобився новий стиль - це означає, що бракує компонента або варіанта, і спершу будується він |
| Значення | У tokens.css своїм рівнем: роль кольору - semantic, сире значення - primitive. Токен стану - одразу в обох темах, і дві половини не дзеркальні: контраст рахується проти протилежного тла, тож темна бере сильніший відтінок, а не той самий | Роль без пари в темній не існує. І значення не з'являється тут уперше: воно приїжджає лінією від DESIGN-artifacts.md і змінюється лише рішенням, сказаним як «змінна -> значення -> чому» |
| Рух етап 11, крок 6 | Три місця, драбина згори вниз. ЗНАЧЕННЯ, яке ділять два і більше файли -> токен у tokens.css (--dur-*, --ease-*, --move-*). Рух ОДНІЄЇ цеглини -> файл компонента. Рух КОМПОЗИЦІЇ - що з'являється, звідки і в якому порядку -> файл патерна.Кожен момент несе одну з ТРЬОХ робіт - зв'язок, статус, відповідь, - і четвертої не буває. Четверта тривалість це рішення власника з рядком у motion.md, а не побічний ефект.Поверхня, що з'являється перемиканням display, потребує allow-discrete + @starting-style, інакше вона не анімується взагалі: display дискретний, у нього немає середини | У файлі екрана transition, animation і @keyframes ЗАБОРОНЕНІ. Момент, для якого не називається жодна з трьох робіт, анімації не отримує - «оживляє інтерфейс» роботою не є. transition: all заборонено окремо: він анімує те, чого ніхто не замовляв. Ціна ламання платиться не тут, а на етапі 12, де двадцять субагентів заведуть по власній тривалості - тому правило лежить у коді (design/system/CLAUDE.md, пункт 7) і перевіряється приладом (tools/motion.mjs), а не тримається в пам'яті |
| Щось на ЕКРАНІ без жодного з чотирьох вище | Заборонено. Те саме правило, сказане з іншого кінця | Локальне перевизначення на екрані невидиме для кожного інструмента в tools/, не переживає перезбірки й знаходиться тим, хто складатиме наступні двадцять екранів - у найдорожчий момент. Чого система не вміє, пишеться в беклог і лишається там видимим |
Коротка редакція цього правила лежить у коді, у design/system/CLAUDE.md - десять рядків, які читаються при кожному вході в теку. Заборона руху у файлі екрана вписана в пункт 7 тих десяти, а не одинадцятим рядком: правило про стан і правило про рух стану це те саме правило, сказане до кінця.
Рядок «Композиція» про рух порожній навмисно
Єдиний патерн системи,action-row.css, власного переходу НЕ отримує. Ряд дій ніколи не з'являється сам: він приходить разом із блоком, який його тримає, а в того блока вже є своя робота ЗВ'ЯЗОК. Дати ряду власний вихід означало б анімувати момент, для якого не називається жодна з трьох робіт.Стенди вказують сюди. Цей файл не вказує нікуди - він кінець ланцюга, і наступне, що з ним відбувається, це рішення.
Порядок, який я рекомендую: C (незворотна дія) - бо це єдине, що може коштувати людині чогось зроблено на кроці 7.61. Далі A1 і A3 - найдешевші з великих обидва зроблено: A1 на 7.62, A3 на 7.63. Далі A2, бо точки перелому множаться самі, поки їх не спинити. A2 частково закрито на 7.64 - написання й дві одиначки; решта - питання власнику. B цілком - після етапу 09, і всередині нього першим B4: там не перейменування, а фініш, відданий контролу, який уже має свій, написаний руками.
Рахунок нижче - станом на 7.71, і він застарів. Перерахунок 18.08.2026 по самому файлу: 25 записів, 12 із них позначені CLOSED у заголовку, 13 ні - серед незакритих A2 (частково), A11-A13, A16-A19 і вся секція B, яка й не мала закриватись до етапу 09. Рядок нижче лишено як запис того дня. Рахунок після 7.71: із 98 закрито одинадцять - F1, F2, C·незворотна дія, A1, A2 цілком, A3, A4, A5, A7, A8 - плюс форма в A6. Лишається 86. Знахідка, що додалась на 7.69, теж закрита: оголошень усередині @media, які повторюють базу під собою, виявилось 17, а не 11 - ширший детектор дивиться в обидві половини файлу, а не лише в кольорову. Три питання чекають на власника: край коробки прапорця 18px, підпис «Повідомити про надходження» на 480-620 і чорнило коробки тренера. До них додається четверте, і його поставив A6: розмір плитки товару - вісім розмірів, і жоден файл не каже чому.
П'ять рядків цього файлу поспіль виявились неправильно прочитаними - A1, A3, A2, A4, A5, і тепер A6 шостим. Щоразу причина та сама: рахунок брали з тексту, а не з поведінки. У A1 помилялась цифра, у A3 - рамка знахідки, у A2 - список одиначок, у A4 - і стеля, і кількість, і одне значення, якого в коді немає, у A5 - число боргів, у A6 - і кількість кадрів, і твердження «жоден не щабель». Це не привід не довіряти списку: він і далі правильний перелік того, що винне. Це причина міряти кожен рядок наново перед тим, як його виконувати, а не виконувати за записом.