Как использовать готовые React-компоненты в Claude Code

1. Дайте Claude Code изучить проект

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

Откройте свою папку в Claude Code — в терминале или поддерживаемом редакторе — и попросите пока только изучить её. Для примера нужен React-проект с Tailwind и настроенным components.json. Если проекта нет, начните с начального гайда.

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

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

2. Передайте инструкцию на конкретный компонент

Откройте accordion-002. В отличие от целой FAQ-секции, это только список карточек: его можно поставить рядом с уже существующим заголовком. У текущей реализации нет внутренних registry-зависимостей и дополнительных npm-пакетов. Она раскрывает вопросы средствами браузера.

Нажмите «Копировать для ИИ» после выбора настроек и вставьте свежую ссылку в задание. Это ссылка на инструкцию агенту, а не адрес JSON для команды shadcn add. Если Claude Code запросит выполнение команды, проверьте её назначение и рабочую папку.

Установи accordion-002 по инструкции:
<свежая ссылка из «Копировать для ИИ»>

Добавь его в согласованное место на главной. Используй файл из registry, а не собственную реализацию. Сохрани details/summary, независимое раскрытие вопросов, маркеры, оформление карточек и адаптивность. Сначала покажи исходный вариант. Перечисли команду установки, добавленные файлы и место импорта.

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

3. Настройте данные через props

В этом компоненте items — массив объектов question/answer. defaultOpen выбирает индекс карточки, открытой при загрузке; значение -1 оставляет всё закрытым. marker и elevation отвечают за индикатор и оформление. Ниже пример вызова после установки, а не отдельная замена исходного компонента.

import { Accordion002 } from "@/components/vibeui/accordion-002"

<Accordion002
  defaultOpen={-1}
  marker="plus"
  elevation="ring"
  items={[
    { question: "С чего начать?", answer: "Выберите подходящий блок и передайте агенту инструкцию установки." },
    { question: "Можно поменять тексты?", answer: "Да, через props в месте вызова компонента." },
  ]}
/>

Путь импорта должен соответствовать вашему components.json. Для настоящего продукта замените пример своими вопросами и подтверждёнными ответами. Если ответ требует ссылок, списков или сложной разметки, сначала проверьте API: в Accordion002 answer имеет тип string, поэтому произвольный JSX сюда передавать нельзя.

4. Проверьте diff и поведение

Попросите Claude Code показать diff. В текущем примере ожидается файл accordion-002.tsx и изменение страницы, которая его вызывает. Правки пакетного менеджера могут появиться при подготовке CLI, но сам accordion не требует новой UI-библиотеки. Если агент добавил её, попросите объяснить причину до продолжения.

• Раскройте несколько вопросов: они должны оставаться открытыми независимо.
• Дойдите до summary клавишей Tab и проверьте Enter и пробел.
• Подставьте длинный реальный ответ и проверьте карточку на узком экране.
• Проверьте унаследованную тему и отсутствие глобальных правил, которые меняют рамки или текст карточек.

Если установка или импорт не прошли, используйте справочник ошибок. Проверки здесь основаны на текущем API и исходнике компонента; это не запись автоматического запуска Claude Code в чужом проекте.

5. Сохраните правила для следующих задач

Если вы регулярно устанавливаете блоки, добавьте в существующие инструкции проекта короткие правила: брать исходники из registry, менять контент через props, сохранять доступность и проверять diff. Согласуйте их с уже действующими правилами репозитория. Не нужно создавать новый файл инструкций для каждого компонента.

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

Возможности редактора и интерфейс разрешений проверяйте в официальной документации Claude Code.