Buenas prácticas de React Native y Expo para apps móviles performantes: componentes, rendimiento de listas, animaciones y módulos nativos.'
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
74 tok en reposo
155 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add vercel-labs/agent-skills --skill react-native-skills --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
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
Reproducido de vercel-labs/agent-skills bajo licencia MIT. Leer esta página en markdown.
42 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 9 skills. Si instalas uno, normalmente ya tienes los demás.
Para optimizar coste y rendimiento en proyectos Vercel desplegados (Next.js, SvelteKit, Nuxt, Astro limitado): recopila métricas, uso y config, investiga solo candidatos respaldados por métricas y produce recomendaciones verificadas.
Guía para implementar animaciones nativas y fluidas con la View Transition API de React (`<ViewTransition>`, `addTransitionType`, pseudo-elementos CSS de transición).
Revisa documentos o prosa para verificar el cumplimiento de las Writing Guidelines; úsalo al pedir "review my docs", "check writing style" o "audit prose".
Despliega y gestiona proyectos en Vercel usando autenticación por token. Útil para usar Vercel CLI con access tokens en vez de login interactivo, p. ej. "deploy to vercel", "set up vercel".
Guía de optimización de rendimiento para React y Next.js de Vercel Engineering, con 70 reglas en 8 categorías priorizadas por impacto para refactorizar y generar código.
Despliega aplicaciones y sitios web en Vercel. Úsalo cuando el usuario pida acciones de despliegue como 'deploy my app', 'push this live' o 'create a preview deployment'.
Úsalo al empezar trabajo de feature que necesita aislamiento del workspace actual, o antes de ejecutar planes de implementación: asegura un workspace aislado vía herramientas nativas o fallback a git worktree.
Úsala al crear nuevas skills, editar skills existentes o verificar que funcionan antes de desplegarlas.
Parte un plan, una spec o la conversación actual en tickets tracer-bullet, cada uno declarando sus aristas de bloqueo, publicados en el tracker configurado.
