create-disposabl-app 0.1.0 → 0.1.2

package/dist/templates/default/apps/mobile/.agents/skills/react-native-best-practices/SKILL.md

@@ -0,0 +1,238 @@
+---
+name: react-native-best-practices
+description: Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
+license: MIT
+---
+
+# React Native Best Practices
+
+## Overview
+
+Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".
+
+## When to Apply
+
+Reference these guidelines when:
+- Debugging slow/janky UI or animations
+- Investigating memory leaks (JS or native)
+- Optimizing app startup time (TTI)
+- Reducing bundle or app size
+- Writing native modules (Turbo Modules)
+- Profiling React Native performance
+- Reviewing React Native code for performance
+
+## Security Notes
+
+- Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell.
+- Treat third-party libraries and plugins as dependencies that still require normal supply-chain controls: pin versions, verify provenance, and update through your standard review process.
+- Treat remote chunk loading as first-party artifact delivery only. Prefer app-bundled chunks or signed CI release manifests; hosted chunks must come from trusted HTTPS origins you control and be pinned to the current app release.
+
+## Priority-Ordered Guidelines
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | FPS & Re-renders | CRITICAL | `js-*` |
+| 2 | Bundle Size | CRITICAL | `bundle-*` |
+| 3 | TTI Optimization | HIGH | `native-*`, `bundle-*` |
+| 4 | Native Performance | HIGH | `native-*` |
+| 5 | Memory Management | MEDIUM-HIGH | `js-*`, `native-*` |
+| 6 | Animations | MEDIUM | `js-*` |
+
+Impact labels are triage hints: CRITICAL first, HIGH next, MEDIUM when evidence points there.
+
+## Quick Reference
+
+### Optimization Workflow
+
+Follow this cycle for any performance issue: **Measure → Optimize → Re-measure → Validate**
+
+1. **Measure**: Capture baseline metrics before changes. For runtime issues, prefer commit timeline, re-render counts, slow components, heaviest-commit breakdown, and startup/TTI when available. Component tree depth or count are optional context, not substitutes. Do not recommend memoization, atomic state, or compiler changes without a measured render or FPS problem.
+2. **Optimize**: Apply the targeted fix from the relevant reference
+3. **Re-measure**: Run the same measurement to get updated metrics
+4. **Validate**: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)
+
+If metrics did not improve, revert and try the next suggested fix.
+
+### Review Guardrails
+
+- Check library versions before suggesting API-specific fixes. Example: FlashList v2 deprecates `estimatedItemSize`, so do not flag it as missing there.
+- Do not suggest `useMemo` or `useCallback` dependency changes unless behavior is demonstrably incorrect or profiling shows wasted work tied to that value.
+- Do not report stale closures speculatively. Show the stale read path, a repro, or profiler evidence before calling it out.
+- When profiling a flow, measure the target interaction itself. Do not treat component tree depth or component count as the main performance evidence.
+
+### Critical: FPS & Re-renders
+
+**Profile first:**
+```bash
+agent-device react-devtools status
+agent-device react-devtools wait --connected
+agent-device react-devtools profile start
+agent-device react-devtools profile stop
+agent-device react-devtools profile slow --limit 5
+agent-device react-devtools profile rerenders --limit 5
+agent-device react-devtools profile timeline --limit 20
+```
+
+Drive the target interaction with normal `agent-device` commands between `profile start` and `profile stop`.
+
+Manual fallback when `agent-device` is unavailable: open React Native DevTools from Metro (`j`) or the Dev Menu, use the Profiler tab, and record the same interaction.
+
+For release-build React component profiling, connect [`@callstack/inspector`](https://github.com/callstackincubator/inspector#inspector) first so React DevTools can attach to the release app, then run the `agent-device react-devtools` flow above.
+
+**Common fixes:**
+- Replace ScrollView with FlatList/FlashList/Legend List for long lists
+- After profiling shows cascading re-renders, use React Compiler for automatic memoization
+- After profiling shows broad store/context updates, use atomic state (Jotai/Zustand) to reduce re-renders
+- Use `useDeferredValue` for expensive computations
+
+### Critical: Bundle Size
+
+**Analyze bundle:**
+```bash
+npx react-native bundle \
+  --entry-file index.js \
+  --bundle-output output.js \
+  --platform ios \
+  --sourcemap-output output.js.map \
+  --dev false --minify true
+
+npx source-map-explorer output.js --no-border-checks
+```
+
+**Verify improvement after optimization:**
+```bash
+# Record baseline size before changes
+ls -lh output.js  # e.g., Before: 2.1 MB
+
+# After applying fixes, re-bundle and compare
+npx react-native bundle --entry-file index.js --bundle-output output.js \
+  --platform ios --dev false --minify true
+ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)
+```
+
+**Common fixes:**
+- Avoid barrel imports (import directly from source)
+- Remove unnecessary Intl polyfills only after checking Hermes API and method coverage
+- Evaluate tree shaking (Expo SDK 52+ experimental unused import/export removal, or Re.Pack only if already configured)
+- Enable R8 for Android native code shrinking
+
+### High: TTI Optimization
+
+**Measure TTI:**
+- Use `react-native-performance` for markers
+- Only measure cold starts (exclude warm/hot/prewarm)
+
+**Common fixes:**
+- For React Native 0.78 and earlier, disable Android JS bundle compression to enable Hermes mmap
+- Use native navigation (react-native-screens)
+- Preload commonly-used expensive screens before navigating to them
+
+### High: Native Performance
+
+**Profile native:**
+- iOS: Xcode Instruments → Time Profiler
+- Android: Android Studio → CPU Profiler
+
+**Common fixes:**
+- Use background threads for heavy native work
+- Prefer async over sync Turbo Module methods
+- Use C++ for cross-platform performance-critical code
+
+## References
+
+Full documentation with code examples in [references/][references]:
+
+### JavaScript/React (`js-*`)
+
+| File | Impact | Description |
+|------|--------|-------------|
+| [js-lists-flatlist-flashlist.md][js-lists-flatlist-flashlist] | CRITICAL | Replace ScrollView with virtualized lists |
+| [js-profile-react.md][js-profile-react] | MEDIUM | `agent-device react-devtools` profiling |
+| [js-measure-fps.md][js-measure-fps] | HIGH | FPS monitoring and measurement |
+| [js-memory-leaks.md][js-memory-leaks] | MEDIUM | JS memory leak hunting |
+| [js-atomic-state.md][js-atomic-state] | HIGH | Jotai/Zustand patterns |
+| [js-concurrent-react.md][js-concurrent-react] | HIGH | useDeferredValue, useTransition |
+| [js-react-compiler.md][js-react-compiler] | HIGH | Automatic memoization |
+| [js-animations-reanimated.md][js-animations-reanimated] | MEDIUM | Reanimated worklets |
+| [js-bottomsheet.md][js-bottomsheet] | HIGH | Bottom sheet optimization |
+| [js-uncontrolled-components.md][js-uncontrolled-components] | HIGH | TextInput optimization |
+
+### Native (`native-*`)
+
+| File | Impact | Description |
+|------|--------|-------------|
+| [native-turbo-modules.md][native-turbo-modules] | HIGH | Building fast native modules |
+| [native-sdks-over-polyfills.md][native-sdks-over-polyfills] | HIGH | Native vs JS libraries |
+| [native-measure-tti.md][native-measure-tti] | HIGH | TTI measurement setup |
+| [native-threading-model.md][native-threading-model] | HIGH | Turbo Module threads |
+| [native-profiling.md][native-profiling] | MEDIUM | Xcode/Android Studio profiling |
+| [native-platform-setup.md][native-platform-setup] | MEDIUM | iOS/Android tooling guide |
+| [native-view-flattening.md][native-view-flattening] | MEDIUM | View hierarchy debugging |
+| [native-memory-patterns.md][native-memory-patterns] | MEDIUM | C++/Swift/Kotlin memory |
+| [native-memory-leaks.md][native-memory-leaks] | MEDIUM | Native memory leak hunting |
+| [native-android-16kb-alignment.md][native-android-16kb-alignment] | CRITICAL | Third-party library alignment for Google Play |
+
+### Bundling (`bundle-*`)
+
+| File | Impact | Description |
+|------|--------|-------------|
+| [bundle-barrel-exports.md][bundle-barrel-exports] | CRITICAL | Avoid barrel imports |
+| [bundle-analyze-js.md][bundle-analyze-js] | CRITICAL | JS bundle visualization |
+| [bundle-tree-shaking.md][bundle-tree-shaking] | HIGH | Dead code elimination |
+| [bundle-analyze-app.md][bundle-analyze-app] | HIGH | App size analysis |
+| [bundle-r8-android.md][bundle-r8-android] | HIGH | Android code shrinking |
+| [bundle-hermes-mmap.md][bundle-hermes-mmap] | HIGH | Disable bundle compression |
+| [bundle-native-assets.md][bundle-native-assets] | HIGH | Asset catalog setup |
+| [bundle-library-size.md][bundle-library-size] | MEDIUM | Evaluate dependencies |
+| [bundle-code-splitting.md][bundle-code-splitting] | MEDIUM | Remote chunk loading safeguards |
+
+## Problem → Skill Mapping
+
+| Problem | Start With |
+|---------|------------|
+| App feels slow/janky | [js-measure-fps.md][js-measure-fps] → [js-profile-react.md][js-profile-react] |
+| Too many re-renders | [js-profile-react.md][js-profile-react] → [js-react-compiler.md][js-react-compiler] |
+| Slow startup (TTI) | [native-measure-tti.md][native-measure-tti] → [bundle-analyze-js.md][bundle-analyze-js] |
+| Large app size | [bundle-analyze-app.md][bundle-analyze-app] → [bundle-r8-android.md][bundle-r8-android] |
+| Memory growing | [js-memory-leaks.md][js-memory-leaks] or [native-memory-leaks.md][native-memory-leaks] |
+| Animation drops frames | [js-animations-reanimated.md][js-animations-reanimated] |
+| Bottom sheet jank/re-renders | [js-bottomsheet.md][js-bottomsheet] → [js-animations-reanimated.md][js-animations-reanimated] |
+| List scroll jank | [js-lists-flatlist-flashlist.md][js-lists-flatlist-flashlist] |
+| TextInput lag | [js-uncontrolled-components.md][js-uncontrolled-components] |
+| Native module slow | [native-turbo-modules.md][native-turbo-modules] → [native-threading-model.md][native-threading-model] |
+| Native library alignment issue | [native-android-16kb-alignment.md][native-android-16kb-alignment] |
+
+[references]: references/
+[js-lists-flatlist-flashlist]: references/js-lists-flatlist-flashlist.md
+[js-profile-react]: references/js-profile-react.md
+[js-measure-fps]: references/js-measure-fps.md
+[js-memory-leaks]: references/js-memory-leaks.md
+[js-atomic-state]: references/js-atomic-state.md
+[js-concurrent-react]: references/js-concurrent-react.md
+[js-react-compiler]: references/js-react-compiler.md
+[js-animations-reanimated]: references/js-animations-reanimated.md
+[js-bottomsheet]: references/js-bottomsheet.md
+[js-uncontrolled-components]: references/js-uncontrolled-components.md
+[native-turbo-modules]: references/native-turbo-modules.md
+[native-sdks-over-polyfills]: references/native-sdks-over-polyfills.md
+[native-measure-tti]: references/native-measure-tti.md
+[native-threading-model]: references/native-threading-model.md
+[native-profiling]: references/native-profiling.md
+[native-platform-setup]: references/native-platform-setup.md
+[native-view-flattening]: references/native-view-flattening.md
+[native-memory-patterns]: references/native-memory-patterns.md
+[native-memory-leaks]: references/native-memory-leaks.md
+[native-android-16kb-alignment]: references/native-android-16kb-alignment.md
+[bundle-barrel-exports]: references/bundle-barrel-exports.md
+[bundle-analyze-js]: references/bundle-analyze-js.md
+[bundle-tree-shaking]: references/bundle-tree-shaking.md
+[bundle-analyze-app]: references/bundle-analyze-app.md
+[bundle-r8-android]: references/bundle-r8-android.md
+[bundle-hermes-mmap]: references/bundle-hermes-mmap.md
+[bundle-native-assets]: references/bundle-native-assets.md
+[bundle-library-size]: references/bundle-library-size.md
+[bundle-code-splitting]: references/bundle-code-splitting.md
+
+## Attribution
+
+Based on "The Ultimate Guide to React Native Optimization" by Callstack.

package/dist/templates/default/apps/mobile/.agents/skills/react-native-best-practices/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "React Native Best Practices"
+  short_description: "React Native performance optimization guide"
+  default_prompt: "Use $react-native-best-practices to diagnose and improve React Native performance."

package/dist/templates/default/apps/mobile/.agents/skills/react-native-best-practices/references/bundle-analyze-app.md

@@ -0,0 +1,208 @@
+---
+title: Analyze App Bundle Size
+impact: HIGH
+tags: app-size, ruler, emerge-tools, thinning
+---
+
+# Skill: Analyze App Bundle Size
+
+Measure iOS and Android app download/install sizes using Ruler, App Store Connect, and Emerge Tools.
+
+## Quick Command
+
+```bash
+# Android (Ruler)
+cd android && ./gradlew analyzeReleaseBundle
+
+# iOS (Xcode export with thinning)
+cd ios && xcodebuild -exportArchive \
+  -archivePath MyApp.xcarchive \
+  -exportPath ./export \
+  -exportOptionsPlist ExportOptions.plist
+# Check: App Thinning Size Report.txt
+```
+
+## When to Use
+
+- App download size is too large
+- Users complain about storage usage
+- App approaching store limits
+- Comparing releases for size regression
+
+> **Note**: This skill involves visual size reports (Ruler, Emerge Tools X-Ray). When regression checks include device flows, use `agent-device` for app evidence; install it through the environment's approved/trusted path or ask the user if verification needs it and it is missing. Size report analysis itself may still require exported reports, browser screenshots, or human review. Record concrete module/file names and before/after artifact sizes in text when asking an agent to reason about them.
+
+## Key Metrics
+
+| Metric | Description | User Impact |
+|--------|-------------|-------------|
+| Download Size | Compressed, transferred over network | Download time, data usage |
+| Install Size | Uncompressed, on device storage | Storage space |
+
+**Google finding**: Every 6 MB increase reduces installs by 1%.
+
+## Android: Ruler (Spotify)
+
+### Setup
+
+Add to `android/build.gradle`:
+
+```groovy
+buildscript {
+    dependencies {
+        classpath("com.spotify.ruler:ruler-gradle-plugin:2.0.0-beta-3")
+    }
+}
+```
+
+Add to `android/app/build.gradle`:
+
+```groovy
+apply plugin: "com.spotify.ruler"
+
+ruler {
+    abi.set("arm64-v8a")  // Target architecture
+    locale.set("en")
+    screenDensity.set(480)
+    sdkVersion.set(34)
+}
+```
+
+### Analyze
+
+```bash
+cd android
+./gradlew analyzeReleaseBundle
+```
+
+Opens HTML report with:
+- Download size
+- Install size
+- Component breakdown (biggest → smallest)
+
+### CI Size Validation
+
+```groovy
+ruler {
+    verification {
+        downloadSizeThreshold = 20 * 1024 * 1024  // 20 MB
+        installSizeThreshold = 50 * 1024 * 1024   // 50 MB
+    }
+}
+```
+
+Build fails if thresholds exceeded.
+
+## iOS: Xcode App Thinning
+
+### Via App Store Connect (Most Accurate)
+
+After uploading to TestFlight:
+1. Open App Store Connect
+2. Go to your build
+3. View size table by device variant
+
+**Note**: TestFlight builds include debug data, App Store builds slightly larger due to DRM.
+
+### Via Xcode Export
+
+Export an archive with app thinning enabled for all compatible device variants.
+
+Or in `ExportOptions.plist`:
+
+```xml
+<key>thinning</key>
+<string>&lt;thin-for-all-variants&gt;</string>
+```
+
+### Output
+
+Creates folder with:
+- **Universal IPA**: All variants combined
+- **Thinned IPAs**: One per device variant
+- **App Thinning Size Report.txt**:
+
+```
+Variant: SampleApp-<UUID>.ipa
+App + On Demand Resources size: 3.5 MB compressed, 10.6 MB uncompressed
+App size: 3.5 MB compressed, 10.6 MB uncompressed
+```
+
+- Compressed = Download size
+- Uncompressed = Install size
+
+## Emerge Tools (Cross-Platform)
+
+Third-party service with visual analysis.
+
+### Upload
+
+Upload IPA, APK, or AAB through their web interface or CI integration.
+
+### Features
+
+![Emerge Tools X-Ray for iOS](images/emerge-xray-ios.png)
+
+- **X-Ray**: Treemap visualization (like source-map-explorer for binaries)
+  - Shows Frameworks (hermes.framework), Mach-O sections (TEXT, DATA), etc.
+  - Color-coded: Binaries, Localizations, Fonts, Asset Catalogs, Videos, CoreML Models
+  - Visible components: `main.jsbundle` (JS code), RCT modules, DYLD sections
+- **Breakdown**: Component-by-component size
+- **Insights**: Automated suggestions (use with caution)
+
+**Caution**: Some suggestions may not apply to React Native (e.g., "remove Hermes").
+
+## Size Comparison
+
+| Tool | Platform | Accuracy | CI Integration |
+|------|----------|----------|----------------|
+| Ruler | Android | High | Yes (Gradle) |
+| App Store Connect | iOS | Highest | No |
+| Xcode Export | iOS | High | Yes (xcodebuild) |
+| Emerge Tools | Both | High | Yes (API) |
+
+## Typical React Native App Sizes
+
+| Component | Approximate Size |
+|-----------|------------------|
+| Hermes engine | ~2-3 MB |
+| React Native core | ~3-5 MB |
+| JavaScript bundle | 1-10 MB |
+| Assets (images, etc.) | Varies |
+
+**Baseline empty app**: ~6-10 MB download
+
+## Optimization Impact Example
+
+| Optimization | Size Reduction |
+|--------------|----------------|
+| Enable R8 (Android) | ~30% |
+| Remove unused polyfills | 400+ KB |
+| Asset catalog (iOS) | 10-50% of assets |
+| Tree shaking | 10-15% |
+
+## Quick Commands
+
+```bash
+# Android release bundle size
+cd android && ./gradlew bundleRelease
+# Check: android/app/build/outputs/bundle/release/
+
+# iOS archive
+cd ios && xcodebuild -workspace ios/MyApp.xcworkspace \
+  -scheme MyApp \
+  -configuration Release \
+  -archivePath MyApp.xcarchive \
+  archive
+
+# Export with thinning report
+cd ios && xcodebuild -exportArchive \
+  -archivePath MyApp.xcarchive \
+  -exportPath ./export \
+  -exportOptionsPlist ExportOptions.plist
+```
+
+## Related Skills
+
+- [bundle-r8-android.md](./bundle-r8-android.md) - Reduce Android size
+- [bundle-native-assets.md](./bundle-native-assets.md) - Optimize asset delivery
+- [bundle-analyze-js.md](./bundle-analyze-js.md) - JS bundle analysis