create-hook

name	create-hook
description	Analyze a component or file and identify inline logic that can be extracted into a reusable React hook. Proposes the hook name, signature, and affected components -- then asks before writing any code. Use when a component mixes state + effects, when a pattern repeats across components, or when the user asks "can this be a hook?".

Create Hook

Analyze a component or file and determine if any inline logic can be extracted into a reusable hook. Proposes the hook API and asks before implementing -- never writes code without confirmation.

When to use this skill

Invoke when:

• A component feels too large or mixes concerns (state + effects + layout)
• You spot a pattern repeated across more than one component
• Inline useEffect + useState logic is complex enough to have a name
• The user asks "can this be a hook?" or "should I extract this?"

Steps

1. Read the target file(s).

2. Identify extraction candidates -- inline logic blocks that:

   • Combine state + side effects (timers, listeners, observers, storage)
   • Access browser APIs (scroll, resize, matchMedia, localStorage, IntersectionObserver)
   • Would have a clear, reusable name independent of the component's UI

3. Check hooks/ for existing hooks before proposing a new one:

   • useDebounce<T>(value, delay) -- debounces any value
   • useClickOutside<T extends HTMLElement>(callback) -- fires callback on outside click, returns ref
   • useActiveSection(ids) -- tracks which section id is centered in the viewport
   • useAuth() -- reads JWT token, exposes user + helpers
   • useOrg() -- current org from OrgProvider context If the existing hook already covers the case, suggest using it instead.

4. For each candidate, propose:

   • Hook name (use prefix, describes what it returns)
   • Signature: inputs and return value
   • Which component(s) would benefit
   • Whether it is worth extracting (skip trivial single-useState wrappers)

5. Ask the user: "Should I extract [hookName]?" before writing any code. Only implement after confirmation.

6. If confirmed, write the hook to hooks/<hookName>.ts and refactor the component to use it.

Hook design rules (apply when implementing)

• Named export only, no default export
• 'use client'; at the top
• Generic when return type depends on input
• Clean up all effects (timers, listeners, observers)
• Wrap callback args in useRef so callers don't need useCallback
• No comments unless the WHY is non-obvious

Usage

/create-hook

Examples: /create-hook components/blog/BlogSearch.tsx /create-hook components/layout/header.tsx /create-hook app/(layout)/blog/page.tsx