{"id":"3608347d-9294-4f7c-8f4e-cb15bfddaca4","slug":"livetradingcoder-react-hooks-common-ui-patterns","name":"react-hooks","description":"Generate production-ready custom React hooks for common UI patterns. Use when the user needs hooks for state management, DOM interactions, async operations, or responsive design in React applications. Covers: useToggle, useDebounce, useThrottle, useFetch, useAsync, useLocalStorage, useInterval, useKeyPress, useHover, useMediaQuery, useOnClickOutside, useOnScreen, useScrollToEnd, useScrolledPastThreshold, useWindowSize.","canonicalUrl":"https://xpersona.co/skill/livetradingcoder-react-hooks-common-ui-patterns","sourceUrl":"https://github.com/livetradingcoder/react-hooks-common-ui-patterns","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"livetradingcoder","label":"Livetradingcoder","url":"https://github.com/livetradingcoder/react-hooks-common-ui-patterns"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T01:14:12.423Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Livetradingcoder"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","category":"integration","label":"Crawlable docs","value":"6 indexed pages on the official domain","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true},{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Livetradingcoder","href":"https://github.com/livetradingcoder/react-hooks-common-ui-patterns","sourceUrl":"https://github.com/livetradingcoder/react-hooks-common-ui-patterns","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:14:12.814Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://xpersona.co/api/v1/agents/livetradingcoder-react-hooks-common-ui-patterns/contract","sourceUrl":"https://xpersona.co/api/v1/agents/livetradingcoder-react-hooks-common-ui-patterns/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T01:14:12.814Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://xpersona.co/api/v1/agents/livetradingcoder-react-hooks-common-ui-patterns/trust","sourceUrl":"https://xpersona.co/api/v1/agents/livetradingcoder-react-hooks-common-ui-patterns/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["Trust evidence available"],"agentCard":{"name":"react-hooks","description":"Generate production-ready custom React hooks for common UI patterns. Use when the user needs hooks for state management, DOM interactions, async operations, or responsive design in React applications. Covers: useToggle, useDebounce, useThrottle, useFetch, useAsync, useLocalStorage, useInterval, useKeyPress, useHover, useMediaQuery, useOnClickOutside, useOnScreen, useScrollToEnd, useScrolledPastThreshold, useWindowSize.","source":"GITHUB_OPENCLEW","sourceId":"github:1161517849","repository":"https://github.com/livetradingcoder/react-hooks-common-ui-patterns","documentation":"https://xpersona.co/skill/livetradingcoder-react-hooks-common-ui-patterns/agent/livetradingcoder-react-hooks-common-ui-patterns","protocols":["OPENCLEW"],"languages":["typescript"],"install":{"command":"git clone https://github.com/livetradingcoder/react-hooks-common-ui-patterns.git","ecosystem":"git"},"examples":[{"kind":"example","language":"jsx","snippet":"import { useState, useCallback } from 'react'\n\nfunction useToggle(initialState = false) {\n  const [state, setState] = useState(initialState)\n  const toggle = useCallback(() => setState((prev) => !prev), [])\n  return [state, toggle]\n}"},{"kind":"example","language":"jsx","snippet":"import { useState } from 'react'\n\nfunction useLocalStorage(key, initialValue) {\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key)\n      return item ? JSON.parse(item) : initialValue\n    } catch (error) {\n      console.log(error)\n      return initialValue\n    }\n  })\n\n  function setValue(value) {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value\n      setStoredValue(valueToStore)\n      window.localStorage.setItem(key, JSON.stringify(valueToStore))\n    } catch (error) {\n      console.log(error)\n    }\n  }\n\n  return [storedValue, setValue]\n}"}]}}