How do I install the React Simplikit skill?

Run npx skillmds@latest add toss/react-simplikit in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the React Simplikit skill do?

Selects and applies react-simplikit hooks, components and utils (useDebounce, useThrottle, useToggle, useBooleanState, useCounter, useList, useMap, useSet, useInterval, useTimeout, usePrevious, usePreservedCallback, useOutsideClickEffect, useIntersectionObserver, useStorageState, useLongPress, SwitchCase, Separated, mergeRefs, buildContext, ...) instead of hand-written equivalents, including the mobile-web keyboard, safe-area, visual viewport and body-scroll-lock hooks. Use when writing React state or effect logic, debouncing or throttling, boolean/counter/list/map/set state, intervals and timeouts, click-outside, long-press or double-click handling, viewport visibility or impression tracking, persisted state in localStorage/sessionStorage, conditional rendering, merging refs, React Context boilerplate, or SSR-safe browser access, and whenever the project depends on react-simplikit. It is listed under Web & Frontend on SkillMD.

Is React Simplikit safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Simplikit?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Simplikit free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published React Simplikit?

toss (@toss) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Simplikit by toss — Agent Skill

Name: React Simplikit
Author: toss

react-simplikit

Zero-dependency React hooks, components and utils in one package, react-simplikit. Alongside state/logic and browser-event hooks it covers the mobile-web problems — on-screen keyboard, safe-area insets, visual viewport, body scroll lock — that usually get hand-written.

Critical rules

Check the catalog before hand-writing debounce, throttle, toggle, counter, list/map/set state, interval, timeout, previous-value, stable-callback, click-outside, long-press, intersection/visibility or storage-persisted-state logic. If a matching entry exists, use it. Reimplementing these is the most common mistake this skill exists to prevent.
Never guess a signature. Before using an entry, read references/<name>.md — it has the parameter table, return shape and a working example.
One import path, named imports only: import { useDebounce, useKeyboardHeight } from 'react-simplikit'. There is no subpath and no default export.
SSR: never branch server-rendered markup on a value that comes from a browser API hook. Use useIsClient for client-only rendering instead of typeof window checks.
Do not wrap or re-export these hooks in the consumer project just to rename them; use them directly so upgrades stay mechanical.

Common needs → use

Backticks in this table mark catalog entries only.

Need	Use
Debounce a callback (search input, resize)	`useDebounce` / `useDebouncedCallback`
Throttle a callback (scroll, pointer move)	`useThrottle` / `useThrottledCallback`
Boolean on/off, flip only	`useToggle`
Boolean on/off with explicit set-true / set-false	`useBooleanState`
Numeric state with bounds/step	`useCounter`
Array / Map / Set state with immutable helpers	`useList` / `useMap` / `useSet`
State persisted in localStorage / sessionStorage	`useStorageState`
Declarative setInterval / setTimeout	`useInterval` / `useTimeout`
Stable callback identity without stale closures	`usePreservedCallback`
Skip re-renders when an object is deep-equal	`usePreservedReference`
Run an async function in an effect	`useAsyncEffect`
Effect that runs only when a condition holds	`useConditionalEffect`
Side effect tied to a DOM ref (attach/detach)	`useRefEffect`
Click / tap outside an element (close menu, modal)	`useOutsideClickEffect`
Long press / double click	`useLongPress` / `useDoubleClick`
Element enters or leaves the viewport	`useIntersectionObserver`
How long an element stayed visible (impression tracking)	`useImpressionRef` / `ImpressionArea`
React to tab / page visibility changes with a callback	`useVisibilityEvent`
Read the current tab / page visibility as state	`usePageVisibility`
Device location	`useGeolocation`
Combine multiple refs into one	`mergeRefs`
Controlled-or-uncontrolled component state	`useControlledState`
Input onChange boilerplate	`useInputState`
Render one of several components by key	`SwitchCase`
Put a separator between children	`Separated`
Create a Context + Provider + hook without boilerplate	`buildContext`
Merge props objects (handlers chained, className joined)	`mergeProps`
Client-only rendering guard	`useIsClient`
Fixed-bottom element must avoid the on-screen keyboard (mobile web)	`useAvoidKeyboard`
Keyboard height / visibility (mobile web)	`useKeyboardHeight`, `isKeyboardVisible`
Notch / home-indicator insets (mobile web)	`useSafeAreaInset`, `getSafeAreaInset`
Lock body scroll while a sheet/modal is open (mobile web)	`useBodyScrollLock`

Workflow

Match the need against the table above, then confirm in the full catalog.
Read references/<name>.md for the signature and example. Do not rely on memory.
Import from react-simplikit.
If nothing matches, write plain React — do not stretch a hook past its documented purpose.

Catalog

hooks

