Kumo — скилл
Правила интерфейса Cloudflare в скилле kumo-design: 15 пунктов с примерами на TSX для панелей и приложений на Kumo
- 4 214 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит из текстовых правил и примеров кода, сам ничего не запускает и в сеть не ходит.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/kumoОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из текстовых правил и примеров кода, сам ничего не запускает и в сеть не ходит.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `kumo-design` собирает в одном `SKILL.md` 15 правил оформления продуктовых интерфейсов Cloudflare. У каждого правила есть идентификатор, например `heading-case` или `dialog-rendering`, и пара примеров на TSX: как делать и чего избегать. Среди правил: текст контента в 14 пикселей, заголовки с заглавной только в начале, запрет `font-bold` и плавного перехода цвета при наведении, концентрические радиусы скруглений, выравнивание иконок по первой строке текста, запрет вложенных `LayerCard` и условного показа диалогов через `open &&`. Агент подключает скилл, когда проектирует или проверяет панели Cloudflare и интерфейсы на Kumo, библиотеке компонентов Cloudflare на Base UI. Документацию по самим компонентам выдает CLI библиотеки: `npx @cloudflare/kumo doc Button` печатает описание компонента.
Для кого. Интерфейсным инженерам Cloudflare и авторам приложений на Kumo, которые проверяют код агента по правилам оформления.
Подходит, если
- Агент верстает страницу панели на компонентах Kumo.
- Pull request с интерфейсом проверяется на соответствие правилам оформления Cloudflare.
- Диалоги, карточки и липкие шапки в приложении выглядят не по системе, и вы ищете нарушенное правило.
- Иконки, заголовки и отступы подгоняются под принятую плотность с текстом в 14 пикселей.
- Диалог теряет анимацию закрытия, и вы подозреваете условный рендеринг.
Не подходит, если
- Интерфейс не связан с Cloudflare и Kumo: правила привязаны к дизайн-системе компании.
- Проект следует другой системе, например Material или shadcn/ui, и скилл будет навязывать чужие правила.
- Вопрос касается свойств компонента: их выдает CLI `npx @cloudflare/kumo doc`, а скилл хранит только правила оформления.
Пример запроса к агенту
Проверь компонент настроек по правилам kumo-design и исправь нарушения: регистр заголовков, вложенные LayerCard и условный показ диалога.Ограничения
Готовой команды установки скилла в README нет, и сам он там не упомянут: папку `skills/kumo-design` копируют в каталог скиллов агента вручную. Правила рассчитаны на продуктовый интерфейс Cloudflare и библиотеку Kumo, в других проектах часть из них, например 14 пикселей для всего контента, окажется чужой. Свойства компонентов скилл не описывает, их агент берет из CLI или документации. Примеры написаны на React и TSX.
Как отключить. Удалите папку `kumo-design` из каталога скиллов агента. Библиотека `@cloudflare/kumo` в проекте останется как была.
Частые вопросы
Как поставить скилл kumo-design?
Готовой команды в README нет. Скопируйте папку `skills/kumo-design` из репозитория в каталог скиллов агента, например в `.claude/skills/` для Claude Code.
Что проверяют правила скилла?
Размер и регистр текста, толщину шрифта, переходы при наведении, скругления, тени с границами, выравнивание иконок, вложенность `LayerCard` и показ диалогов. Всего 15 правил.
Почему диалоги нельзя рендерить условно?
Условный показ отключает анимацию открытия и закрытия. Правило `dialog-rendering` требует держать диалог в дереве и управлять видимостью пропсом `open`.
Как получить документацию по компонентам Kumo?
Через CLI библиотеки: `npx @cloudflare/kumo ls` перечисляет компоненты, `npx @cloudflare/kumo doc Button` печатает описание одного, а `npx @cloudflare/kumo docs` выводит все.
Можно ли применять правила вне Cloudflare?
Технически да, но часть правил привязана к дизайн-системе компании. Скилл называет себя руководством по продуктам Cloudflare, поэтому в стороннем проекте сверяйтесь с его собственной системой.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл Ludi Design System учит агента выбирать компоненты и собирать страницы B2B-интерфейсов по правилам с шаблонами TSX
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл запрещает агенту типовой интерфейс с плавающими карточками, градиентами и стеклом и задает обычные размеры, радиусы и тени как у Linear
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Kumo (эта карточка) | да | 4 214 | |
| Material Design 3 Skill | нет | 1 571 | скилл по Material Design 3 с токенами и компонентами для Jetpack Compose; здесь правила оформления Cloudflare для React |
| shadcn/ui | нет | 128 022 | скилл и MCP-сервер shadcn/ui, который ставит компоненты в проект; здесь только правила оформления интерфейса и примеры |
Коротко о README
В README Kumo выступает библиотекой доступных компонентов на Base UI, которая берет на себя клавиатуру, фокус и ARIA. Для агентов в нем указаны CLI с командами ls и doc и файл AGENTS.md с правилами разработки, а про скилл в папке `skills/` речи нет.
Бейдж для README
Исходный SKILL.md
--- name: kumo-design description: Cloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests. --- # Cloudflare Design Apply these rules when designing, implementing, or reviewing Cloudflare product interfaces. Follow recommended examples and avoid patterns marked as examples to avoid. ## Rules ### `content-text-size` Use 14px for content text All content text—body, buttons, data, other interactables—must be 14px in size. 16px and above are restricted to headings and subheadings. **Good** ```tsx <Text>Content text</Text> ``` **Avoid** ```tsx <Text size="lg">Content text</Text> ``` ### `heading-case` Always sentence case headings Never capitalize or uppercase headings. Product names must be title-cased. **Good** ```tsx <Text as="h2">Recent requests</Text> ``` **Avoid** ```tsx <Text as="h2">Recent Requests</Text> ``` ```tsx <Text as="h2" DANGEROUS_className="uppercase">