From use-legend-functions
Use when looking up what @usels/core or @usels/web hooks exist, their signatures, options, or return types — covers 100+ Observable-native React hooks built on Legend-State
npx claudepluginhub tigerwest/use-legend --plugin use-legend-functionsThis skill uses the workspace's default tool permissions.
> Observable-native React utility hooks built on Legend-State.
references/createProvider.mdreferences/createStore.mdreferences/get.mdreferences/peek.mdreferences/useAnimate.mdreferences/useAutoReset.mdreferences/useBattery.mdreferences/useComputedWithControl.mdreferences/useCountdown.mdreferences/useCssVar.mdreferences/useDataHistory.mdreferences/useDebounceFn.mdreferences/useDebounced.mdreferences/useDebouncedHistory.mdreferences/useDeviceMotion.mdreferences/useDeviceOrientation.mdreferences/useDevicePixelRatio.mdreferences/useDevicesList.mdreferences/useDisplayMedia.mdreferences/useDocumentVisibility.mdConducts multi-source web research with firecrawl and exa MCPs: searches, scrapes pages, synthesizes cited reports. For deep dives, competitive analysis, tech evaluations, or due diligence.
Provides security checklist and hardened patterns for Solidity DeFi AMM contracts, liquidity pools, and swap flows. Covers reentrancy, CEI ordering, donation attacks, oracle manipulation, slippage, admin controls, and integer math.
Guides safe schema changes, data migrations, rollbacks, and zero-downtime deployments for PostgreSQL, MySQL, and ORMs like Prisma, Drizzle, Django.
Observable-native React utility hooks built on Legend-State. 108 hooks across 2 packages:
@usels/coreand@usels/web.
Auto-generated. Run
pnpm skills:buildto regenerate.
| Hook | Description |
|---|---|
useObserveDebounced | Runs a reactive effect debounced — fires only after ms milliseconds of inactivity. Built on `us... |
useObserveIgnorable | Runs a reactive effect with an ignoreUpdates escape hatch. Changes made inside `ignoreUpdates(u... |
useObservePausable | Runs a reactive effect with built-in pause/resume controls. Built on useObserveWithFilter. The ... |
useObserveThrottled | Runs a reactive effect throttled — fires at most once per ms milliseconds. Built on `useObserve... |
useObserveTriggerable | Runs a reactive effect with a manual trigger() method and an ignoreUpdates escape hatch. |
useObserveWithFilter | Runs a reactive effect gated by an EventFilter. The selector always tracks dependencies on every ... |
useWatch | Runs a reactive effect that skips the first effect execution by default (lazy mode). Pass `immedi... |
useWhenever | Shorthand for watching a source and running an effect only when the value is truthy. Built on `wa... |
| Hook | Description |
|---|---|
createStore | Lazily-initialized store with StoreProvider, effectScope lifecycle, inter-store dependencies, a... |
useScope |
| Hook | Description |
|---|---|
useAutoReset | Observable that automatically resets to a default value after a specified delay. Useful for tempo... |
useComputedWithControl | Computed Observable with explicit source control and manual trigger. Only recomputes when the dec... |
useDataHistory | A hook that automatically tracks changes to an Observable and manages undo/redo history. Records ... |
useDebounced | Debounce an Observable value. Creates a read-only Observable that updates only after the source v... |
useDebouncedHistory | A hook that tracks Observable change history with debounce. A thin wrapper around `useDataHistory... |
useLastChanged | A hook that tracks when a source Observable last changed. Returns a read-only Observable containi... |
useManualHistory | A hook for manually managing Observable change history. It only records a snapshot when `commit()... |
useManualReset | Observable with a manual reset() function that restores the value to its default. Unlike `useAu... |
useRef$ | An observable element ref hook that serves as a drop-in replacement for useRef. Works with call... |
useThrottled | Throttle an Observable value. Creates a read-only Observable that updates at most once per interv... |
useThrottledHistory | A hook that tracks Observable change history with throttle. A thin wrapper around useHistory wi... |
| Hook | Description |
|---|---|
useOfflineFirst | Reactive offline-first data binding powered by Legend-State's [sync engine](https://legendapp.com... |
useRemote | Reactive remote data binding powered by Legend-State's [sync engine](https://legendapp.com/open-s... |
useStorage | Reactive storage binding powered by Legend-State's [persist & sync](https://legendapp.com/open-so... |
| Hook | Description |
|---|---|
useCountdown | Reactive countdown timer with pause/resume/reset controls |
useFps | Reactive frames-per-second counter using requestAnimationFrame |
useInterval | Reactive counter that increments on every interval tick |
useIntervalFn | Reactive setInterval wrapper with pause/resume control |
useNow | Reactive current Date that auto-updates on every animation frame or interval |
useRafFn | Call a function on every requestAnimationFrame with pause/resume control |
useTimeAgo | Reactive human-readable time-ago string that auto-updates (powered by date-fns) |
useTimeout | Reactive boolean that becomes true after a given delay |
useTimeoutFn | Reactive wrapper for setTimeout with start/stop control |
useTimestamp | Reactive Unix timestamp (ms) that auto-updates on every animation frame or interval |
| Hook | Description |
|---|---|
createProvider | Collapses React Context + Provider component + useContext hook into a single call. Eliminates boi... |
get | Extract values from MaybeObservable types |
peek | Extract values from MaybeObservable types without registering a tracking dependency |
useDebounceFn | Debounce execution of a function. |
useIsMounted | |
useSupported | SSR-safe browser feature detection as a reactive Observable |
useThrottleFn | Throttle execution of a function. Especially useful for rate limiting execution of handlers on ev... |
useWhenMounted | Execute a callback and expose its return value as a reactive Observable<T |
| Hook | Description |
|---|---|
useAnimate | Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API... |
useCssVar | Reactively read and write CSS custom properties (CSS variables) on DOM elements. |
useEventListener | Registers an event listener with addEventListener on mount and automatically removes it with `r... |
useLocalStorage | Reactive localStorage binding. Thin wrapper around createStorage with `ObservablePersistLocal... |
useMediaQuery | Tracks a CSS media query string as a reactive Observable<boolean>. Subscribes to `MediaQueryLis... |
usePreferredColorScheme | Reactive color scheme preference. Returns a ReadonlyObservable tracking the user's preferred co... |
usePreferredContrast | Reactive contrast preference. Returns a ReadonlyObservable tracking the user's preferred contra... |
usePreferredDark | Reactive dark theme preference. Returns Observable<boolean> that tracks whether the user prefer... |
usePreferredLanguages | Reactive browser languages. Returns a ReadonlyObservable<readonly string[]> tracking the user's... |
usePreferredReducedMotion | Reactive reduced motion preference. Returns a ReadonlyObservable tracking the user's motion pre... |
usePreferredReducedTransparency | Reactive reduced transparency preference. Returns a ReadonlyObservable tracking the user's tran... |
useScreenOrientation | Reactive wrapper for the [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/AP... |
useScriptTag | Dynamically load and unload an external script tag. The script is appended to document.head on ... |
useSessionStorage | Reactive sessionStorage binding. Thin wrapper around createStorage with `ObservablePersistSes... |
useStyleTag | Dynamically inject and remove a <style> tag in document.head. The tag is appended on mount an... |
| Hook | Description |
|---|---|
useDocumentVisibility | Tracks the browser tab's visibility state ('visible' or 'hidden') as a reactive `Observable<D... |
useDraggable | Makes any element draggable using Pointer Events. Returns Observable values for position (x$, `... |
useDropZone | Turns any element into a file drop zone. Tracks drag-over state and validates file types before a... |
useElementBounding | Tracks the bounding rect of a DOM element — x, y, top, right, bottom, left, width, ... |
useElementSize | Tracks the width and height of a DOM element using the [ResizeObserver API](https://developer.moz... |
useElementVisibility | Tracks whether a DOM element is visible within the viewport (or a specified scroll container). Re... |
useIntersectionObserver | Reactive wrapper around the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/W... |
useMouseInElement | Tracks the mouse cursor position relative to a DOM element and reports whether the cursor is insi... |
useMutationObserver | Reactive wrapper around the [MutationObserver API](https://developer.mozilla.org/en-US/docs/Web/A... |
useParentElement | Returns the parentElement of a target DOM node as a reactive Observable. Re-evaluates wheneve... |
useResizeObserver | Observes one or more elements for size changes using the [ResizeObserver API](https://developer.m... |
useWindowFocus | Tracks whether the browser window currently has focus as a reactive Observable<boolean>. Update... |
useWindowSize | Tracks the browser window dimensions as reactive Observable<number> values for width and height... |
| Hook | Description |
|---|---|
useBattery | Reactive wrapper around the [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API... |
useDeviceMotion | Reactive DeviceMotionEvent.... |
useDeviceOrientation | Tracks the physical orientation of the device using the deviceorientation window event, exposin... |
useDevicePixelRatio | Reactively tracks window.devicePixelRatio using a matchMedia listener. Automatically updates ... |
useDevicesList | Reactively enumerates media input/output devices via the MediaDevices API. Provides filtered li... |
useDisplayMedia | Reactive wrapper around the [MediaDevices.getDisplayMedia()](https://developer.mozilla.org/en-US/... |
useElementByPoint | Reactively tracks the DOM element at specified x/y coordinates using `document.elementFromPoint()... |
useElementHover | Reactively tracks whether a DOM element is being hovered. Supports optional enter/leave delays fo... |
useFocus | Reactive utility that tracks whether a DOM element has focus, with two-way binding — read the cur... |
useFocusWithin | Reactive utility that tracks whether focus is within a container element or any of its descendant... |
useGeolocation | Reactively tracks the user's geographic position using the Geolocation API. Wraps `navigator.geol... |
useIdle | Tracks whether the user is inactive (idle). Monitors user interaction events like mouse movement,... |
useInfiniteScroll | Triggers a load callback whenever the scroll position reaches a boundary of a scrollable element,... |
useKeyModifier | Reactively tracks the state of a keyboard modifier key (Shift, Control, Alt, CapsLock, etc.) usin... |
useMagicKeys | Reactive key-press state — access any key as a ReadonlyObservable<boolean> that is true while... |
useMouse | Tracks the mouse/pointer cursor position reactively. Supports multiple coordinate systems (page... |
useMousePressed | Tracks mouse/touch press state reactively. Returns an observable boolean for the pressed state an... |
useNavigatorLanguage | Reactively tracks the browser's preferred language via navigator.language. Automatically update... |
useNetwork | Reactive network status tracking. Provides online/offline state via navigator.onLine and detail... |
useOnClickOutside | Listen for clicks outside of a target element. Useful for closing modals, dropdowns, and popovers... |
useOnElementRemoval | Fires a callback when the target element or any ancestor containing it is removed from the DOM. U... |
useOnKeyStroke | |
useOnline | Reactive online state. A thin wrapper around useNetwork that returns... |
useOnLongPress | Detect long press gestures on an element. Fires a handler after a configurable delay, with suppor... |
useOnStartTyping | Fires a callback when the user starts typing on non-editable elements. Useful for implementing se... |
usePageLeave | Reactively detects when the mouse cursor leaves the page. Useful for showing exit-intent popups, ... |
useParallax | Creates parallax effects easily. Uses useDeviceOrientation on mobile devices and falls back to ... |
usePointer | Reactive pointer state tracking. Monitors pointerdown, pointermove, pointerup, and `pointer... |
usePointerLock | Reactive wrapper around the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/P... |
usePointerSwipe | Reactive swipe detection based on PointerEvents. Detects swipe direction and distance. |
useScroll | Tracks the scroll position, scroll direction, arrived state (top/bottom/left/right), and scrollin... |
useScrollLock | Lock and unlock scrolling on a target element or document.body. Useful for modals, drawers, and... |
useSpeechRecognition | Reactive wrapper around the [Web Speech Recognition API](https://developer.mozilla.org/en-US/docs... |
useSpeechSynthesis | Reactive wrapper around the [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/Sp... |
useSwipe | Reactive swipe detection based on TouchEvents. Detects swipe direction and length. |
useTextSelection | Reactively tracks the current text selection on the page. Listens to the selectionchange event ... |
useUserMedia | Reactive wrapper around the [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/doc... |
useWindowScroll | Tracks the window scroll position, direction, arrived state, and scrolling status as reactive `Ob... |
Total: 108 hooks