skills.rest
jorggerojas
jorggerojasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hooks

Consolidate reusable React hook logic into src/hooks with standardized exports.

1|Updated Jan 12, 2026
Search Tags:#typescript#frontend#react#hooks#reusability#state-management#custom-hook
One-click install
npx skills add https://github.com/jorggerojas/next-skeleton-page --skill hooks-jorggerojas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hooks
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/hooks
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill hooks-jorggerojas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reusable React hook logic is scattered across components, creating duplication and maintenance overhead. This skill centralizes common hook patterns into a single source of truth in src/hooks/, enabling consistent behavior across the codebase.

Core Features & Use Cases

  • Custom hook patterns: useWindowSize, useBodyScrollLock, useDebounce, useClickOutside, and analytics hooks encapsulate stateful logic with clean APIs.
  • Code reuse & consistency: Exported from src/hooks/index.ts to be easily imported via @/hooks.
  • SSR-friendly & testable: Hooks designed to work with SSR and easily unit tested.

Quick Start

Create a new hook under src/hooks, export it from src/hooks/index.ts, and import { useMyHook } from '@/hooks' where needed.

Frequently Asked Questions about hooks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I organize reusable React hooks to avoid duplicating stateful logic across components?▼

Standardize custom hook patterns by consolidating reusable logic into src/hooks. Export hooks from src/hooks/index.ts and import via '@/hooks' to eliminate scattered duplication and ensure consistent behavior across pages and components.

What is the best way to standardize common custom hook patterns like body scroll lock and click outside in a React project?▼

Centralize common custom hook logic like useBodyScrollLock and useClickOutside into src/hooks. Exporting from src/hooks/index.ts ensures consistent stateful logic and clean APIs accessible via '@/hooks' across the codebase.

Can I use these centralized React hooks with server-side rendering?▼

Yes, the custom hooks are designed to be SSR-friendly. Consolidating them in src/hooks ensures that patterns like window size detection and body scroll lock work consistently in server-side rendered React applications.

How do I start creating and importing a new custom hook using this src/hooks structure?▼

Create a new hook under src/hooks, export it from src/hooks/index.ts, and import it using the '@/hooks' alias. This enforces consistent usage and establishes a single source of truth for reusable stateful logic.

Why does my custom hook logic keep breaking when reused across different React components?▼

Scattered custom hook logic creates duplication and maintenance overhead, leading to inconsistent behavior. Centralizing hooks into src/hooks and exporting from index.ts provides a single source of truth to ensure reliable stateful logic across components.

Related Skills

Explore More Software Engineering Skills→
jhlee0409jhlee0409

custom-hook

Create reusable React hooks with TypeScript interfaces and index.ts exports.

Community
Advanced
PMKhaiPMKhai

hooks-pattern

Extract stateful logic into reusable custom hooks for React components.

Community
Intermediate
Mark393295827Mark393295827
1

frontend-patterns

Provide reusable React and Next.js frontend patterns with TypeScript examples.

Community
Advanced
involvexinvolvex

react-patterns

Provides React design principles covering hooks, composition, state management, performance, and TypeScript patterns.

Community
Basic