القائمة
Apply shadcn-hooks React hooks where appropriate to build concise, maintainable React features.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/Debbl/shadcn-hooks --skill shadcn-hooksيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | shadcn-hooks |
| description | Apply shadcn-hooks React hooks where appropriate to build concise, maintainable React features. |
| license | MIT |
| metadata | {"author":"Brendan Dash <me@aiwan.run>","version":"1.0"} |
| compatibility | Requires React 18 (or above) project |
This skill is a decision-and-implementation guide for shadcn-hooks in React projects. It maps requirements to the most suitable hook, applies the correct usage pattern, and prefers hook-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
Invocation field in the below functions table. For example:
AUTO: Use automatically when applicable.EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.Prefer the shadcn CLI — it copies only the hooks you need into your project (zero extra runtime dependencies, tree-shake friendly):
# Install a single hook (recommended)
npx shadcn@latest add @shadcnhooks/use-boolean
# Install multiple hooks at once
npx shadcn@latest add @shadcnhooks/use-boolean @shadcnhooks/use-mount @shadcnhooks/use-debounce
Alternatively, install the full npm package (all hooks bundled):
npm install shadcn-hooks
When using the shadcn CLI, import from the local path (e.g.
import { useBoolean } from "@/hooks/use-boolean"). When using the npm package, import from"shadcn-hooks"(e.g.import { useBoolean } from "shadcn-hooks").
All functions listed below are part of shadcn-hooks. Each section categorizes functions based on their functionality.
IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.
| Function | Description | Invocation |
|---|---|---|
useBoolean | Boolean state with set, setTrue, setFalse, toggle helpers | AUTO |
useControllableValue | Supports both controlled and uncontrolled component patterns | AUTO |
useCounter | Counter with inc, dec, set, reset helpers | AUTO |
useDebounce | Debounced reactive value | AUTO |
useResetState | State with a reset function to restore the initial value | AUTO |
useThrottle | Throttled reactive value | AUTO |
useToggle | Toggle between two values with utility actions | AUTO |
| Function | Description | Invocation |
|---|---|---|
useCreation | Memoized factory with deep dependency comparison | AUTO |
useCustomCompareEffect | useEffect with a custom dependency comparator | AUTO |
useLatest | Ref that always holds the latest value | AUTO |
useLockFn | Prevents concurrent execution of an async function | AUTO |
useMemoizedFn | Stable function reference that never changes identity | AUTO |
usePrevious | Returns the previous value of a state | AUTO |
| Function | Description | Invocation |
|---|---|---|
useDebounceEffect | Debounced useEffect | AUTO |
useDebounceFn | Debounced function with run, cancel, flush controls | AUTO |
useDeepCompareEffect | useEffect with deep dependency comparison | AUTO |
useDeepCompareLayoutEffect | useLayoutEffect with deep dependency comparison | AUTO |
useEffectEvent | Ponyfill for React 19's useEffectEvent | AUTO |
useEffectWithTarget | useEffect that supports target DOM element(s) as dependencies | AUTO |
useInterval | Interval timer with auto-cleanup | AUTO |
useIsHydrated | Returns true after client hydration completes | AUTO |
useIsomorphicLayoutEffect | useLayoutEffect on client, useEffect on server | AUTO |
useMount | Runs a callback only on component mount | AUTO |
useThrottleEffect | Throttled useEffect | AUTO |
useThrottleFn | Throttled function with run, cancel, flush controls | AUTO |
useTimeout | Timeout timer with auto-cleanup | AUTO |
useUnmount | Runs cleanup on component unmount | AUTO |
useUpdate | Returns a function that forces component re-render | AUTO |
useUpdateEffect | useEffect that skips the first render | AUTO |
| Function | Description | Invocation |
|---|---|---|
useActiveElement | Track the currently focused element | AUTO |
useBattery | Reactive battery level and charging information | AUTO |
useClickAnyWhere | Listen to click events anywhere on the document | AUTO |
useClickAway | Detect clicks outside of target element(s) | AUTO |
useClipboard | Reactive Clipboard API with read/write support | AUTO |
useDocumentVisibility | Reactive document visibility state | AUTO |
useElementSize | Reactive element size via ResizeObserver | AUTO |
useEventListener | Declarative event listener with auto-cleanup | AUTO |
useFps | Reactive FPS (frames per second) measurement | AUTO |
useFullscreen | Reactive Fullscreen API | AUTO |
useHash | Reactive window.location.hash | AUTO |
useHover | Reactive hover state of an element | AUTO |
useInViewport | Track element visibility via IntersectionObserver | AUTO |
useIsMatchMedia | Reactive CSS media query matching | AUTO |
useIsOnline | Reactive online/offline network status | AUTO |
useMouse | Reactive pointer coordinates for mouse/touch | AUTO |
useNetwork | Reactive network connection information | AUTO |
useOs | Reactive browser operating system detection | AUTO |
useScrollLock | Lock/unlock scroll on a target element | AUTO |
useTextSelection | Reactive text selection state with bounding rect | AUTO |
useTitle | Reactive document title management | AUTO |
| Function | Description | Invocation |
|---|---|---|
useWhyDidYouUpdate | Logs which props changed between renders (debug only) | AUTO |
| Function | Description | Invocation |
|---|---|---|
useMcp | Model Context Protocol client hook from use-mcp | EXTERNAL |
useQuery | Data fetching hook from @tanstack/react-query | EXTERNAL |
useStickToBottom | Scroll-stick behavior from use-stick-to-bottom | EXTERNAL |
useSWR | Data fetching hook from swr | EXTERNAL |