# StyleKit

StyleKit даёт ИИ-агенту доступ к стилям, дизайн-токенам, рецептам компонентов и проверке UI-кода. Подключите его, чтобы сверять сгенерированный интерфейс с правилами выбранного стиля.

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

## Что делает

Сервер ищет стили и публичные ресурсы, возвращает профили стилей, токены и рецепты компонентов с JSX. Он также подбирает команду `npx shadcn add` для темы и проверяет код на нарушения правил стиля, объясняя проблему и предлагая исправление. Инструменты работают только на чтение.

Проверка разбирает JSX и HTML-атрибуты классов, вызовы `cn()` и `clsx()`, а также шаблонные строки; учитывает префиксы вроде `dark:` и `hover:`. Для проверки динамических выражений результат может быть неопределённым, а правила не оценивают визуальное качество и доступность. Сервер запускается через `npx` или по HTTP; для Claude Code команда ниже использует локальный запуск через `npx`.

## Требования
- Нужно: Node.js (команды через npx)
- Удалённый сервер: `https://www.stylekit.top/mcp`

## Установка

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

1. **Командой платформы: удалённый сервер**
```bash
claude mcp add --transport http stylekit-mcp https://www.stylekit.top/mcp
```

2. **Командой платформы**
```bash
claude mcp add mcp -- npx -y stylekit-mcp
```

### Codex

1. **Командой платформы: удалённый сервер**
```bash
codex mcp add mcp --url https://www.stylekit.top/mcp
```

2. **Командой платформы**
```bash
codex mcp add mcp -- npx -y stylekit-mcp
```

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "url": "https://www.stylekit.top/mcp"
        }
    }
}
```
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "command": "npx",
            "args": [
                "-y",
                "stylekit-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "http",
            "url": "https://www.stylekit.top/mcp"
        }
    }
}
```
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "stylekit-mcp"
            ]
        }
    }
}
```

### Gemini CLI

1. **Командой платформы: удалённый сервер**
```bash
gemini mcp add -t http mcp https://www.stylekit.top/mcp
```

2. **Командой платформы**
```bash
gemini mcp add mcp npx -y stylekit-mcp
```

## Когда брать
- найти стиль по ключевым словам или категории
- получить дизайн-токены для выбранного стиля
- взять JSX-рецепт кнопки, карточки или поля ввода
- проверить UI-код на нарушения правил стиля
- получить команду установки темы через shadcn

## Примеры запросов агенту
- Найди стиль с эффектом матового стекла и покажи рецепт кнопки.
- Проверь этот JSX на нарушения правил выбранного стиля и предложи исправления.
- Подбери команду `npx shadcn add` для темы этого стиля.

## Похожие
- [REA](https://affpapa.org/nevibecode/mcp/rea.md) — MCP-сервер · ★ 386989
- [GitHub](https://affpapa.org/nevibecode/mcp/github.md) — MCP-сервер · ★ 33918
- [World Monitor](https://affpapa.org/nevibecode/mcp/world-monitor.md) — MCP-сервер · ★ 89408
- [Netdata](https://affpapa.org/nevibecode/mcp/netdata.md) — MCP-сервер · ★ 81115
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [Scrapling MCP Server](https://affpapa.org/nevibecode/mcp/scrapling-mcp-server.md) — MCP-сервер · ★ 89433

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