Use Vercel React Native Skills by Vercel Labs to build and review React Native and Expo interfaces. Explore guidance for long lists, animations, navigation, images, and native dependencies, then apply the relevant patterns to a screen and verify its behavior on your target devices.
Bring a mobile screen, target device, and troublesome interaction into the task brief. Prepare a request that distinguishes list rendering, gestures, and platform behavior, with proposed changes checked through the same path on representative devices.
Specify Expo or React Native, device class, and the gesture or list that fails.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatPreview and copy the request. It is not sent automatically from this page.
Reference: Vercel React Native Skills https://github.com/vercel-labs/agent-skills/blob/main/skills/react-native-skills/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: Review this Expo feed screen. Scrolling stutters on mid-range Android devices; identify the likely list and image bottlenecks. Expected deliverable: Likely bottlenecks with affected components and a device-based verification plan.
Vercel React Native Skills is an Agent Skill for React Native and Expo development. Its mobile-specific rules address list performance, animation, navigation, interface patterns, state, rendering, monorepos, and configuration. This gives an agent a reference for issues that depend on device rendering or native platform behavior, such as scrolling, gestures, safe areas, and media. Start with a screen and a reproducible symptom so the agent can select the relevant rules and propose a focused implementation. Installing the Skill provides instructions rather than Expo packages or native dependencies. The resulting code still needs to be tested on the iOS and Android environments your application supports.
Scrolling performance, delayed gestures, and platform differences need evidence from the target device. Explore how Vercel React Native Skills separates rendering, animation, and native-layout checks instead of applying web assumptions to every mobile screen.
Dropped frames during scrolling need evidence from the target device and the actual list implementation. Inspect virtualization, item rendering, callback stability, and image settings before rebuilding the screen. After addressing a demonstrated bottleneck, repeat the same scrolling interaction on the same device to assess the change.
A delayed gesture should be traced through its implementation and the properties being animated. Review the choice of gesture primitives and whether the animation uses compositor-friendly properties, then check the changed behavior during a continuous interaction. A single final frame cannot show whether the gesture now follows the user's movement.
A screen that differs between iOS and Android needs both sets of screenshots, device sizes, and native settings. Check safe areas, navigation, images, fonts, and platform APIs rather than carrying web-layout assumptions across unchanged. Verify the platform-specific cause and the corrected behavior on each affected side.
A React Native application inside a monorepo can depend on packages configured differently across the workspace. Compare native dependency placement and package versions with the Skill’s monorepo rules, then identify mismatches before changing the setup. Keep the proposed correction bounded and verify the affected application under its actual platform configuration rather than assuming that a shared JavaScript package guarantees compatible native dependencies.
Mobile changes need a defined screen, target platform, and interaction to improve. Use the relevant React Native rules to bound implementation, then check the same flow on representative devices rather than assuming iOS and Android behave identically.
Identify the screen, platform, and interaction that shows the issue. Record your React Native or Expo version and test device.
Ask the agent to inspect the matching list, animation, navigation, or media code. Keep the implementation focused on the reproduced issue.
Repeat the flow on representative iOS and Android devices. Compare responsiveness and confirm gestures, layout, and content remain correct.
Read another Skill guide and check its original source before using it.