Name	Description
`useAsyncEffect`	`useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
`useAvoidKeyboard`	`useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard.
`useBodyScrollLock`	`useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
`useBooleanState`	`useBooleanState` is a React hook that simplifies managing a boolean state.
`useCallbackOncePerRender`	`useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
`useConditionalEffect`	`useConditionalEffect` is a React hook that conditionally executes effects based on a predicate function.
`useControlledState`	`useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
`useCounter`	`useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
`useDebounce`	`useDebounce` is a React hook that returns a debounced version of the provided callback function.
`useDebouncedCallback`	`useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
`useDebouncedValue`	`useDebouncedValue` is a React hook that returns a debounced copy of the given value.
`useDoubleClick`	`useDoubleClick` is a React hook that differentiates between single and double click events.
`useGeolocation`	`useGeolocation` is a React hook that retrieves and tracks the user's geographical location.
`useImpressionRef`	`useImpressionRef` is a React hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
`useInputState`	`useInputState` is a React hook that manages an input state with optional value transformation.
`useIntersectionObserver`	`useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
`useInterval`	`useInterval` is a React hook that executes a function at a specified interval.
`useIsClient`	`useIsClient` is a React hook that returns `true` only in the client-side environment.
`useIsomorphicLayoutEffect`	`useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
`useKeyboardHeight`	`useKeyboardHeight` is a React hook that tracks the on-screen keyboard height.
`useList`	A React hook that manages an array as state.
`useLoading`	`useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
`useLongPress`	`useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
`useMap`	A React hook that manages a key-value Map as state.
`useNetworkStatus`	`useNetworkStatus` is a React hook that provides access to the Network Information API.
`useOutsideClickEffect`	`useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
`usePageVisibility`	`usePageVisibility` is a React hook that detects page visibility changes.
`usePreservedCallback`	`usePreservedCallback` is a React hook that maintains a stable reference to a callback function while ensuring it always has access to the latest state or props.
`usePreservedReference`	`usePreservedReference` is a React hook that helps maintain the reference of a value when it hasn't changed, while ensuring you can safely use the latest state.
`usePrevious`	`usePrevious` is a React hook that returns the previous value of the input state.
`useRefEffect`	`useRefEffect` is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
`useSafeAreaInset`	`useSafeAreaInset` is a React hook that tracks safe area inset changes.
`useScrollDirection`	`useScrollDirection` is a React hook that detects scroll direction.
`useSet`	A React hook that manages a Set as state.
`useStorageState`	`useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
`useThrottle`	`useThrottle` is a React hook that creates a throttled version of a callback function.
`useThrottledCallback`	`useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
`useThrottledValue`	`useThrottledValue` is a React hook that returns a throttled copy of the given value.
`useTimeout`	`useTimeout` is a React hook that executes a callback function after a specified delay.
`useToggle`	`useToggle` is a React hook that simplifies managing a boolean state.
`useVisibilityEvent`	`useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
`useVisualViewport`	`useVisualViewport` is a React hook that tracks Visual Viewport changes.

components

Name	Description
`ImpressionArea`	`ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
`Separated`	`Separated` is a component that inserts a specified component between each child element.
`SwitchCase`	`SwitchCase` is a component that allows you to declaratively render components based on a given value, similar to a `switch-case` statement.

utils

Name	Description
`buildContext`	`buildContext` is a helper function that reduces repetitive code when defining React Context.
`disableBodyScrollLock`	`disableBodyScrollLock` is a utility function that unlocks the body scroll.
`enableBodyScrollLock`	`enableBodyScrollLock` is a utility function that locks the body scroll.
`getKeyboardHeight`	`getKeyboardHeight` is a utility function that returns the current on-screen keyboard height in pixels.
`getSafeAreaInset`	`getSafeAreaInset` is a utility function that returns all safe area insets in pixels as an object.
`isAndroid`	`isAndroid` is a utility function that detects whether the current device is running Android.
`isIOS`	`isIOS` is a utility function that detects whether the current device is running iOS or iPadOS.
`isKeyboardVisible`	`isKeyboardVisible` is a utility function that checks whether the on-screen keyboard is currently visible.
`isServer`	`isServer` is a utility function that checks if the code is running on the server.
`mergeProps`	`mergeProps` is a utility function that merges multiple props objects into a single object.
`mergeRefs`	This function takes multiple refs (RefObject or RefCallback) and returns a single ref that updates all provided refs.
`subscribeKeyboardHeight`	`subscribeKeyboardHeight` is a utility function that subscribes to changes in the on-screen keyboard height.

Learn more

Docs: https://react-simplikit.slash.page
Machine-readable index: https://react-simplikit.slash.page/llms.txt (full text: /llms-full.txt; any docs page + .md returns raw markdown)
Source: https://github.com/toss/react-simplikit

React Simplikit

File contents

react-simplikit

Critical rules

Common needs → use

Workflow

Catalog

hooks

components

utils

Learn more

Frequently asked questions

React Simplikit

File contents

react-simplikit

Critical rules

Common needs → use

Workflow

Catalog

hooks

components

utils

Learn more

Related skills

Frequently asked questions

How do I install the React Simplikit skill?

What does the React Simplikit skill do?

Is React Simplikit safe to use?

Which AI agents work with React Simplikit?

Is React Simplikit free to use?

Who published React Simplikit?