# Box Kite

Локальный движок стилей React-библиотеки Box Kite для ИИ-агентов. Проверяет пропсы, разметку компонентов и генерацию CSS прямо в редакторе.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 12
- Автор: box-kite
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/box-kite/box-kite/tree/HEAD/mcp
- Обновлён: 2026-10-20
- HTML: https://affpapa.org/nevibecode/mcp/box-kite

## Что делает

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

Сетевые запросы и API-ключи серверу не нужны. Все данные вшиты в пакет при сборке. Для запуска в системе обязателен Node.js версии 22 или новее, без него утилита через `npx` завершится ошибкой.

Главная особенность библиотеки — строгий список допустимых значений. Ошибочный пропс не генерирует сломанный CSS, а молча игнорируется, поэтому инструмент `check_styles` выявляет опечатки в стилях ещё до запуска приложения в браузере.

## Требования
- Нужно: Node.js (команды через npx)

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add mcp -- npx -y @box-kite/mcp
```

### Codex

**Командой платформы**
```bash
codex mcp add mcp -- npx -y @box-kite/mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@box-kite/mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@box-kite/mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add mcp npx -y @box-kite/mcp
```

## Когда брать
- проверить генерацию CSS для набора стилевых пропсов
- получить спецификацию компонента с раскладкой клавиш и ARIA-атрибутами
- подобрать правильные шкалы отступов и размеров шрифта без документации
- загрузить готовый блок разметки для панели управления или страницы настроек

## Примеры запросов агенту
- Проверь через `check_styles`, соберётся ли CSS для пропсов `p: 4` и `bgColor: "blue-500"`.
- Покажи спецификацию и клавиатурные события компонента через `get_component`.
- Найди в `search_docs` подходящие правила для построения адаптивной сетки.

## Похожие
- [refactoring-ui](https://affpapa.org/nevibecode/skills/refactoring-ui.md) — скилл · 9200 установок
- [frontend-design](https://affpapa.org/nevibecode/skills/bytedance-frontend-design.md) — скилл · 3700 установок
- [ui-designer](https://affpapa.org/nevibecode/skills/ui-designer.md) — скилл · 3600 установок
- [designing-frontend-interfaces](https://affpapa.org/nevibecode/skills/designing-frontend-interfaces.md) — скилл · 642 установки
- [scss-best-practices](https://affpapa.org/nevibecode/skills/scss-best-practices.md) — скилл · 1700 установок
- [tailwind-4](https://affpapa.org/nevibecode/skills/tailwind-4.md) — скилл · 612 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md