Cursor rule

1---
2alwaysApply: false
3---
4 
5## Import from Design System Folder
6 
7Re-export dependencies from a design system folder. App code imports from there,
8not directly from packages. This enables global changes and easy refactoring.
9 
10**Incorrect (imports directly from package):**
11 
12```tsx
13import { View, Text } from 'react-native'
14import { Button } from '@ui/button'
15 
16function Profile() {
17  return (
18    <View>
19      <Text>Hello</Text>
20      <Button>Save</Button>
21    </View>
22  )
23}
24```
25 
26**Correct (imports from design system):**
27 
28```tsx
29// components/view.tsx
30import { View as RNView } from 'react-native'
31 
32// ideal: pick the props you will actually use to control implementation
33export function View(
34  props: Pick<React.ComponentProps<typeof RNView>, 'style' | 'children'>
35) {
36  return <RNView {...props} />
37}
38```
39 
40```tsx
41// components/text.tsx
42export { Text } from 'react-native'
43```
44 
45```tsx
46// components/button.tsx
47export { Button } from '@ui/button'
48```
49 
50```tsx
51import { View } from '@/components/view'
52import { Text } from '@/components/text'
53import { Button } from '@/components/button'
54 
55function Profile() {
56  return (
57    <View>
58      <Text>Hello</Text>
59      <Button>Save</Button>
60    </View>
61  )
62}
63```
64 
65Start by simply re-exporting. Customize later without changing app code.
66