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

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:

/** 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.