should-i-render

should-i-render — это MCP-сервер только для чтения для выбора React-компонентов из измеренного, курируемого снимка. Он отвечает на вопросы о соответствии компонентов краткими вердиктами и использует факты из тестового окружения вместо выгрузки исходного кода.

Встроенный снимок в настоящее время содержит опубликованный индекс should-i-render. Он работает через stdio, не требует API-ключа, базы данных или доступа к сети и ограничивает каждый текстовый ответ примерно 500 токенами.

Бесплатная бета-версия, размещённая на vibecodng.com, читает живой индекс и включает 100 вызовов инструментов на один API-ключ в UTC-сутки. Создайте ключ в браузере, затем подключите HTTP-совместимый MCP-клиент к https://vibecodng.com/mcp. Используйте этот npm-пакет, когда вам нужен приватный, офлайн-снимок с версионированием и без квот.

Локальное использование

{
  "mcpServers": {
    "should-i-render": {
      "command": "node",
      "args": ["/path/to/should-i-render/server.js"]
    }
  }
}

Требуется Node 20 или новее. Запустите npm test, чтобы проверить встроенный снимок, метаданные инструментов, структурированные ответы и ограничение ответа.

С npm не требуется клонирование репозитория:

{
  "mcpServers": {
    "should-i-render": {
      "command": "npx",
      "args": ["-y", "should-i-render@0.1.0"]
    }
  }
}

Размещённый сервис может позже добавить платные тарифы для более свежих данных, более высоких квот и командных рабочих процессов. Опубликованный офлайн-пакет остаётся доступным на условиях указанных ниже лицензий.

Инструменты

• find_component({task, pattern?, style?, palette?}) ранжирует до трёх проверенных, подходящих для рендеринга вариантов на основе описания компонента, паттерна, стиля и измеренных результатов. Предупреждения о неудачах не включаются в рекомендации. Передайте slug палитры, чтобы добавить её CSS-переменные.

• palette_pick({mood?}) возвращает от одной до трёх курируемых доступных палитр с hex-ролями и копируемым блоком CSS-переменных.

• check_component({name}) возвращает полный вердикт, условия пропуска и измеренную полосу.

• alternatives({name}) ранжирует кандидатов с тем же паттерном.

• install_plan({name}) возвращает зависимости, пробелы в базовом тестовом окружении, требования к провайдерам, заметки по установке, лицензию, указание автора, измеренную страницу галереи, исходный источник и точную команду shadcn, если источник её поддерживает.

• skip_list({pattern, style?}) выводит сначала явные предупреждения о неудачах и худшие измеренные нарушения.

Каждый инструмент включает заголовок, аннотации только для чтения, схему вывода и структурированное содержимое вместе с ограниченным текстовым ответом.

Палитры

Пакет включает 24 оригинальные четырёхцветные палитры. Каждая палитра определяет accent, surface, text и muted; каждая пара текст-на-поверхности проверена на соответствие WCAG AA с контрастом не менее 4,5:1. Используйте palette_pick с slug палитры или настроениями, такими как dark, light, pastel, neon, retro, earth, warm, cold или mono.

:root {
  --bw-accent: #E85D4A;
  --bw-surface: #FFF7F1;
  --bw-text: #34231F;
  --bw-muted: #775F57;
}

Автоматическое применение темы работает для компонентов первой стороны; сторонние записи требуют ручного сопоставления.

Что означает измеренная полоса

RENDERS — результат монтирования в подготовленном тестовом окружении. A11Y — сумма зафиксированных нарушений axe. KB — предельный размер gzip-пакета относительно базовой линии тестового окружения. BARE — второй проход сборки и монтирования без подготовленных помощников в стиле shadcn. PROVIDER — означает, что была измерена ошибка монтирования из-за отсутствующего провайдера.

Ось стиля

Паттерн и стиль отвечают на разные вопросы. Паттерн — это то, что делает компонент, например, button, calendar, carousel или text reveal. Стиль — это визуальный мир, к которому он принадлежит, например, minimal-flat, brutalism, spatial, bento или dark-futuristic. Фильтрация по обоим полезна, когда взаимодействие фиксировано, а язык продукта — нет.

Стили — это редакционные классификации, а не возможности пакета. Две записи с одинаковым паттерном и стилем могут сильно различаться по зависимостям, результатам проверки доступности, стоимости пакета, совместимости с базовым окружением и требованиям к провайдерам.

Данные

data/components.json — это экспорт опубликованных записей компонентов на определённый момент времени. Он содержит описание, измеренные результаты, указание источника и автора, метаданные лицензии, паттерн и стиль, а также относительные пути к превью. Он не содержит байтов изображений или видео превью. data/palettes.json — это каталог встроенных палитр.

Установите SHOULD_I_RENDER_DATA=/path/to/components.json, чтобы протестировать другой снимок с той же структурой.

Ограничения

• Тестовое окружение в настоящее время измеряет только React-компоненты.

• Охват является курируемым, а не исчерпывающим обходом реестра.

• Снимок сделан на определённый момент времени; API и зависимости вышестоящих компонентов могут измениться после экспорта.

• Результаты тестового окружения — это контролируемые измерения, а не производственное QA. Они не заменяют тестирование в браузере, дизайн-системе, доступности, безопасности или пользовательское тестирование в вашем приложении.

• Демо написаны с использованием исходного API каждого компонента и используются для создания скриншотов. Демо может охватывать предполагаемое состояние, не охватывая каждый пропс, взаимодействие, поведение сервера или путь загрузки данных.

• Чистое количество проверок доступности означает, что в записанном демо не было обнаружено нарушений axe в данном тестовом окружении. Это не сертификация доступности.

• Вердикты и метки стилей — это редакционные суждения, основанные на записанных измерениях и исходных API.

Лицензия

Код сервера лицензирован по MIT. Метаданные скомпилированного индекса — CC BY 4.0 с указанием авторства mrkeyoor.com; отдельные проекты исходных компонентов сохраняют свои собственные лицензии и указание авторов.

Участие в разработке

• Нашли неверный вердикт или устаревшую запись компонента? Откройте issue.

• Приветствуются изменения кода для MCP-сервера и логики ранжирования. Держите ответы в рамках ограничения и запустите npm test перед открытием pull request.

• data/components.json генерируется из измеренного индекса vibecodng, поэтому исправления данных следует начинать с issue, а не с прямого редактирования снимка.