React Devtools
sanity-io/sanity
React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.
Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler.
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kingstinct/react-native-healthkit gestures --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .claude/skills/gestures && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .claude/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gesturesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kingstinct/react-native-healthkit gestures --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .agents/skills/gestures && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .agents/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kingstinct/react-native-healthkit gestures --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .cursor/skills/gestures && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .cursor/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/kingstinct/react-native-healthkit.git --path .agents/skills/react-native-best-practices/references/gestures--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kingstinct/react-native-healthkit gestures --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .gemini/skills/gestures && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .gemini/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kingstinct/react-native-healthkit gesturesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .github/skills/gestures && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .github/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kingstinct/react-native-healthkit --skill gestures -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kingstinct/react-native-healthkit gestures --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingstinct/react-native-healthkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-native-best-practices/references/gestures .opencode/skills/gestures && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "gestures" agent skill from https://github.com/kingstinct/react-native-healthkit/tree/master/.agents/skills/react-native-best-practices/references/gestures into .opencode/skills/gestures/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gestures", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
gesturesSoftware Mansion's best practices for gestures in React Native apps using React Native Gesture Handler.
Gestures is an agent skill from kingstinct/react-native-healthkit. Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler. Use when implementing tap, pan, pinch, rotation, swipe, long press, fling, hover, drag, or any touch interaction. Trigger on: 'gesture handler', 'GestureDetector', 'tap gesture', 'pan gesture', 'pinch gesture', 'rotation gesture', 'long press', 'fling', 'hover gesture', 'swipe', 'pinch to zoom', 'drag', 'touch handling', 'Pressable', 'RectButton', 'Swipeable', 'DrawerLayout', 'VirtualGestureDetector', or any…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files (for example `continuous-gestures.md`, `gesture-composition.md` and `gestures.md`).
It sits in Mobile, covering Cross-platform mobile apps. It works with React Native and React. The repository describes itself as: HealthKit bindings for React Native with TypeScript. The licence is MIT.
Read from SKILL.md and the folder at commit 9854ae3. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
docs.swmansion.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Gestures loads about 1.7k tokens when it runs. Until then it costs about 146 tokens; SKILL.md has 520 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from kingstinct/react-native-healthkit at commit 9854ae3, republished under its MIT licence (© kingstinct). 520 words, ~1,675 tokens.
.claude/skills/gestures/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.Software Mansion's production gesture patterns for React Native using Gesture Handler. Never suggest PanResponder when RNGH is available -- it runs on the JS thread and is effectively deprecated.
Check package.json - "react-native-gesture-handler" version
│
├── user asks to migrate v2 -> v3
│ → webfetch https://docs.swmansion.com/react-native-gesture-handler/docs/guides/upgrading-to-3
├── starts with "2." → use builder API (Gesture.Pan(), Gesture.Simultaneous(), useMemo)
└── starts with "3." → use hook API (usePanGesture(), useSimultaneousGestures())| Concept | v2 Builder API | v3 Hook API |
|---|---|---|
| Create gesture | Gesture.Pan().onUpdate(...) | usePanGesture({ onUpdate: ... }) |
| Compose (simultaneous) | Gesture.Simultaneous(a, b) | useSimultaneousGestures(a, b) |
| Compose (race/competing) | Gesture.Race(a, b) | useCompetingGestures(a, b) |
| Compose (exclusive) | Gesture.Exclusive(a, b) | useExclusiveGestures(a, b) |
| Activation callback | .onStart(...) | onActivate: ... |
| Deactivation callback | .onEnd(...) | onDeactivate: ... |
| Change data | .onChange(...) | merged into onUpdate (use changeX, changeY) |
| Cross-component | .simultaneousWithExternalGesture() | .simultaneousWith() |
| Cross-component | .requireExternalGestureToFail() | .requireToFail() |
| Cross-component | .blocksExternalGesture() | .block() |
| Memoization | wrap in useMemo (mandatory) | built into hooks (automatic) |
| SVG / broken hierarchy | GestureDetector (may break hierarchy) | InterceptingGestureDetector + VirtualGestureDetector |
| State manager | callback param stateManager | global GestureStateManager |
| Buttons | RectButton, BorderlessButton | LegacyRectButton, LegacyBorderlessButton (originals renamed) |
GestureHandlerRootView is mandatory -- GestureDetector will crash at runtime without it as an ancestor. Place it as close to the app root as possible. With Expo Router, wrap <Stack /> in the root _layout.tsx:
// app/_layout.tsx
import { Stack } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default function RootLayout() {
return (
<GestureHandlerRootView>
<Stack />
</GestureHandlerRootView>
);
}With React Navigation (no Expo Router), wrap the <NavigationContainer> children. With bare React Native, wrap the app root component. Nested GestureHandlerRootViews are ignored -- only the topmost instance is used. Default style is { flex: 1 }.
v2: useMemo every gesture -- without it, gesture objects recreate on every render, causing recognizers to re-attach and lose state:
const pan = useMemo(() => Gesture.Pan().onBegin(...).onUpdate(...).onEnd(...), []);v3 hook API handles memoization internally.
Never call JS-thread functions directly from gesture callbacks -- when Reanimated is installed, gesture callbacks run on the UI thread (workletized). Calling any non-worklet function (state setters, navigation, audio APIs, native module methods, useCallback handlers) directly from a gesture callback crashes with "Tried to synchronously call a non-worklet function on the UI thread". Wrap every JS-thread call in scheduleOnRN from react-native-worklets:
import { scheduleOnRN } from 'react-native-worklets';
// WRONG -- crashes: calling JS function directly from UI thread
const gesture = useMemo(() =>
Gesture.Pan().onUpdate((e) => {
handleTouch(e.absoluteX, e.absoluteY); // non-worklet function
}),
[]);
// CORRECT -- schedules JS function on RN thread
const gesture = useMemo(() =>
Gesture.Pan().onUpdate((e) => {
scheduleOnRN(handleTouch, e.absoluteX, e.absoluteY);
}),
[]);This applies to all gesture callback types including onTouchesDown, onTouchesMove, onTouchesUp, onStart, onUpdate, onEnd, etc. The only code safe to run directly is worklet-compatible code (shared value mutations, other worklet functions).
Scroll containers -- import ScrollView/FlatList from react-native-gesture-handler, not react-native. Use RectButton for tappable items inside scroll containers:
import { ScrollView, FlatList, RectButton } from 'react-native-gesture-handler';Never mix React Native touch handlers with RNGH in the same component tree -- causes double-tap bugs and gesture conflicts. Pick one system per app.
Callbacks are auto-workletized -- do not add 'worklet'; to callbacks passed directly (inline) to gesture hooks/builders. The Babel plugin handles this. Only add 'worklet'; to standalone functions assigned to variables before being passed as callbacks.
Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.
| File | When to read |
|---|---|
gestures.md | Choosing which gesture type or component to use; callback lifecycle; threading model; GestureStateManager for manual activation; SharedValue in gesture config |
tap-handling.md | RectButton, Pressable, tappable items in scroll containers, tap gestures, double-tap, hit slop |
continuous-gestures.md | Pan (drag), Pinch (zoom), Rotation, Long press, Fling (swipe), Hover; Reanimated integration patterns; offset accumulation; velocity and decay |
gesture-composition.md | Combining gestures on one component (Simultaneous/Race/Exclusive); cross-component relations; VirtualGestureDetector for SVG and Text; Pan inside ScrollView |
swipeable-and-drawer.md | ReanimatedSwipeable for list item actions; ReanimatedDrawerLayout for side menus; custom swipeable with Pan gesture; web scroll compatibility |
testing.md | Jest setup and mocking; fireGestureHandler for testing gestures; common troubleshooting (multiple instances, gesture conflicts, enabled timing) |
© kingstinct, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files in .agents/skills/react-native-best-practices/references/gestures of kingstinct/react-native-healthkit.
Open the folder on GitHubat commit 9854ae3
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in kingstinct/react-native-healthkit, which our catalogue first saw on October 7, 2026.
Gestures next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Gestures this skillkingstinct/react-native-healthkit | 715 | 1 repos | ~1.7k | Automated safety check: Pass | MIT | |
| React Devtoolssanity-io/sanity | 6.4k | 3 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Screenmapaleqsio/screenmap | 239 | — | ~7.2k | Automated safety check: Pass | MIT | |
| Community Migrationjingjing2222/react-native-nitro-geolocation | 116 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Lovdacnlovdacn/ui | 107 | — | ~3.9k | Automated safety check: Pass | MIT | |
| Argent React Native Optimizationbbplayer-app/BBPlayer | 1.1k | — | ~1.3k | Automated safety check: Pass | MIT |
sanity-io/sanity
React DevTools CLI for AI agents. An agent skill from sanity-io/sanity.
aleqsio/screenmap
Generate a visual navigation map of an Expo / React Native or NativeScript app.
jingjing2222/react-native-nitro-geolocation
Migrate React Native apps from @react-native-community/geolocation to react-native-nitro-geolocation.
lovdacn/ui
Manages lovdacn (lvcn) components and projects for Expo & React Native — adding, initializing, fixing, debugging, styling, theming, and composing UI with NativeWind or Uniwind.
bbplayer-app/BBPlayer
Optimizes a React Native app by profiling first to find real bottlenecks, then sweeping for mechanical issues.
fluid-design-io/payload-better-auth-starter
React and React Native file-system architecture patterns that scale.
kingstinct/react-native-healthkit
How to use @kingstinct/react-native-healthkit (and its sibling @react-native-healthkit/health-records) to read, write and subscribe to Apple HealthKit data from React Native / Expo apps.
kingstinct/react-native-healthkit
Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes
kingstinct/react-native-healthkit
How to change the react-native-healthkit monorepo itself (packages/core, packages/react-native-healthkit, packages/health-records, apps/example).
kingstinct/react-native-healthkit
Software Mansion's best practices for multithreading in React Native apps using react-native-worklets.
kingstinct/react-native-healthkit
Build and distribute Expo development clients locally or via TestFlight
kingstinct/react-native-healthkit
Software Mansion's best practices for rich text in React Native using react-native-enriched and react-native-enriched-markdown.
Works with
Categories
Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler. Gestures is an agent skill from kingstinct/react-native-healthkit. Software Mansion's best practices for gestures in React Native apps using React Native Gesture Handler.
Gestures fits situations like: implementing tap; any touch interaction; : gesture handler; gestureDetector.
Run `npx skills add kingstinct/react-native-healthkit --skill gestures -a claude-code`. Or copy the skill folder (.agents/skills/react-native-best-practices/references/gestures in kingstinct/react-native-healthkit) into .claude/skills/gestures in your project. Claude Code loads it when a task matches its description.
Run `npx skills add kingstinct/react-native-healthkit --skill gestures -a codex`. Or copy the skill folder (.agents/skills/react-native-best-practices/references/gestures in kingstinct/react-native-healthkit) into .agents/skills/gestures in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kingstinct/react-native-healthkit --skill gestures -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gestures, .gemini/skills/gestures, .github/skills/gestures and .opencode/skills/gestures in your project.
SKILL.md names no scripts, command-line tools or credentials: Gestures is instructions for the agent only.
SKILL.md names 1 domain. In commands or code: docs.swmansion.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Gestures is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Gestures: React Devtools (sanity-io/sanity, 6.4k stars), Screenmap (aleqsio/screenmap, 239 stars), Community Migration (jingjing2222/react-native-nitro-geolocation, 116 stars) and Lovdacn (lovdacn/ui, 107 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
kingstinct (a GitHub organization) maintains it in kingstinct/react-native-healthkit, which has 715 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 6, 2026.
Source: kingstinct/react-native-healthkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.