initial commit

.agents/skills/vercel-react-native-skills/rules/imports-design-system-folder.md

@@ -0,0 +1,66 @@
+---
+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.tsx
+import { View as RNView } from "react-native";
+
+// ideal: pick the props you will actually use to control implementation
+export function View(props: Pick<React.ComponentProps<typeof RNView>, "style" | "children">) {
+  return <RNView {...props} />;
+}
+```
+
+```tsx
+// components/text.tsx
+export { Text } from "react-native";
+```
+
+```tsx
+// components/button.tsx
+export { 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.