vercel-react-native-skills
vercel-labs / agent-skills
About vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
Install vercel-react-native-skills
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skillsBasic information
What it does
Covers eight rule categories prioritized by impact: list performance (FlashList, memoization, callback stability), animations (GPU properties, derived values), navigation, UI patterns, state management, rendering, monorepo structure, and configuration
List performance rules address critical concerns like virtualizing large lists, optimizing images, and avoiding inline objects that trigger unnecessary re-renders
Animation guidance focuses on GPU-accelerated properties (transform, opacity) and Reanimated patterns; navigation recommends native stack and tab navigators over JavaScript alternatives
Includes rules for modern UI patterns: expo-image for all images, Pressable over TouchableOpacity, native modals, and safe area handling in ScrollViews
More skills in Creative & media
remotion-to-hyperframes
heygen-com / hyperframes
Port an existing Remotion (React) composition's source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.
gsap
heygen-com / hyperframes
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.
website-to-video
heygen-com / hyperframes
Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand assets. Use for portfolio / blog / docs / landing-page showcases. Not a product launch or promo, even from a URL (/product-launch-video). Unclear → /hyperframes.
pr-to-video
heygen-com / hyperframes
Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.
music-to-video
heygen-com / hyperframes
Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.
animejs
heygen-com / hyperframes
Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.