@harness-engineering/cli 1.23.2 → 1.24.0

package/dist/agents/skills/cursor/mobile-animation-patterns/SKILL.md

@@ -0,0 +1,199 @@
+# Mobile Animation Patterns
+
+> Create fluid 60fps animations with React Native Reanimated using shared values, worklets, and layout animations
+
+## When to Use
+
+- Building micro-interactions (button press feedback, toggle animations)
+- Animating screen transitions, modals, or bottom sheets
+- Creating gesture-driven animations (swipe cards, draggable elements)
+- Implementing layout animations (list item enters/exits, accordion expand)
+- Replacing `Animated` API for better performance
+
+## Instructions
+
+1. **Use Reanimated's shared values instead of React state for animation values.** Shared values live on the UI thread and update without crossing the JS bridge.
+
+```tsx
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+
+function AnimatedBox() {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <Pressable
+      onPressIn={() => {
+        scale.value = withSpring(0.95);
+      }}
+      onPressOut={() => {
+        scale.value = withSpring(1);
+      }}
+    >
+      <Animated.View style={[styles.box, animatedStyle]} />
+    </Pressable>
+  );
+}
+```
+
+2. **Choose the right animation function:**
+   - `withTiming(target, config)` — linear or eased animation with fixed duration
+   - `withSpring(target, config)` — physics-based spring animation (natural feel)
+   - `withDecay(config)` — momentum-based deceleration (fling gestures)
+   - `withSequence(...)` — run animations in order
+   - `withDelay(ms, animation)` — delay before starting
+   - `withRepeat(animation, count, reverse)` — loop an animation
+
+```tsx
+// Bounce in
+opacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.cubic) });
+
+// Springy scale
+scale.value = withSpring(1, { damping: 15, stiffness: 150 });
+
+// Shake effect
+translateX.value = withSequence(
+  withTiming(-10, { duration: 50 }),
+  withRepeat(withTiming(10, { duration: 100 }), 3, true),
+  withTiming(0, { duration: 50 })
+);
+
+// Pulse animation
+opacity.value = withRepeat(
+  withSequence(withTiming(0.5, { duration: 500 }), withTiming(1, { duration: 500 })),
+  -1, // infinite
+  true
+);
+```
+
+3. **Use `useAnimatedStyle` to map shared values to styles.** This hook creates a style object that updates on the UI thread.
+
+```tsx
+const animatedStyle = useAnimatedStyle(() => ({
+  opacity: opacity.value,
+  transform: [
+    { translateY: interpolate(progress.value, [0, 1], [50, 0]) },
+    { scale: interpolate(progress.value, [0, 1], [0.8, 1]) },
+  ],
+}));
+```
+
+4. **Use `interpolate` to map values between ranges.**
+
+```tsx
+import { interpolate, Extrapolation } from 'react-native-reanimated';
+
+const animatedStyle = useAnimatedStyle(() => ({
+  opacity: interpolate(scrollY.value, [0, 100], [1, 0], Extrapolation.CLAMP),
+  height: interpolate(scrollY.value, [0, 100], [200, 60], Extrapolation.CLAMP),
+}));
+```
+
+5. **Use layout animations for enter/exit transitions.** Reanimated provides built-in entering and exiting animations that work with conditional rendering.
+
+```tsx
+import Animated, { FadeIn, FadeOut, SlideInRight, Layout } from 'react-native-reanimated';
+
+function NotificationList({ items }: { items: Notification[] }) {
+  return (
+    <View>
+      {items.map((item) => (
+        <Animated.View
+          key={item.id}
+          entering={SlideInRight.duration(300)}
+          exiting={FadeOut.duration(200)}
+          layout={Layout.springify()}
+        >
+          <NotificationCard notification={item} />
+        </Animated.View>
+      ))}
+    </View>
+  );
+}
+```
+
+6. **Use `useAnimatedScrollHandler` for scroll-driven animations.**
+
+```tsx
+const scrollY = useSharedValue(0);
+
+const scrollHandler = useAnimatedScrollHandler({
+  onScroll: (event) => {
+    scrollY.value = event.contentOffset.y;
+  },
+});
+
+const headerStyle = useAnimatedStyle(() => ({
+  height: interpolate(scrollY.value, [0, 150], [200, 60], Extrapolation.CLAMP),
+  opacity: interpolate(scrollY.value, [0, 100], [1, 0], Extrapolation.CLAMP),
+}));
+
+return (
+  <>
+    <Animated.View style={[styles.header, headerStyle]} />
+    <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
+      {/* content */}
+    </Animated.ScrollView>
+  </>
+);
+```
+
+7. **Use `useDerivedValue` to compute values from other shared values.**
+
+```tsx
+const progress = useSharedValue(0);
+const opacity = useDerivedValue(() => interpolate(progress.value, [0, 1], [0.3, 1]));
+```
+
+8. **Run callbacks when animations complete with `withTiming` callback or `runOnJS`.**
+
+```tsx
+scale.value = withSpring(0, {}, (finished) => {
+  if (finished) {
+    runOnJS(onAnimationComplete)();
+  }
+});
+```
+
+## Details
+
+**Why Reanimated over the built-in `Animated` API:** The built-in `Animated` runs on the JS thread by default (`useNativeDriver: true` offloads only `transform` and `opacity`). Reanimated runs all animation logic on the UI thread via worklets, supporting any style property at 60fps.
+
+**Worklets:** Functions marked with `'worklet';` directive run on the UI thread. `useAnimatedStyle`, `useAnimatedScrollHandler`, and gesture callbacks are implicitly worklets. Use `runOnJS()` to call back to JavaScript from a worklet.
+
+**Spring configuration:**
+
+- `damping` (default 10): Higher = less bouncy, lower = more oscillation
+- `stiffness` (default 100): Higher = faster, snappier animation
+- `mass` (default 1): Higher = heavier, slower to start/stop
+- Good defaults for UI: `{ damping: 15, stiffness: 150 }` (snappy with slight overshoot)
+
+**Performance rules:**
+
+- Never read `.value` of a shared value in the render function (only in worklets and animated styles)
+- Avoid creating new shared values in loops or conditional blocks
+- Use `cancelAnimation(sharedValue)` before starting a new animation on the same value
+- Prefer `transform` and `opacity` — they are GPU-composited and avoid layout recalculation
+
+## Source
+
+https://docs.swmansion.com/react-native-reanimated/
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/mobile-animation-patterns/skill.yaml

