React Joyride skill for agents
React Joyride
A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages
- 7,880 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists of text instructions and references with no scripts
- The agent changes only your app's files where it adds the tour code
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-joyrideDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of text instructions and references with no scripts
- The agent changes only your app's files where it adds the tour code
This is third-party code. Review the repository files before installing.
What it does
The skill sits in the skills/react-joyride folder of the React Joyride library repository and teaches an agent to build guided tours in a React app: element highlights, tooltips with buttons and beacons. Its core is a SKILL.md file describing the two interfaces of version 3: the `useJoyride()` hook, which the author recommends, and the `<Joyride>` component. It covers step fields (`target`, `content`, `placement`, `before`, `after`, `skipBeacon` and others), three ways to point at a target (a CSS selector, a DOM element, a React ref or a function), the tour and step lifecycle, events and control methods such as `next()`, `stop()` and `go()`. For the less obvious cases the skill gives decision rules. Async transitions between steps are meant to be solved with `before` and `after` hooks in uncontrolled mode, while controlled mode with the `stepIndex` prop is kept for syncing with the URL or external state machines. There is a section on three layers of styling, from color options to your own tooltip, beacon and arrow components. The troubleshooting section starts with the `debug: true` flag, which logs tour transitions to the console. Detailed tables of props and events and ready-made examples live in four files in the references folder.
Who it is for. For React developers who add onboarding tours or feature highlights and ask an agent to set up the React Joyride library.
Good fit when
- A React app needs a walkthrough for new users that highlights buttons and menus
- The agent suggests the outdated version 2 API while the project has version 3 with the `useJoyride()` hook
- A tooltip never appears, a target is not found or the tour hangs in controlled mode
- A step has to wait for a dropdown to open or data to load, and needs a `before` hook with a delay
- Tooltips must match the product's colors or be replaced with your own components
Not a fit when
- The interface is not written in React: both the library and the skill target it only
- The project uses React Joyride version 2 and you do not plan to upgrade: the skill describes version 3, which has no default export
- You need a tour of a page outside your app, such as someone else's site: a step target must exist in your own DOM
- You need tooltips in a native app with no web layer
Example request
Add a five-step tour of the sidebar to the app with useJoyride: the first step centered, then highlights of menu items, and save a flag to localStorage after SkipLimitations
- The skill targets React Joyride version 3, which has named exports only and different props and events than version 2. Projects on version 2 need the agent's suggestions checked against the documentation.
- Besides `SKILL.md` it holds only reference files and examples, no scripts. The skill itself runs nothing: commands such as installing the library are run by the agent at your request.
- The library supports React from 16.8 to 19; on older versions the `useJoyride()` hook will not work.
- The skill often points to the online documentation at v3.react-joyride.com. If the agent has no network access, some links stay unread and you rely on the files in the references folder.
- For flows with routing, portals and modal windows the skill gives only general hints: a tooltip target there may be unreachable, and that has to be checked in the app itself.
How to disable. Delete the react-joyride folder from the agent's skills directory (for example `.claude/skills` in the project). The library stays in the project; remove it with `npm uninstall react-joyride`.
FAQ
How does the `useJoyride()` hook differ from the `<Joyride>` component?
The hook returns an object with control methods, state and a ready `Tour` element that you place in your markup. The component draws the tour itself and takes the same settings as props. The skill's author recommends the hook, while the component suits server rendering because it guards its own DOM access.
How do I make a step wait for a dropdown to open?
Give the step a `before` function that opens the dropdown and returns a promise with a delay. The tour waits for it to finish, and the wait limit is set by `beforeTimeout`, five seconds by default. Controlled mode is not needed for this.
What if a step target is not found?
Test the selector in the console with `document.querySelector`, make sure the element is visible and not clipped by a parent with `overflow: hidden`. If the element appears later, raise `targetWaitTimeout` (one thousand milliseconds by default). In uncontrolled mode the tour skips a missing target by itself.
How do I center a step on screen?
Set `target: 'body'` and `placement: 'center'` on the step. The beacon and arrow hide themselves for centered placement, so the tooltip looks like a modal window.
How do I match tooltip colors to a product?
The simplest layer is the `primaryColor`, `backgroundColor`, `textColor`, `overlayColor` and `arrowColor` parameters in the `options` object. For precise tuning there is a `styles` object with keys such as `tooltip` and `buttonPrimary`, and for full replacement the `tooltipComponent` prop plus beacon, arrow and loader components.
Discussion
No questions or reviews yet.
Related
SkillsThe official React Router skill: the agent identifies the app mode and follows the docs for the installed version
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
Six Framer Motion skills for React: motion components, variants, gestures, scroll, layout animations and AnimatePresence
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
React Email skill for agents
React Email skill
A skill that teaches an agent to build emails with React Email: email-client rules, HTML and text rendering, sending, translations, editor
README in short
The repository's front page presents the library as a tool for introducing new users to an app. It lists strengths (accessibility with focus trapping and keyboard support, React compatibility from 16.8 to 19, server-rendering safety), links to the docs, demos and a StackBlitz playground, the `npm i react-joyride` install and two quick examples: with the component and with the hook. A separate section describes installing the skill with `npx skills add gilbarbara/react-joyride`, followed by a link to the migration guide from version 2 and the MIT license.
README badge
Original 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>;
}
```