Google-скилл modern-web-guidance реальный инструмент
Одна строка CSS оказалась самим ценным исправлением в аудите реального React-приложения: \color-scheme: light dark.
Ахмад Эль-Альфи направил Google-скилл \modern-web-guidance\ на своё собственное Vite + React-приложение из 42 файлов — не игрушечный пример, а реальный инструмент с формами, темами и валидацией — и использовал его как аудитора. Находки хорошо показывают, где обычно прячутся устаревшие паттерны, которые генерируют LLM.
→ **Тёмная тема.** В приложении была зашитая светлая тема, ни одного color-scheme. Без этой одной декларации даже идеально сделанная тёмная палитра оставляет нативные скроллбары и контролы форм в светлой теме — тот самый «белый флэш при загрузке», из-за которого тёмная тема кажется сломанной. Гайд также выступил против переключателя, который строит почти каждый: трёхпозиционный system/light/dark нарушает принцип feedback — два из трёх состояний всегда выглядят одинаково. Правильный выбор — двухсостояние: «следовать системе» / «противоположно системе»
→ **Формы, которые не формы.** Каждый ввод был голым \ плюс \. Практическая цена: Enter в поле не делал ничего — а это рефлекс любого, кто работает с клавиатуры. <p>\ исправляет это бесплатно
→ **Время валидации.** Правило гайда: очищать ошибки на input, проверять на blur, блокировать на submit. Спроси любого чат-бота про валидацию форм — получишь onChange, который ругается с первого же нажатой клавиши
→ **Правило, которое справедливо не применилось.** Рекомендация по autocomplete/inputmode была точной, но нерелевантной — форма состояла почти целиком из радиокнопок. Понять, что правило не подходит к твоему случаю — это суждение, которое инструмент за тебя не примет
Самое ценное: любая рекомендация нетривиальной фичи привязана к **Baseline** — widely-available фичи идут без ограждений, более новые — как light-dark() — сразу с готовым fallback через @supports. Вопрос «безопасно ли это использовать?» превращается из ощущения в сравнение дат.
Честное ограничение: скилл не читает твой код. Он отвечает на вопрос «какова актуальная практика для X» — выявить устаревший паттерн и сформулировать запрос — всё ещё задача твоя или твоего агента.
Полный аудит с кодом у Ahmad Elalfy 👇 https://alfy.blog/2026/07/25/modern-web-guidance.html