@@ -0,0 +1,40 @@
+name: mobile-animation-patterns
+version: '1.0.0'
+description: Create fluid 60fps animations with React Native Reanimated and shared values
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.native.*'
+  - '**/screens/**'
+  - '**/components/**'
+related_skills:
+  - mobile-gesture-handling
+  - mobile-performance-patterns
+stack_signals:
+  - react-native
+  - expo
+  - typescript
+keywords:
+  - reanimated
+  - animation
+  - shared-values
+  - withSpring
+  - withTiming
+  - layout-animations
+  - worklets
+metadata:
+  author: community
+  upstream: docs.swmansion.com/react-native-reanimated
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/cursor/mobile-deployment-patterns/SKILL.md

@@ -0,0 +1,262 @@
+# Mobile Deployment Patterns
+
+> Deploy React Native apps with EAS Build, EAS Submit, OTA updates, and automated CI/CD pipelines
+
+## When to Use
+
+- Preparing a React Native app for App Store and Google Play submission
+- Setting up automated build and release pipelines
+- Implementing over-the-air (OTA) updates for instant bug fixes
+- Managing multiple environments (dev, staging, production)
+- Automating version bumping and changelog generation
+
+## Instructions
+
+1. **Configure EAS Build profiles for each environment.**
+
+```json
+// eas.json
+{
+  "cli": { "version": ">= 8.0.0" },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "env": { "APP_ENV": "development" },
+      "ios": { "simulator": true }
+    },
+    "preview": {
+      "distribution": "internal",
+      "env": { "APP_ENV": "staging" },
+      "channel": "preview"
+    },
+    "production": {
+      "env": { "APP_ENV": "production" },
+      "channel": "production",
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "appleId": "developer@company.com",
+        "ascAppId": "1234567890",
+        "appleTeamId": "ABCDE12345"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./play-store-key.json",
+        "track": "internal"
+      }
+    }
+  }
+}
+```
+
+2. **Use environment-specific configuration in `app.config.ts`.**
+
+```typescript
+const IS_PROD = process.env.APP_ENV === 'production';
+const IS_STAGING = process.env.APP_ENV === 'staging';
+
+export default {
+  name: IS_PROD ? 'MyApp' : IS_STAGING ? 'MyApp (Staging)' : 'MyApp (Dev)',
+  slug: 'my-app',
+  ios: {
+    bundleIdentifier: IS_PROD ? 'com.company.myapp' : 'com.company.myapp.dev',
+  },
+  android: {
+    package: IS_PROD ? 'com.company.myapp' : 'com.company.myapp.dev',
+  },
+  extra: {
+    apiUrl: IS_PROD
+      ? 'https://api.company.com'
+      : IS_STAGING
+        ? 'https://api.staging.company.com'
+        : 'https://api.dev.company.com',
+  },
+};
+```
+
+3. **Build and submit with EAS CLI.**
+
+```bash
+# Build for production
+eas build --platform all --profile production
+
+# Submit to stores after build completes
+eas submit --platform ios --profile production
+eas submit --platform android --profile production
+
+# Build and auto-submit in one command
+eas build --platform all --profile production --auto-submit
+```
+
+4. **Implement OTA updates with EAS Update** for instant JavaScript-only fixes without store review.
+
+```bash
+npx expo install expo-updates
+```
+
+```typescript
+// app.config.ts
+export default {
+  updates: {
+    url: 'https://u.expo.dev/your-project-id',
+  },
+  runtimeVersion: {
+    policy: 'appVersion', // or 'sdkVersion', 'fingerprint'
+  },
+};
+```
+
+```bash
+# Publish an OTA update to the production channel
+eas update --branch production --message "Fix checkout button alignment"
+
+# Publish to preview channel
+eas update --branch preview --message "Test new onboarding flow"
+```
+
+5. **Check for and apply updates in the app.**
+
+```typescript
+import * as Updates from 'expo-updates';
+
+async function checkForUpdates() {
+  if (__DEV__) return; // Updates do not work in development
+
+  try {
+    const update = await Updates.checkForUpdateAsync();
+    if (update.isAvailable) {
+      await Updates.fetchUpdateAsync();
+      // Restart to apply the update
+      await Updates.reloadAsync();
+    }
+  } catch (error) {
+    console.error('Update check failed:', error);
+  }
+}
+
+// Check on app foreground
+useEffect(() => {
+  const subscription = AppState.addEventListener('change', (state) => {
+    if (state === 'active') checkForUpdates();
+  });
+  return () => subscription.remove();
+}, []);
+```
+
+6. **Set up CI/CD with GitHub Actions.**
+
+```yaml
+# .github/workflows/build.yml
+name: Build and Deploy
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20 }
+      - run: npm ci
+      - run: npm test
+
+  build:
+    needs: test
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20 }
+      - uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+      - run: npm ci
+      - run: eas build --platform all --profile production --non-interactive --auto-submit
+
+  update:
+    needs: test
+    if: github.ref == 'refs/heads/main' && !contains(github.event.head_commit.message, '[native]')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+      - run: npm ci
+      - run: eas update --branch production --message "${{ github.event.head_commit.message }}"
+```
+
+7. **Manage version numbers.** Use `autoIncrement` in EAS Build for automatic build number bumps. Semantic version the `version` field in `app.config.ts`.
+
+```bash
+# Bump version
+npm version patch  # 1.0.0 -> 1.0.1
+npm version minor  # 1.0.0 -> 1.1.0
+npm version major  # 1.0.0 -> 2.0.0
+```
+
+8. **Test the production build before submission.** Build an internal distribution build and test on physical devices before submitting to stores.
+
+```bash
+eas build --platform ios --profile preview
+# Install via QR code or direct link from EAS dashboard
+```
+
+## Details
+
+**OTA update limitations:** OTA updates can only change JavaScript and assets. Changes to native code (new native modules, permission changes, SDK upgrades) require a new native build through the stores. Use `runtimeVersion` with `fingerprint` policy to automatically detect when a native build is needed.
+
+**App Store review tips:**
+
+- First submission takes 1-3 days; subsequent updates typically 24 hours
+- Include clear screenshots and a demo account for reviewers
+- Privacy policy is required; describe all data collection
+- Do not mention competing platforms in metadata
+
+**Google Play review:** Initial review takes hours to days. Use internal testing tracks for team testing, closed testing for beta users, and production for release.
+
+**Release strategy:**
+
+1. Merge to main triggers CI
+2. CI runs tests, builds, and submits to internal testing
+3. QA tests on internal track
+4. Promote to production (manual approval)
+5. Post-release JS fixes via OTA updates
+
+**Common mistakes:**
+
+- Shipping debug builds to production (check build profile)
+- Not testing OTA updates before publishing to production
+- Forgetting to update `runtimeVersion` when native dependencies change
+- Not handling update download failures gracefully in the app
+
+## Source
+
+https://docs.expo.dev/deploy/build-project/
+
+## Process
+
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+
+## Harness Integration
+
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+
+## Success Criteria
+
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/cursor/mobile-deployment-patterns/skill.yaml

@@ -0,0 +1,41 @@
+name: mobile-deployment-patterns
+version: '1.0.0'
+description: Deploy React Native apps with EAS Build, EAS Submit, OTA updates, and CI/CD pipelines
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.native.*'
+  - 'app.json'
+  - 'app.config.*'
+  - 'eas.json'
+related_skills:
+  - mobile-expo-setup
+  - mobile-performance-patterns
+stack_signals:
+  - react-native
+  - expo
+  - typescript
+keywords:
+  - deployment
+  - eas-build
+  - eas-submit
+  - ota-updates
+  - app-store
+  - play-store
+  - ci-cd
+metadata:
+  author: community
+  upstream: docs.expo.dev/deploy/build-project
+state:
+  persistent: false
+  files: []
+depends_on: []