Skip to content

Commit ea406b5

Browse files
EQuimperEQuimper
authored
feat: add migration skill and update plugin configurations for react-native-ease (#1)
1 parent 3cfc27c commit ea406b5

5 files changed

Lines changed: 501 additions & 59 deletions

File tree

‎.claude-plugin/marketplace.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "react-native-ease-plugins",
3+
"owner": {
4+
"name": "AppAndFlow",
5+
"email": "devops@appandflow.com"
6+
},
7+
"metadata": {
8+
"description": "Claude Code skills for react-native-ease — migrate Reanimated/Animated code to react-native-ease"
9+
},
10+
"plugins": [
11+
{
12+
"name": "react-native-ease",
13+
"source": "./",
14+
"description": "Scan for Animated/Reanimated code and migrate to react-native-ease",
15+
"version": "0.2.0",
16+
"author": {
17+
"name": "AppAndFlow"
18+
}
19+
}
20+
]
21+
}

‎.claude-plugin/plugin.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "react-native-ease",
3+
"description": "Declarative native animations for React Native — migration tools",
4+
"version": "0.2.0"
5+
}

‎README.md‎

Lines changed: 73 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,24 @@ npm install react-native-ease
2424
yarn add react-native-ease
2525
```
2626

27+
## Migration Skill
28+
29+
If you're already using `react-native-reanimated` or React Native's `Animated` API, this project includes an [Agent Skill](https://agentskills.io) that scans your codebase for animations that can be replaced with `react-native-ease` and migrates them automatically.
30+
31+
```bash
32+
npx skills add appandflow/react-native-ease
33+
```
34+
35+
Then invoke the skill in your agent (e.g., `/refactor` in Claude Code).
36+
37+
The skill will:
38+
39+
1. Scan your project for Reanimated/Animated code
40+
2. Classify which animations can be migrated (and which can't, with reasons)
41+
3. Show a migration report with before/after details
42+
4. Let you select which components to migrate
43+
5. Apply the changes, preserving all non-animation logic
44+
2745
## Quick Start
2846

2947
```tsx
@@ -46,13 +64,13 @@ function FadeCard({ visible, children }) {
4664

4765
## When to use this vs Reanimated
4866

49-
| Use case | Ease | Reanimated |
50-
|---|---|---|
51-
| Fade/slide/scale on state change | ✅ | |
52-
| Enter/exit animations | ✅ | |
53-
| Gesture-driven animations (pan, pinch) | | ✅ |
54-
| Layout animations (width, height) | | ✅ |
55-
| Complex interpolations & chaining | | ✅ |
67+
| Use case | Ease | Reanimated |
68+
| -------------------------------------- | ---- | ---------- |
69+
| Fade/slide/scale on state change | ✅ | |
70+
| Enter/exit animations | ✅ | |
71+
| Gesture-driven animations (pan, pinch) | | ✅ |
72+
| Layout animations (width, height) | | ✅ |
73+
| Complex interpolations & chaining | | ✅ |
5674

5775
## Guide
5876

@@ -67,11 +85,11 @@ Timing animations transition from one value to another over a fixed duration wit
6785
/>
6886
```
6987

70-
| Parameter | Type | Default | Description |
71-
|---|---|---|---|
72-
| `duration` | `number` | `300` | Duration in milliseconds |
73-
| `easing` | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier) |
74-
| `loop` | `string` | — | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
88+
| Parameter | Type | Default | Description |
89+
| ---------- | ------------ | ------------- | ------------------------------------------------------------------------ |
90+
| `duration` | `number` | `300` | Duration in milliseconds |
91+
| `easing` | `EasingType` | `'easeInOut'` | Easing curve (preset name or `[x1, y1, x2, y2]` cubic bezier) |
92+
| `loop` | `string` | — | `'repeat'` restarts from the beginning, `'reverse'` alternates direction |
7593

7694
Available easing curves:
7795

@@ -112,11 +130,11 @@ Spring animations use a physics-based model for natural-feeling motion. Great fo
112130
/>
113131
```
114132

115-
| Parameter | Type | Default | Description |
116-
|---|---|---|---|
117-
| `damping` | `number` | `15` | Friction — higher values reduce oscillation |
118-
| `stiffness` | `number` | `120` | Spring constant — higher values mean faster animation |
119-
| `mass` | `number` | `1` | Mass of the object — higher values mean slower, more momentum |
133+
| Parameter | Type | Default | Description |
134+
| ----------- | -------- | ------- | ------------------------------------------------------------- |
135+
| `damping` | `number` | `15` | Friction — higher values reduce oscillation |
136+
| `stiffness` | `number` | `120` | Spring constant — higher values mean faster animation |
137+
| `mass` | `number` | `1` | Mass of the object — higher values mean slower, more momentum |
120138

121139
Spring presets for common feels:
122140

@@ -189,16 +207,16 @@ All properties are set in the `animate` prop as flat values (no transform array)
189207
```tsx
190208
<EaseView
191209
animate={{
192-
opacity: 1, // 0 to 1
193-
translateX: 0, // pixels
194-
translateY: 0, // pixels
195-
scale: 1, // 1 = normal size (shorthand for scaleX + scaleY)
196-
scaleX: 1, // horizontal scale
197-
scaleY: 1, // vertical scale
198-
rotate: 0, // Z-axis rotation in degrees
199-
rotateX: 0, // X-axis rotation in degrees (3D)
200-
rotateY: 0, // Y-axis rotation in degrees (3D)
201-
borderRadius: 0, // pixels (hardware-accelerated, clips children)
210+
opacity: 1, // 0 to 1
211+
translateX: 0, // pixels
212+
translateY: 0, // pixels
213+
scale: 1, // 1 = normal size (shorthand for scaleX + scaleY)
214+
scaleX: 1, // horizontal scale
215+
scaleY: 1, // vertical scale
216+
rotate: 0, // Z-axis rotation in degrees
217+
rotateX: 0, // X-axis rotation in degrees (3D)
218+
rotateY: 0, // Y-axis rotation in degrees (3D)
219+
borderRadius: 0, // pixels (hardware-accelerated, clips children)
202220
backgroundColor: 'transparent', // any RN color value
203221
}}
204222
/>
@@ -280,11 +298,11 @@ By default, scale and rotation animate from the view's center. Use `transformOri
280298
/>
281299
```
282300

283-
| Value | Position |
284-
|---|---|
285-
| `{ x: 0, y: 0 }` | Top-left |
301+
| Value | Position |
302+
| -------------------- | ---------------- |
303+
| `{ x: 0, y: 0 }` | Top-left |
286304
| `{ x: 0.5, y: 0.5 }` | Center (default) |
287-
| `{ x: 1, y: 1 }` | Bottom-right |
305+
| `{ x: 1, y: 1 }` | Bottom-right |
288306

289307
### Style Handling
290308

@@ -318,32 +336,32 @@ By default, scale and rotation animate from the view's center. Use `transformOri
318336

319337
A `View` that animates property changes using native platform APIs.
320338

321-
| Prop | Type | Description |
322-
|---|---|---|
323-
| `animate` | `AnimateProps` | Target values for animated properties |
324-
| `initialAnimate` | `AnimateProps` | Starting values for enter animations (animates to `animate` on mount) |
325-
| `transition` | `Transition` | Animation configuration (timing, spring, or none) |
326-
| `onTransitionEnd` | `(event) => void` | Called when all animations complete with `{ finished: boolean }` |
327-
| `transformOrigin` | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center) |
328-
| `useHardwareLayer` | `boolean` | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
329-
| `style` | `ViewStyle` | Non-animated styles (layout, colors, borders, etc.) |
330-
| `children` | `ReactNode` | Child elements |
331-
| ...rest | `ViewProps` | All other standard View props |
339+
| Prop | Type | Description |
340+
| ------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
341+
| `animate` | `AnimateProps` | Target values for animated properties |
342+
| `initialAnimate` | `AnimateProps` | Starting values for enter animations (animates to `animate` on mount) |
343+
| `transition` | `Transition` | Animation configuration (timing, spring, or none) |
344+
| `onTransitionEnd` | `(event) => void` | Called when all animations complete with `{ finished: boolean }` |
345+
| `transformOrigin` | `{ x?: number; y?: number }` | Pivot point for scale/rotation as 0–1 fractions. Default: `{ x: 0.5, y: 0.5 }` (center) |
346+
| `useHardwareLayer` | `boolean` | Android only — rasterize to GPU texture during animations. See [Hardware Layers](#hardware-layers-android). Default: `false` |
347+
| `style` | `ViewStyle` | Non-animated styles (layout, colors, borders, etc.) |
348+
| `children` | `ReactNode` | Child elements |
349+
| ...rest | `ViewProps` | All other standard View props |
332350

333351
### `AnimateProps`
334352

335-
| Property | Type | Default | Description |
336-
|---|---|---|---|
337-
| `opacity` | `number` | `1` | View opacity (0–1) |
338-
| `translateX` | `number` | `0` | Horizontal translation in pixels |
339-
| `translateY` | `number` | `0` | Vertical translation in pixels |
340-
| `scale` | `number` | `1` | Uniform scale factor (shorthand for `scaleX` + `scaleY`) |
341-
| `scaleX` | `number` | `1` | Horizontal scale factor (overrides `scale` for X axis) |
342-
| `scaleY` | `number` | `1` | Vertical scale factor (overrides `scale` for Y axis) |
343-
| `rotate` | `number` | `0` | Z-axis rotation in degrees |
344-
| `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
345-
| `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
346-
| `borderRadius` | `number` | `0` | Border radius in pixels (hardware-accelerated, clips children) |
353+
| Property | Type | Default | Description |
354+
| ----------------- | ------------ | --------------- | ------------------------------------------------------------------------------------ |
355+
| `opacity` | `number` | `1` | View opacity (0–1) |
356+
| `translateX` | `number` | `0` | Horizontal translation in pixels |
357+
| `translateY` | `number` | `0` | Vertical translation in pixels |
358+
| `scale` | `number` | `1` | Uniform scale factor (shorthand for `scaleX` + `scaleY`) |
359+
| `scaleX` | `number` | `1` | Horizontal scale factor (overrides `scale` for X axis) |
360+
| `scaleY` | `number` | `1` | Vertical scale factor (overrides `scale` for Y axis) |
361+
| `rotate` | `number` | `0` | Z-axis rotation in degrees |
362+
| `rotateX` | `number` | `0` | X-axis rotation in degrees (3D) |
363+
| `rotateY` | `number` | `0` | Y-axis rotation in degrees (3D) |
364+
| `borderRadius` | `number` | `0` | Border radius in pixels (hardware-accelerated, clips children) |
347365
| `backgroundColor` | `ColorValue` | `'transparent'` | Background color (any RN color value). Timing-only on Android, spring+timing on iOS. |
348366

349367
Properties not specified in `animate` default to their identity values.
@@ -385,10 +403,7 @@ Applies values instantly with no animation. `onTransitionEnd` fires immediately
385403
Setting `useHardwareLayer` rasterizes the view into a GPU texture for the duration of the animation. This means animated property changes (opacity, scale, rotation) are composited on the RenderThread without redrawing the view hierarchy — useful for complex views with many children.
386404

387405
```tsx
388-
<EaseView
389-
animate={{ opacity: isVisible ? 1 : 0 }}
390-
useHardwareLayer
391-
/>
406+
<EaseView animate={{ opacity: isVisible ? 1 : 0 }} useHardwareLayer />
392407
```
393408

394409
**Trade-offs:**

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"ios",
2020
"cpp",
2121
"*.podspec",
22+
"skills",
2223
"!ios/build",
2324
"!android/build",
2425
"!android/gradle",
@@ -28,7 +29,8 @@
2829
"!**/__tests__",
2930
"!**/__fixtures__",
3031
"!**/__mocks__",
31-
"!**/.*"
32+
"!**/.*",
33+
".claude-plugin"
3234
],
3335
"scripts": {
3436
"example": "yarn workspace react-native-ease-example",

0 commit comments

Comments
 (0)