# React-Use Skills

Agent Skills for [react-use](https://github.com/streamich/react-use) — a collection of essential React Hooks.

> [!IMPORTANT]
> Experimental Project: Aims to help AI agents use libraries more accurately with fewer tokens. Feedback is welcome.

- Progressive disclosure: send react-use hook overviews first, then load detailed usage and type declarations on demand
- Minimal token usage: provide only necessary information to reduce token consumption
- Offline-first design: works without internet access or additional agent permissions
- Customizable policies: users can override hook invocation rules in prompts or `AGENTS.md`
- Reduced hallucinations: precise usage references help prevent invented APIs

## Installation

Install the skill using the [skills CLI](https://github.com/vercel-labs/skills):

```bash
npx skills add arindampradhan/react-use-skills
```

### Install to Specific Agents

```bash
# OpenCode
npx skills add arindampradhan/react-use-skills -a opencode

# Claude Code
npx skills add arindampradhan/react-use-skills -a claude-code

# Cursor
npx skills add arindampradhan/react-use-skills -a cursor

# Install globally (available across all projects)
npx skills add arindampradhan/react-use-skills -g
```

### Supported Agents

This skill works with all agents supported by the skills CLI, including:
OpenCode, Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Roo Code, Cline, and [many more](https://github.com/vercel-labs/skills#supported-agents).

## Example Usage

Install react-use in your React project, then instruct the agent. It will automatically leverage react-use to assist development.

Example prompt:

```
create a todo app with the following features:
- save todos to local storage
- show remains todo count on browser title
- add a copy button for each todo items
- debounced search input
- dark / light mode toggle
```

## Available Hooks

The skill includes comprehensive documentation for 80+ hooks across categories:

- **Sensors**: `useWindowSize`, `useMouse`, `useScroll`, `useIntersection`, `useMedia`, and more
- **UI**: `useAudio`, `useVideo`, `useFullscreen`, `useSpeech`, `useClickAway`
- **Animations**: `useSpring`, `useTween`, `useRaf`, `useInterval`, `useTimeout`
- **Side-Effects**: `useAsync`, `useDebounce`, `useThrottle`, `useLocalStorage`, `useCookie`
- **Lifecycles**: `useMount`, `useUnmount`, `useUpdateEffect`, `useDeepCompareEffect`
- **State**: `useToggle`, `useCounter`, `useList`, `useMap`, `useSet`, `usePrevious`

## License

Unlicense