Компонент VibeUI не устанавливается: как найти причину

1. Определите, на каком шаге возникла ошибка

Сначала отделите четыре разных события: агент прочитал инструкцию, CLI получил исходники, приложение импортировало компонент, браузер правильно его показал. Ошибка на первом шаге не означает, что сломан компонент. И наоборот: ответ CLI об успешной установке ещё не подтверждает правильный результат на странице.

Скопируйте точную ошибку и последнюю выполненную команду. Не запускайте подряд новые установки и не просите агента переписать блок с нуля: сначала нужно понять, какие файлы уже появились и что именно не сработало.

Таблица указывает направления проверки, а не устанавливает причину только по коду ответа. Например, 401 может появиться и при истёкшей подписи, и при отсутствии доступа. Нужны адрес запроса и контекст ошибки.

2. Проверьте ссылку и доступ

В VibeUI «Копировать для ИИ» выдаёт ссылку на инструкцию агенту. Она действует 30 минут. Для ручного shadcn add нужна отдельная команда из панели «Исходник компонента»: не подставляйте в неё адрес страницы каталога или короткую ссылку на бриф.

1. Откройте компонент из каталога, а не из старой переписки.
2. Проверьте вход в аккаунт. Если кнопка сообщает о лимите или PRO-доступе, сначала разберитесь с этим состоянием.
3. Получите новую ссылку и повторите установку в нужном проекте.
4. Если агент не читает веб-страницу, передайте свежую полную инструкцию с той же страницы компонента.

Пустой адрес /r/pro/имя.json без подписи или настроенного ключа не является универсальной публичной командой. Если используете PRO-namespace, отдельно проверьте, что components.json ссылается на нужную переменную окружения и ключ активен. Способы подключения описаны в инструкции по установке.

Не публикуйте ключ и полную временную ссылку в открытом отчёте об ошибке. Для диагностики обычно достаточно имени компонента, типа адреса без параметров подписи, времени запроса и текста ответа.

3. Проверьте файлы, импорты и зависимости

Если CLI завершился с ошибкой, посмотрите, какие файлы он успел создать. Если установка завершилась успешно, а приложение сообщает Cannot find module, сравните фактическое расположение файла и импорт на странице. Ориентируйтесь на components.json своего проекта, а не на путь из чужого скриншота.

У составного блока может быть несколько внутренних зависимостей. Например, faq-001 использует heading-001, accordion-002 и button-077. Копирование только файла faq-001.tsx оставит импорты без файлов. Попросите агента сверить состав с registry и установить недостающие части штатной командой.

Не заменяйте автоматически отсутствующий импорт похожим пакетом и не удаляйте его из компонента. Сначала выясните, внутренний ли это файл, npm-зависимость или ошибка пути. Установка новой библиотеки может убрать сообщение об ошибке, одновременно изменив выбранный дизайн.

Отдельно проверьте, что CLI и dev-сервер запущены в одной папке проекта. Во вложенных репозиториях или монорепозиториях рабочая директория особенно важна: успешно добавленный файл может оказаться не в том приложении, которое открыто в браузере.

4. Если установка прошла, но вид отличается

Верните исходные тексты и настройки блока, чтобы отделить установку от вашей адаптации. Сравните одинаковую подложку и одинаковую ширину контейнера. Затем проверьте выбранные props, color-scheme, загрузку шрифтов и медиа, а также глобальные CSS-правила для ссылок, кнопок и заголовков.

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

Не исключайте дефект самого блока. Если он воспроизводится и в превью каталога при тех же настройках, зафиксируйте это и сообщите через кнопку отчёта на странице компонента. Перекрашивать всё приложение ради одной неисправной кнопки не нужно.

5. Соберите воспроизводимое описание

Полезный отчёт содержит имя компонента, фреймворк, версии React и Tailwind, точный шаг ошибки, текст ответа и список уже добавленных файлов. Для визуального дефекта добавьте ширину окна, тему, значения изменённых props и чистый скриншот без личных данных.

Пока не меняй код. Найди причину ошибки установки компонента VibeUI.

Проверь по порядку: прочитана ли инструкция, получен ли registry JSON, какие файлы появились, совпадают ли пути импортов с components.json, запущено ли нужное приложение.

Покажи точную ошибку и подтверждённые факты. Не выводи секреты и параметры подписанной ссылки. Предложи минимальное исправление и способ проверить его. Не пересоздавай компонент и не добавляй новую библиотеку вместо недостающего файла.

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