create-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).

1. 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

1. 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.

1. 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)

1. Ask the user: "Should I extract [hookName]?" before writing any code.

Only implement after confirmation.

1. 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 <file or component path>

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