React Joyride — скилл для агентов
React Joyride
Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок
- 7 880 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит из текстовых инструкций и справочников, скриптов в нем нет
- Агент меняет только файлы вашего приложения, в которые добавляет код тура
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/react-joyrideОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из текстовых инструкций и справочников, скриптов в нем нет
- Агент меняет только файлы вашего приложения, в которые добавляет код тура
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл лежит в папке skills/react-joyride репозитория библиотеки React Joyride и учит агента делать в React-приложении пошаговые туры: подсветку элементов, подсказки с кнопками и маячки. Основа скилла — файл SKILL.md с описанием двух интерфейсов третьей версии: хука `useJoyride()` (его автор рекомендует) и компонента `<Joyride>`. В нем разобраны поля шага (`target`, `content`, `placement`, `before`, `after`, `skipBeacon` и другие), три способа указать цель (селектор CSS, элемент DOM, ссылка React или функция), жизненный цикл тура и шага, события и управляющие методы вроде `next()`, `stop()` и `go()`. Для неочевидных случаев скилл дает правила выбора. Асинхронные переходы между шагами предлагается решать хуками `before` и `after` в неуправляемом режиме, а управляемый режим со свойством `stepIndex` оставлять для связи с адресной строкой или внешними машинами состояний. Есть раздел про стили в три слоя, от цветовых параметров до собственных компонентов подсказки, маячка и стрелки. Раздел типовых поломок начинается с флага `debug: true`: он пишет в консоль переходы тура. Подробные таблицы свойств, событий и готовые примеры вынесены в четыре файла папки references.
Для кого. Для разработчиков React-приложений, которые добавляют пошаговое обучение новых пользователей или подсветку новых функций и просят агента настроить библиотеку React Joyride.
Подходит, если
- Нужно добавить в React-приложение экскурсию для новых пользователей с подсветкой кнопок и меню
- Агент предлагает устаревший API второй версии, а в проекте стоит третья с хуком `useJoyride()`
- Подсказка не появляется, цель не находится или тур зависает в управляемом режиме
- Шаг должен ждать открытия выпадающего списка или загрузки данных, и нужен хук `before` с задержкой
- Подсказки надо оформить в цветах продукта или заменить на свои компоненты
Не подходит, если
- Интерфейс написан не на React: библиотека и скилл рассчитаны только на него
- В проекте стоит вторая версия React Joyride и обновляться вы не планируете: скилл описывает третью, где нет экспорта по умолчанию
- Нужен тур по странице за пределами вашего приложения, например по чужому сайту: цель шага должна находиться в вашем DOM
- Подсказки нужны в нативном приложении без веб-слоя
Пример запроса к агенту
Добавь в приложение тур из пяти шагов по боковому меню через useJoyride: первый шаг по центру, дальше подсветка пунктов, а после «Пропустить» сохрани отметку в localStorageОграничения
- Скилл рассчитан на React Joyride третьей версии: у нее только именованные экспорты, а свойства и события отличаются от второй. Для проектов на второй версии предложения агента придется сверять с документацией.
- Кроме `SKILL.md` в нем только справочные файлы и примеры, никаких скриптов. Сам скилл ничего не запускает: команды вроде установки библиотеки агент выполняет по вашей просьбе.
- Библиотека поддерживает React от 16.8 до 19, на более старых версиях хук `useJoyride()` работать не будет.
- Скилл часто отправляет в онлайн-документацию библиотеки на сайте v3.react-joyride.com. Если у агента нет доступа к сети, часть ссылок останется непрочитанной, и полагаться придется на файлы папки references.
- Для сценариев с маршрутизацией, порталами и модальными окнами скилл дает только общие подсказки: цель подсказки там может оказаться недоступной, и это проверяется в самом приложении.
Как отключить. Удалите папку react-joyride из каталога скиллов агента (например, из `.claude/skills` проекта). Библиотека в проекте остается: убрать ее можно командой `npm uninstall react-joyride`.
Частые вопросы
Чем хук `useJoyride()` отличается от компонента `<Joyride>`?
Хук возвращает объект с методами управления, состоянием и готовым элементом `Tour`, который вы вставляете в разметку. Компонент рисует тур сам и принимает те же параметры свойствами. Автор скилла рекомендует хук, а компонент удобен для серверной отрисовки, потому что сам защищает обращения к DOM.
Как заставить шаг дождаться открытия выпадающего списка?
Добавьте шагу функцию `before`, которая открывает список и возвращает промис с задержкой. Тур подождет его завершения, а время ожидания задает параметр `beforeTimeout`, по умолчанию пять секунд. Управляемый режим для этого не нужен.
Что делать, если цель шага не находится?
Проверьте селектор в консоли командой `document.querySelector`, убедитесь, что элемент виден и не обрезан родителем с `overflow: hidden`. Если элемент появляется позже, увеличьте `targetWaitTimeout` (по умолчанию тысяча миллисекунд). В неуправляемом режиме тур сам пропускает отсутствующую цель.
Как сделать шаг по центру экрана?
Укажите для шага `target: 'body'` и `placement: 'center'`. Маячок и стрелка при центральном расположении скрываются сами, так что подсказка выглядит как модальное окно.
Как задать цвета подсказок в стиле продукта?
Самый простой слой — параметры `primaryColor`, `backgroundColor`, `textColor`, `overlayColor` и `arrowColor` в объекте `options`. Для точной настройки есть объект `styles` с ключами вроде `tooltip` и `buttonPrimary`, а для полной замены — свойства `tooltipComponent`, маячка, стрелки и загрузчика.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл React Router
React Router agent skill
Официальный скилл React Router: агент определяет режим приложения и работает по документации установленной версии
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Шесть скиллов по Framer Motion для React: компоненты motion, варианты, жесты, скролл, layout-анимации и AnimatePresence
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
React Email — скилл для агентов
React Email skill
Скилл учит агента верстать письма на компонентах React Email: правила для почтовых клиентов, рендер в HTML и текст, отправка, переводы и редактор
Коротко о README
Главная страница репозитория подает библиотеку как инструмент для знакомства новых пользователей с приложением. В ней список достоинств (доступность с ловушкой фокуса и клавиатурой, совместимость с React от 16.8 до 19, безопасность для серверной отрисовки), ссылки на документацию, демо и площадку StackBlitz, установка `npm i react-joyride` и два быстрых примера: через компонент и через хук. Отдельный раздел описывает установку скилла командой `npx skills add gilbarbara/react-joyride`, затем идут ссылка на руководство по переходу со второй версии и лицензия MIT.
Бейдж для README
Исходный SKILL.md
---
name: react-joyride
description: >-
Guide for implementing, configuring, and debugging React Joyride v3 guided tours.
Use this skill whenever the user mentions joyride, guided tour, onboarding tour,
walkthrough, tooltip tour, step-by-step guide, product tour, or wants to highlight
UI elements sequentially. Also use when debugging tour issues like tooltips not
appearing, targets not found, or controlled mode problems. This skill covers the
useJoyride hook, Joyride component, step configuration, events, controls, custom
components, and styling.
license: MIT
metadata:
author: gilbarbara
version: "3.0.0"
---
# React Joyride v3
Create guided tours in React apps. Two public APIs: the `useJoyride()` hook (recommended) and the `<Joyride>` component.
Online docs: https://v3.react-joyride.com
## Quick Start
### Using the hook (recommended)
```tsx
import { useJoyride, STATUS, Status } from 'react-joyride';
function App() {
const { Tour } = useJoyride({
continuous: true,
run: true,
steps: [
{ target: '.my-element', content: 'This is the first step', title: 'Welcome' },
{ target: '#sidebar', content: 'Navigate here', placement: 'right' },
],
onEvent: (data) => {
if (([STATUS.FINISHED, STATUS.SKIPPED] as Status).includes(data.status)) {
// Tour ended
}
},
});
return <div>{Tour}{/* rest of app */}</div>;
}
```