Monochrome — скилл
Доступные компоненты на чистом HTML и ARIA со скиллом и CLI: агент пишет разметку по спецификации и сверяет ее с чек-листом.
- 134 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- CLI записывает файлы компонентов и блок в `AGENTS.md` в вашем проекте.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/monochromeОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- CLI записывает файлы компонентов и блок в `AGENTS.md` в вашем проекте.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Monochrome оживляет правильно размеченный HTML: после одного импорта работают аккордеон, диалог, меню, вкладки, всплывающие окна и подсказки. Состоянием служит сама разметка, атрибуты `aria-expanded` и `aria-selected`, поэтому нет вызовов инициализации и объектов состояния. Стили проект задает свои. Для агентов в пакете лежит спецификация каждого компонента: разметка, клавиши, ошибки и чек-лист для проверки. Команда `npx monochrome init` добавляет в `AGENTS.md` короткий блок, `npx monochrome add menu` выводит заготовку или записывает компонент для React и Vue, а `npx monochrome docs menu` печатает спецификацию. Скилл `monochrome` подхватывается при работе с этими виджетами.
Для кого. Фронтенд-разработчики, которые делают интерфейсы с Claude Code, Codex или Cursor и хотят предсказуемые, доступные виджеты без собственной JavaScript-логики.
Подходит, если
- Агент пишет выпадающее меню или модальное окно, и нужна проверяемая разметка.
- Страницу рендерит поток токенов или `innerHTML`, и обработчики не должны зависеть от монтирования.
- В проекте уже есть свои стили, и библиотека не должна навязывать внешний вид.
- Нужно проверить чужую разметку вкладок или аккордеона на доступность.
Не подходит, если
- Нужны готовые стилизованные компоненты с темами и иконками.
- Требуются сложные виджеты: таблицы, календари, выбор даты.
- Проект не использует ни HTML-разметку, ни React или Vue.
Пример запроса к агенту
Добавь в шапку выпадающее меню на monochrome, возьми заготовку из `npx monochrome add menu` и проверь разметку по чек-листу спецификации.Ограничения
Набор ограничен восемью компонентами и необязательным маршрутизатором. CSS в пакете нет: меню, всплывающие окна и подсказки требуют обязательных правил позиционирования из `spec/styling.md`. Части для React требуют React 19, для Vue версию 3.5. CLI работает на Node.js 20 и новее. С версии 0.18 экспорта `monochrome/react` и `monochrome/vue` нет: компоненты записываются командой `npx monochrome add` в ваш проект.
Как отключить. Удалите пакет командой `npm uninstall monochrome`, блок из `AGENTS.md` и скилл из каталога скиллов. Файлы, записанные командой `add`, лежат в `src/components/ui/` и удаляются вручную.
Частые вопросы
Как подключить библиотеку?
Выполните `npm install monochrome` и импортируйте `monochrome` один раз либо отдельный компонент, например `monochrome/menu`. Команда `npx monochrome init` дополнительно запишет блок в `AGENTS.md`.
Идут ли в комплекте стили?
Нет. Библиотека не содержит CSS, внешний вид задает проект. Исключение составляют правила позиционирования для меню, всплывающих окон и подсказок.
Где спецификация компонентов?
В пакете, по адресу `node_modules/monochrome/spec/`, по файлу на компонент. Без установки пакета те же страницы печатает `npx monochrome docs <тема>`.
Подходит ли она для React и Vue?
Да. Команда `npx monochrome add menu` записывает части в `src/components/ui/`: для React 19 или Vue 3.5. Файлы после этого принадлежат проекту.
Как узнать, что изменилось в новой версии?
Команда `npx monochrome changelog --from <версия>` печатает изменения и шаги обновления.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыПанель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Скилл и CLI: единый HTML-файл без зависимостей, с токенами shadcn, семью макетами, графиками на SVG и самопроверкой агента
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
Скилл Nuxt UI v4: агент строит интерфейсы на Vue и Nuxt, подбирает компоненты, настраивает тему и верстает формы и дашборды
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Nothing Design
nothing-design
Скилл генерации интерфейсов в визуальном языке Nothing: монохром, швейцарская типографика, промышленная строгость
Коротко о README
Идея проекта в том, что агенту нечего выдумывать: компонент состоит из HTML и ARIA, а спецификация той же версии лежит рядом с кодом и содержит перечень типичных ошибок.