Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

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.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Import from Design System Folder
impact
LOW
impactDescription
enables global changes and easy refactoring
tags
imports, architecture, design-system

Import from Design System Folder

Re-export dependencies from a design system folder. App code imports from there, not directly from packages. This enables global changes and easy refactoring.

Incorrect (imports directly from package):

tsx
import { View, Text } from 'react-native'import { Button } from '@ui/button'
function Profile() {  return (    <View>      <Text>Hello</Text>      <Button>Save</Button>    </View>  )}

Correct (imports from design system):

tsx
// components/view.tsximport { View as RNView } from 'react-native'
// ideal: pick the props you will actually use to control implementationexport function View(  props: Pick<React.ComponentProps<typeof RNView>, 'style' | 'children'>) {  return <RNView {...props} />}
tsx
// components/text.tsxexport { Text } from 'react-native'
tsx
// components/button.tsxexport { Button } from '@ui/button'
tsx
import { View } from '@/components/view'import { Text } from '@/components/text'import { Button } from '@/components/button'
function Profile() {  return (    <View>      <Text>Hello</Text>      <Button>Save</Button>    </View>  )}

Start by simply re-exporting. Customize later without changing app code.