Menu
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 module
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Call the externally deployed DSG QUBO Policy Optimizer API to run a deterministic QUBO/Ising policy optimization. Use when a user wants to run a real optimization against the hosted service rather than the local Kotlin engine: registering/logging in for an api_key, checking account usage, and submitting an optimization run for a regulatory domain under a budget cap. Auth is an `api_key` query parameter that must come from runtime env, never from the repo. Running a real optimization may trigger solver work and may incur cost under the service's pricing tier.
Reason about deterministic QUBO/Ising policy optimization and Z3/SMT-style formal constraint verification using the Compliance-ising-z3-Deterministic engine. Use when a user asks to optimize a policy/control selection under a budget, verify logical constraints (implication, equivalence, mutual exclusion, at-least-one, cost cap), run a what-if counterfactual on budget shifts, or produce a reproducible, hash-chained compliance decision. The underlying engine is native Kotlin (no external Z3 process); constraint checks are Z3/SMT-style, implemented deterministically.
Run a studio-style agent control layer that turns a user goal into an explainable plan, deterministic decision flow, permission verdicts, and browser-first execution after approval. Use when the user
Use this skill when creating, packaging, validating, publishing, or maintaining DSG GitHub Marketplace Actions. It turns DSG control-plane, action-layer permission gates, deterministic GO/NO-GO valida
Use this skill for DSG multi-source governance work that combines UI trust upgrades, action-layer permission gates, deterministic execution, marketplace/enterprise cutover, portable SaaS architecture
Apply the DSG ONE / ProofGate truth boundary and claim policy. Use when writing or reviewing any status, readiness, compliance, or capability statement destined for code, docs, commits, PRs, issues, comments, logs, or a response. Classifies each statement as verified fact / inference / pending / blocked / not verified, and flags forbidden readiness claims that require fresh evidence.
| name | vercel-react-native-skills |
| license | MIT |
| metadata | {"author":"vercel","version":"1.0.0"} |
| description | 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 module |
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
Reference these guidelines when:
| 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- |
list-performance-virtualize - Use FlashList for large listslist-performance-item-memo - Memoize list item componentslist-performance-callbacks - Stabilize callback referenceslist-performance-inline-objects - Avoid inline style objectslist-performance-function-references - Extract functions outside renderlist-performance-images - Optimize images in listslist-performance-item-expensive - Move expensive work outside itemslist-performance-item-types - Use item types for heterogeneous listsanimation-gpu-properties - Animate only transform and opacityanimation-derived-value - Use useDerivedValue for computed animationsanimation-gesture-detector-press - Use Gesture.Tap instead of Pressablenavigation-native-navigators - Use native stack and native tabs over JS navigatorsui-expo-image - Use expo-image for all imagesui-image-gallery - Use Galeria for image lightboxesui-pressable - Use Pressable over TouchableOpacityui-safe-area-scroll - Handle safe areas in ScrollViewsui-scrollview-content-inset - Use contentInset for headersui-menus - Use native context menusui-native-modals - Use native modals when possibleui-measure-views - Use onLayout, not measure()ui-styling - Use StyleSheet.create or Nativewindreact-state-minimize - Minimize state subscriptionsreact-state-dispatcher - Use dispatcher pattern for callbacksreact-state-fallback - Show fallback on first renderreact-compiler-destructure-functions - Destructure for React Compilerreact-compiler-reanimated-shared-values - Handle shared values with compilerrendering-text-in-text-component - Wrap text in Text componentsrendering-no-falsy-and - Avoid falsy && for conditional renderingmonorepo-native-deps-in-app - Keep native dependencies in app packagemonorepo-single-dependency-versions - Use single versions across packagesfonts-config-plugin - Use config plugins for custom fontsimports-design-system-folder - Organize design system importsjs-hoist-intl - Hoist Intl object creationRead individual rule files for detailed explanations and code examples:
rules/list-performance-virtualize.md
rules/animation-gpu-properties.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md