initial commit

.agents/skills/vercel-react-native-skills/rules/animation-gpu-properties.md

@@ -0,0 +1,61 @@
+---
+title: Animate Transform and Opacity Instead of Layout Properties
+impact: HIGH
+impactDescription: GPU-accelerated animations, no layout recalculation
+tags: animation, performance, reanimated, transform, opacity
+---
+
+## Animate Transform and Opacity Instead of Layout Properties
+
+Avoid 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 triggering layout.
+
+**Incorrect (animates height, triggers layout every frame):**
+
+```tsx
+import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
+
+function CollapsiblePanel({ expanded }: { expanded: boolean }) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: withTiming(expanded ? 200 : 0), // triggers layout on every frame
+    overflow: "hidden",
+  }));
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+}
+```
+
+**Correct (animates scaleY, GPU-accelerated):**
+
+```tsx
+import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
+
+function CollapsiblePanel({ expanded }: { expanded: boolean }) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scaleY: withTiming(expanded ? 1 : 0) }],
+    opacity: withTiming(expanded ? 1 : 0),
+  }));
+
+  return (
+    <Animated.View style={[{ height: 200, transformOrigin: "top" }, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+}
+```
+
+**Correct (animates translateY for slide animations):**
+
+```tsx
+import Animated, { useAnimatedStyle, withTiming } from "react-native-reanimated";
+
+function SlideIn({ visible }: { visible: boolean }) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: withTiming(visible ? 0 : 100) }],
+    opacity: withTiming(visible ? 1 : 0),
+  }));
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+}
+```
+
+GPU-accelerated properties: `transform` (translate, scale, rotate), `opacity`. Everything else triggers layout.