A mobile feed can struggle because too many rows are mounted, images are expensive, or each interaction rerenders the visible rows. This skill separates those concerns and also covers animation, navigation, and native UI choices. It is most useful when attached to a specific screen and symptom.
Install and invoke
From the project root, use a terminal with Node.js and npm to install this individual skill for Claude Code. For Codex, replace --agent claude-code with --agent codex. This is a project-scoped installation. Refresh or reopen the agent session after installation, then name the skill explicitly in your request.
npx skills@latest add vercel-labs/agent-skills --skill vercel-react-native-skills --agent claude-code
Reproduce one kind of slowness
Adapt this first request to your project:
Use vercel-react-native-skills to review a product screen with roughly 500 image rows and scrolling jank. Check React Native, Expo, and list-library versions first. Inspect virtualization, row props, and image loading; propose the smallest change that preserves filtering and detail navigation, with a device validation plan.
Provide the target device, operating system, data size, and screen. Distinguish slow initial mounting from scrolling jank and delayed taps: they can have different causes. Keep the dataset and interaction sequence stable so the proposed change can be evaluated against the same experience.
Control both row count and row cost
The upstream rules favor virtualized lists and provide examples using LegendList and FlashList. Unlike mapping an entire array inside a ScrollView, virtualization limits how much content is mounted at once. First inspect the library already in the project and its compatibility requirements. Tuning the current list may be more appropriate than introducing another dependency.
Next, examine each row. Unstable object or callback props, repeated data transformations, and poorly sized images can add work even when virtualization is present. Projects using React Compiler may not need the same manual memoization as projects without it. Ask the agent to read the build configuration rather than adding memo and useCallback mechanically.
Preserve stable identifiers, filtering behavior, and the handling of different row types. Recycled rows must display the current item's data and image, not state accidentally retained from a previous item. Include empty content and image failure in the check, especially when a cell contains more than simple text.
Check interaction as well as appearance
For animation, the guidance emphasizes transform and opacity where appropriate. Changes must still preserve gestures, taps, and navigation. A screenshot cannot establish that tapping a row opens the correct detail screen or that the list retains a sensible position after a filter changes.
The first delivery should be a small reviewable diff, any dependency implications, and a device test sequence. Debug menus and development tooling affect measurements, so compare representative release behavior when assessing smoothness. Source review alone cannot establish performance on a low-end device, and a successful check on one platform does not automatically verify the other platform's native navigation. Use the skill to narrow the investigation, then validate the resulting interaction.
Give the agent reproducible device conditions
Mobile performance varies by device. State handset or emulator, OS version, whether this is a development build, approximate row count, image size and exact action. For example: “Open the product list, scroll continuously to item 300, navigate back and reopen it.” That is more diagnostic than “the list is slow” because it separates mount time, scroll rendering and state restoration.
First confirm the list library and version really virtualize rows. Then inspect stable IDs, heterogeneous row types, image dimensions and expensive per-row work. Advice about React Compiler, FlashList or another list library must fit the project’s configuration; a new dependency is not automatically the remedy. Image optimization should preserve placeholders so layout does not jump during scrolling.
Return to real interaction for acceptance
On the same device and dataset, recheck filtering, detail navigation, back position, fast scrolling, offline and loading-error states. Faster scrolling with stale products or wrong detail links is not success. Record the original symptom and available before/after measurements, preferably in a release-like build. Source-level guidelines generate candidates; actual effect needs device verification.
Another case: a fast-scrolling list shows the wrong avatar
A performance issue may appear as stale content rather than dropped frames. If a contact list briefly pairs the wrong avatar and name after fast scrolling or filtering, ask the agent to inspect stable keys, asynchronous image loading and row reuse: “Reproduce the row ID and image URL before and after filtering. Determine whether caching, index keys or recycled state explain the mismatch; do not hide it with memoization.” For acceptance, scroll quickly through a dataset with duplicate names, missing avatars and different image sizes, then open details to confirm identity. A list-library change must preserve screen-reader labels and tap targets; smooth scrolling with mismatched content is not a fix.
When naming prevents an installed skill from loading
If the installer says react-native-skills is not found, check whether you supplied the folder name rather than the skill’s declared name. One user found the directory named react-native-skills while its frontmatter declares vercel-react-native-skills; in their runtime it was installed but could not be resolved. List the installer’s recognized names, install using the name it reports, then have the agent read the installed file to confirm this runtime can actually invoke it.