vercel-labs/agent-skills

Vercel's official collection of agent skills

https://skillcdn.ai/gh/vercel-labs/agent-skills

Connect this address to your AI to use these skills. How to connect

Unverified
Default branchmain
Commit1a2c79d
LicenseNone declared
Searchwords and meaning

View on GitHub

Explore this repository

Searches the original text of skills and documents by words and by meaning; display translations are not searched.

Documents

SectionsThis file defines all sections, their ordering, impact levels, and descriptions. The section ID (in parentheses) is the filename prefix used to group rules.skills/react-native-skills/rules/_sections.md
Rule Title HereImpact: MEDIUM (optional impact description)skills/react-native-skills/rules/_template.md
Prefer useDerivedValue Over useAnimatedReactionWhen deriving a shared value from another, use useDerivedValue instead of useAnimatedReaction. Derived values are declarative, automatically track dependencies, and return a value you can use directl…skills/react-native-skills/rules/animation-derived-value.md
Use GestureDetector for Animated Press StatesFor animated press states (scale, opacity on press), use GestureDetector with Gesture.Tap() and shared values instead of Pressable's onPressIn/onPressOut. Gesture callbacks run on the UI thread as wo…skills/react-native-skills/rules/animation-gesture-detector-press.md
Animate Transform and Opacity Instead of Layout PropertiesAvoid animating width, height, top, left, margin, or padding. These trigger layout recalculation on every frame. Instead, use transform (scale, translate) and opacity which run on the GPU without tri…skills/react-native-skills/rules/animation-gpu-properties.md
Use Compound Components Over Polymorphic ChildrenDon't create components that can accept a string if they aren't a text node. If a component can receive a string child, it must be a dedicated Text component. For components like buttons, which can h…skills/react-native-skills/rules/design-system-compound-components.md
Load fonts natively at build timeUse the expo-font config plugin to embed fonts at build time instead of useFonts or Font.loadAsync. Embedded fonts are more efficient.skills/react-native-skills/rules/fonts-config-plugin.md
Import from Design System FolderRe-export dependencies from a design system folder. App code imports from there, not directly from packages. This enables global changes and easy refactoring.skills/react-native-skills/rules/imports-design-system-folder.md
Hoist Intl Formatter CreationDon't create Intl.DateTimeFormat, Intl.NumberFormat, or Intl.RelativeTimeFormat inside render or loops. These are expensive to instantiate. Hoist to module scope when the locale/options are static.skills/react-native-skills/rules/js-hoist-intl.md
Hoist callbacks to the root of listsImpact: HIGH (Fewer re-renders and faster lists)skills/react-native-skills/rules/list-performance-callbacks.md
Optimize List Performance with Stable Object ReferencesDon't map or filter data before passing to virtualized lists. Virtualization relies on object reference stability to know what changed—new references cause full re-renders of all visible items. Attem…skills/react-native-skills/rules/list-performance-function-references.md
Use Compressed Images in ListsAlways load compressed, appropriately-sized images in lists. Full-resolution images consume excessive memory and cause scroll jank. Request thumbnails from your server or use an image CDN with resize…skills/react-native-skills/rules/list-performance-images.md
Avoid Inline Objects in renderItemDon't create new objects inside renderItem to pass as props. Inline objects create new references on every render, breaking memoization. Pass primitive values directly from item instead.skills/react-native-skills/rules/list-performance-inline-objects.md
Keep List Items LightweightList items should be as inexpensive as possible to render. Minimize hooks, avoid queries, and limit React Context access. Virtualized lists render many items during scroll—expensive items cause jank.skills/react-native-skills/rules/list-performance-item-expensive.md
Pass Primitives to List Items for MemoizationWhen possible, pass only primitive values (strings, numbers, booleans) as props to list item components. Primitives enable shallow comparison in memo() to work correctly, skipping re-renders when val…skills/react-native-skills/rules/list-performance-item-memo.md
Use Item Types for Heterogeneous ListsWhen a list has different item layouts (messages, images, headers, etc.), use a type field on each item and provide getItemType to the list. This puts items into separate recycling pools so a message…skills/react-native-skills/rules/list-performance-item-types.md
Use a List Virtualizer for Any ListUse a list virtualizer like LegendList or FlashList instead of ScrollView with mapped children—even for short lists. Virtualizers only render visible items, reducing memory usage and mount time. Scro…skills/react-native-skills/rules/list-performance-virtualize.md
Install Native Dependencies in App DirectoryIn a monorepo, packages with native code must be installed in the native app's directory directly. Autolinking only scans the app's node_modules—it won't find native dependencies installed in other p…skills/react-native-skills/rules/monorepo-native-deps-in-app.md
Use Single Dependency Versions Across MonorepoUse a single version of each dependency across all packages in your monorepo. Prefer exact versions over ranges. Multiple versions cause duplicate code in bundles, runtime conflicts, and inconsistent…skills/react-native-skills/rules/monorepo-single-dependency-versions.md
Use Native Navigators for NavigationAlways use native navigators instead of JS-based ones. Native navigators use platform APIs (UINavigationController on iOS, Fragment on Android) for better performance and native behavior.skills/react-native-skills/rules/navigation-native-navigators.md
Destructure Functions Early in Render (React Compiler)This rule is only applicable if you are using the React Compiler.skills/react-native-skills/rules/react-compiler-destructure-functions.md
Use .get() and .set() for Reanimated Shared Values (not .value)With React Compiler enabled, use .get() and .set() instead of reading or writing .value directly on Reanimated shared values. The compiler can't track property access—explicit methods ensure correct…skills/react-native-skills/rules/react-compiler-reanimated-shared-values.md
useState Dispatch updaters for State That Depends on Current ValueWhen the next state depends on the current state, use a dispatch updater (setState(prev => ...)) instead of reading the state variable directly in a callback. This avoids stale closures and ensures y…skills/react-native-skills/rules/react-state-dispatcher.md
Use fallback state instead of initialStateUse undefined as initial state and nullish coalescing (??) to fall back to parent or server values. State represents user intent only—undefined means "user hasn't chosen yet." This enables reactive f…skills/react-native-skills/rules/react-state-fallback.md
Minimize State Variables and Derive ValuesUse the fewest state variables possible. If a value can be computed from existing state or props, derive it during render instead of storing it in state. Redundant state causes unnecessary re-renders…skills/react-native-skills/rules/react-state-minimize.md
Never Use && with Potentially Falsy ValuesNever use {value && <Component />} when value could be an empty string or 0. These are falsy but JSX-renderable—React Native will try to render them as text outside a <Text> component, causing a hard…skills/react-native-skills/rules/rendering-no-falsy-and.md
Wrap Strings in Text ComponentsStrings must be rendered inside <Text>. React Native crashes if a string is a direct child of <View>.skills/react-native-skills/rules/rendering-text-in-text-component.md
Never Track Scroll Position in useStateNever store scroll position in useState. Scroll events fire rapidly—state updates cause render thrashing and dropped frames. Use a Reanimated shared value for animations or a ref for non-reactive tra…skills/react-native-skills/rules/scroll-position-no-state.md
State Must Represent Ground TruthState variables—both React useState and Reanimated shared values—should represent the actual state of something (e.g., pressed, progress, isOpen), not derived visual values (e.g., scale, opacity, tra…skills/react-native-skills/rules/state-ground-truth.md
Use expo-image for Optimized ImagesUse expo-image instead of React Native's Image. It provides memory-efficient caching, blurhash placeholders, progressive loading, and better performance for lists.skills/react-native-skills/rules/ui-expo-image.md
Use Galeria for Image Galleries and LightboxFor image galleries with lightbox (tap to fullscreen), use @nandorojo/galeria. It provides native shared element transitions with pinch-to-zoom, double-tap zoom, and pan-to-close. Works with any imag…skills/react-native-skills/rules/ui-image-gallery.md
Measuring View DimensionsUse both useLayoutEffect (synchronous) and onLayout (for updates). The sync measurement gives you the initial size immediately; onLayout keeps it current when the view changes. For non-primitive stat…skills/react-native-skills/rules/ui-measure-views.md
Use Native Menus for Dropdowns and Context MenusUse native platform menus instead of custom JS implementations. Native menus provide built-in accessibility, consistent platform UX, and better performance. Use zeego for cross-platform native menus.skills/react-native-skills/rules/ui-menus.md
Use Native Modals Over JS-Based Bottom SheetsUse native <Modal> with presentationStyle="formSheet" or React Navigation v7's native form sheet instead of JS-based bottom sheet libraries. Native modals have built-in gestures, accessibility, and b…skills/react-native-skills/rules/ui-native-modals.md
Use Pressable Instead of Touchable ComponentsNever use TouchableOpacity or TouchableHighlight. Use Pressable from react-native or react-native-gesture-handler instead.skills/react-native-skills/rules/ui-pressable.md
Use contentInsetAdjustmentBehavior for Safe AreasUse contentInsetAdjustmentBehavior="automatic" on the root ScrollView instead of wrapping content in SafeAreaView or manual padding. This lets iOS handle safe area insets natively with proper scroll…skills/react-native-skills/rules/ui-safe-area-scroll.md
Use contentInset for Dynamic ScrollView SpacingWhen adding space to the top or bottom of a ScrollView that may change (keyboard, toolbars, dynamic content), use contentInset instead of padding. Changing contentInset doesn't trigger layout recalcu…skills/react-native-skills/rules/ui-scrollview-content-inset.md
Modern React Native Styling PatternsFollow these styling patterns for cleaner, more consistent React Native code.skills/react-native-skills/rules/ui-styling.md

Skipped (2)

These manifests were not served. Fix them and push: the next commit is indexed again.

skills/react-best-practices/AGENTS.mdlink_missing3 links name no file of the repository (./async-defer-await.md, ./async-cheap-condition-before-await.md, ./server-hoist-static-io.md)
skills/react-view-transitions/AGENTS.mdlink_missing20 links name no file of the repository (css-recipes.md, css-recipes.md#persistent-element-isolation, css-recipes.md#backdrop-blur-workaround, ...)