initial commit

.agents/skills/vercel-react-native-skills/rules/react-compiler-reanimated-shared-values.md

@@ -0,0 +1,48 @@
+---
+title: Use .get() and .set() for Reanimated Shared Values (not .value)
+impact: LOW
+impactDescription: required for React Compiler compatibility
+tags: reanimated, react-compiler, shared-values
+---
+
+## Use .get() and .set() for Shared Values with React Compiler
+
+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 behavior.
+
+**Incorrect (breaks with React Compiler):**
+
+```tsx
+import { useSharedValue } from "react-native-reanimated";
+
+function Counter() {
+  const count = useSharedValue(0);
+
+  const increment = () => {
+    count.value = count.value + 1; // opts out of react compiler
+  };
+
+  return <Button onPress={increment} title={`Count: ${count.value}`} />;
+}
+```
+
+**Correct (React Compiler compatible):**
+
+```tsx
+import { useSharedValue } from "react-native-reanimated";
+
+function Counter() {
+  const count = useSharedValue(0);
+
+  const increment = () => {
+    count.set(count.get() + 1);
+  };
+
+  return <Button onPress={increment} title={`Count: ${count.get()}`} />;
+}
+```
+
+See the
+[Reanimated docs](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue/#react-compiler-support)
+for more.