---
name: react-hooks-toolkit
description: "Generate custom React hooks — debounce, fetch, local-storage, media-query, and more. A senior React engineer who writes production-grade custom hooks on demand. Generates typed, tested hooks with zero dependencies, JSDoc comments, and Storybook stories."
license: MIT
---

# React Hooks Toolkit

React Hooks Toolkit acts like a senior React engineer who writes custom hooks on request. You describe the behavior you need — debouncing an input, syncing state to `localStorage`, reacting to a media query — and it generates a typed, dependency-free hook with JSDoc, a Vitest/Testing Library test, and an optional Storybook story. It's aimed at React and React Native developers on TypeScript codebases who keep rewriting the same `useEffect` plumbing by hand.

## When to use it

- You need a `useDebounce`, `useFetch`, `useLocalStorage`, `useMediaQuery`, `usePrevious`, `useIntersectionObserver`, or similar utility and don't want to pull in a whole library for one function.
- You want a hook that's correct about the parts people get wrong: cleanup, stale closures, SSR-safe initial state, abortable fetches.
- You're standardizing a team's `src/hooks/` folder and want consistent JSDoc + test coverage on every entry.

## What it does

For each request it emits a single `.ts`/`.tsx` file with a named export, full TypeScript generics (e.g. `useFetch<T>` returning a discriminated `{ data, error, loading }` union), and inline JSDoc. Generated hooks use only `useState`, `useEffect`, `useRef`, `useCallback`, and `useMemo` — no runtime dependencies. Effects always return cleanup functions; `useFetch` wires up `AbortController`; storage and media-query hooks guard against `window` being undefined for SSR. Alongside the hook it produces a colocated `*.test.ts` using `@testing-library/react`'s `renderHook` and `act`, plus a CSF3 `*.stories.tsx` when you ask for one.

## Example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/react-hooks-toolkit/SKILL.md https://claudeskil.com/skills/react-hooks-toolkit/SKILL.md

# then, in your project:
"Generate a useDebounce hook with a configurable delay and a test"
```

Produces roughly:

```ts
/** Returns a debounced copy of `value` that updates after `delay` ms. */
export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}
```

## Tips & gotchas

- Tell it your test runner up front (Vitest vs Jest) — the fake-timer setup differs (`vi.useFakeTimers()` vs `jest.useFakeTimers()`), and it'll match.
- For `useLocalStorage`, ask whether you want cross-tab sync; it can add a `storage` event listener, which is off by default to avoid surprise re-renders.
- Generated `useFetch` is intentionally minimal. If you need caching, retries, or deduplication, it'll tell you to reach for TanStack Query instead of bolting it on.
- It colocates files next to your existing hooks if it can find a `hooks/` directory; otherwise it asks where to write.

## FAQ

**Does it add anything to package.json?** No. Hooks ship zero runtime dependencies; only your dev test/Storybook deps are assumed already present.

**React Native support?** Yes — it swaps `window.matchMedia` for `Dimensions`/`useWindowDimensions`-based logic when you specify RN.

**Can it follow my lint rules?** It writes against `react-hooks/exhaustive-deps` cleanly. Share your ESLint config and it'll match quote style and import ordering.