vercel-react-native-skills

vercel-react-native-skills is a skill for Claude Code from ariadoss/superskills. It costs 57 tokens per session (944 once invoked), scanned A, a copy of vercel-react-native-skills, MIT.

A set of React Native and Expo guidelines for building mobile apps, covering lists, animations, navigation, interface patterns, state, rendering, and native configuration. React Native lets developers build mobile interfaces with React, and Expo provides tools around it.

In plain words
What is it for?
Use it when building or optimizing React Native or Expo apps, including list performance, animations, native modules, fonts, and monorepo projects.
Why use it?
It helps address common mobile-app performance and structure problems, including slow lists, unnecessary rendering, and difficult native setup.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the superskills-design plugin — 40 skills shipped together

Good fit Use it when building or optimizing React Native or Expo apps, including list performance, animations, native modules, fonts, and monorepo projects.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ariadoss/superskills/vercel-react-native-skills
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add ariadoss/superskills --skill vercel-react-native-skills
Clone the repo
git clone --depth 1 https://github.com/ariadoss/superskills

Made for: Claude Code.

Or install superskills-design, the plugin that ships this one along with the rest of its 40 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for vercel-react-native-skills

README.md
[![agentmods](https://agentmods.dev/badge/skills/ariadoss/superskills/vercel-react-native-skills/github.svg)](https://agentmods.dev/skills/ariadoss/superskills/vercel-react-native-skills)
Your own site
<a href="https://agentmods.dev/skills/ariadoss/superskills/vercel-react-native-skills"><img src="https://agentmods.dev/badge/skills/ariadoss/superskills/vercel-react-native-skills/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for vercel-react-native-skills

Your own site · 80×15
<a href="https://agentmods.dev/skills/ariadoss/superskills/vercel-react-native-skills"><img src="https://agentmods.dev/badge/skills/ariadoss/superskills/vercel-react-native-skills.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 57 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 944 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00057 $0.00944
Opus 5.5 $0.00023 $0.00378
Sonnet 5.5 $0.00011 $0.00189
Haiku 4.5 $0.00006 $0.00094

Measured 1mo ago against content hash 58073a9efae1, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

vercel-react-native-skills scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to vercel-react-native-skills — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

design-skills/vercel-react-native-skills/SKILL.md · 96 lines

How it starts

The opening of the file, as written. The whole thing — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React Native Skills

Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.

When to Apply

Reference these guidelines when:

  • Building React Native or Expo apps
  • Optimizing list and scroll performance
  • Implementing animations with Reanimated
  • Working with images and media
  • Configuring native modules or fonts
  • Structuring monorepo projects with native dependencies

Rule Categories by Priority

Priority Category Impact Prefix
1 List Performance CRITICAL list-performance-
2 Animation HIGH animation-
3 Navigation HIGH navigation-
4 UI Patterns HIGH ui-
5 State Management MEDIUM react-state-
6 Rendering MEDIUM rendering-
7 Monorepo MEDIUM monorepo-
8 Configuration LOW fonts-, imports-

Quick Reference

1. List Performance (CRITICAL)

  • list-performance-virtualize - Use FlashList for large lists
  • list-performance-item-memo - Memoize list item components
  • list-performance-callbacks - Stabilize callback references
  • list-performance-inline-objects - Avoid inline style objects
  • list-performance-function-references - Extract functions outside render
  • list-performance-images - Optimize images in lists
  • list-performance-item-expensive - Move expensive work outside items
  • list-performance-item-types - Use item types for heterogeneous lists

2. Animation (HIGH)

  • animation-gpu-properties - Animate only transform and opacity
  • animation-derived-value - Use useDerivedValue for computed animations
  • animation-gesture-detector-press - Use Gesture.Tap instead of Pressable

Read the full file on GitHub · 96 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago First seen · 96 lines · 57 tokens per session scan A 58073a9efae1

Subscribe to this mod's changes

vercel-react-native-skills is a skill published in the GitHub repository ariadoss/superskills (12 stars, last pushed 3d ago), licensed MIT. It adds 57 tokens to every session and 944 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to vercel-react-native-skills, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

agent-spec-mobile-react-native

Agent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native.

ruvnet/ruflo · 22 tokens

expo-native-ui

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

expo/skills · 63 tokens

expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use for brownfield, embedding a React Native screen in SwiftUI/UIKit or Kotlin, or AAR/XCFramework packaging. Covers isolated and integrated approaches. For building or distributing a purely native app with EAS, use eas-app-stores.

expo/skills · 70 tokens

react-native-testing

Write tests using React Native Testing Library (RNTL) v13 and v14 (@testing-library/react-native). Use when writing, reviewing, or fixing React Native component tests. Covers: render, screen, queries (getBy/getAllBy/queryBy/findBy), Jest matchers, userEvent, fireEvent, waitFor, and async patterns. Supports v13 (React…

callstack/react-native-testing-library · 134 tokens

truesheet-usage

Consumer-side guide for integrating @lodev09/react-native-true-sheet into a React Native app. Use this skill whenever the user wants to add, configure, control, or debug a bottom sheet using TrueSheet — including ref-based sheets, named global sheets, web support with TrueSheetProvider/useTrueSheet, React Navigation…

lodev09/react-native-true-sheet · 171 tokens

taro-ui-guide

Guides installation, Taro config, styling, and usage of taro-ui (At components) for WeChat/Alipay/H5/RN. Use when building Taro apps with taro-ui, picking components, theming, i18n, or modifying packages/taro-ui source.

jd-opensource/taro-ui · 66 tokens