create-disposabl-app 0.0.4 → 0.1.1

package/dist/templates/default/apps/mobile/.agents/skills/expo-module/references/native-module.md

@@ -0,0 +1,286 @@
+# Native Module DSL Reference
+
+Swift is shown as the primary language. Kotlin follows the same DSL structure (see SKILL.md for both). Kotlin-specific syntax is noted where it meaningfully differs.
+
+## Name
+
+Sets the module identifier used in JavaScript.
+
+```swift
+Name("MyModule")
+```
+
+## Constant
+
+Computed once on first access, then cached.
+
+```swift
+Constant("PI") { 3.14159 }
+```
+
+## Function (Synchronous)
+
+Blocks the JS thread until completion. Supports up to 8 arguments.
+
+```swift
+Function("add") { (a: Int, b: Int) -> Int in
+  return a + b
+}
+```
+
+## AsyncFunction
+
+Returns a Promise. Runs on a background thread by default.
+
+```swift
+AsyncFunction("fetchData") { (url: URL) -> String in
+  let data = try Data(contentsOf: url)
+  return String(data: data, encoding: .utf8) ?? ""
+}
+
+// Force main queue execution
+AsyncFunction("updateUI") { () -> Void in
+  // UI work
+}.runOnQueue(.main)
+```
+
+**Kotlin differences:**
+
+```kotlin
+// Supports Kotlin coroutines
+AsyncFunction("fetchData") Coroutine { url: java.net.URL ->
+  withContext(Dispatchers.IO) {
+    url.readText()
+  }
+}
+```
+
+## Property
+
+Getter/setter for JS object properties.
+
+```swift
+// Read-only
+Property("version") { "1.0.0" }
+
+// Read-write
+Property("volume")
+  .get { () -> Float in self.volume }
+  .set { (newValue: Float) in self.volume = newValue }
+```
+
+## Events
+
+Declares events the module can send to JS. Must be declared before using `sendEvent`.
+
+```swift
+// Declaration
+Events("onChange", "onError")
+
+// Sending from native (Swift)
+sendEvent("onChange", ["value": newValue])
+```
+
+**Kotlin difference** — uses `bundleOf`:
+
+```kotlin
+sendEvent("onChange", bundleOf("value" to newValue))
+```
+
+**JS subscription:**
+
+```typescript
+import { useEvent } from "expo";
+import MyModule from "./MyModule";
+
+// Hook-based (recommended)
+const event = useEvent(MyModule, "onChange");
+
+// Manual subscription
+const subscription = MyModule.addListener("onChange", (event) => {
+  console.log(event.value);
+});
+// Clean up: subscription.remove()
+```
+
+### OnStartObserving / OnStopObserving
+
+Called when the first listener attaches / last listener detaches. Can be scoped to specific events.
+
+```swift
+OnStartObserving("onChange") {
+  // Start producing events
+}
+
+OnStopObserving("onChange") {
+  // Stop producing events
+}
+```
+
+---
+
+## Type System
+
+### Primitives
+
+| Swift | Kotlin | JS |
+|-------|--------|----|
+| `Bool` | `Boolean` | `boolean` |
+| `Int`, `Int32` | `Int` | `number` |
+| `Int64` | `Long` | `number` |
+| `Float`, `Float32` | `Float` | `number` |
+| `Double` | `Double` | `number` |
+| `String` | `String` | `string` |
+| `URL` | `java.net.URL` / `android.net.Uri` | `string` |
+| `CGPoint` | - | `{ x, y }` |
+| `CGSize` | - | `{ width, height }` |
+| `CGRect` | - | `{ x, y, width, height }` |
+| `UIColor` / `CGColor` | `android.graphics.Color` | `string` (ProcessedColorValue) |
+| `Data` | `kotlin.ByteArray` | `Uint8Array` |
+
+### Records (Struct-like types)
+
+```swift
+struct UserRecord: Record {
+  @Field var name: String = ""
+  @Field var age: Int = 0
+  @Field var email: String?
+}
+
+Function("createUser") { (user: UserRecord) -> Bool in
+  return true
+}
+```
+
+**Kotlin difference** — uses `class` instead of `struct`, optional fields need explicit `= null`:
+
+```kotlin
+class UserRecord : Record {
+  @Field var name: String = ""
+  @Field var age: Int = 0
+  @Field var email: String? = null
+}
+```
+
+### Enums (Enumerable)
+
+```swift
+enum Theme: String, Enumerable {
+  case light
+  case dark
+  case system
+}
+
+Function("setTheme") { (theme: Theme) in
+  // type-safe enum value
+}
+```
+
+**Kotlin difference** — uses `enum class` with explicit `value` property:
+
+```kotlin
+enum class Theme(val value: String) : Enumerable {
+  LIGHT("light"),
+  DARK("dark"),
+  SYSTEM("system")
+}
+```
+
+### Either Types (Union types)
+
+```swift
+Function("process") { (input: Either<String, Int>) in
+  if let str = input.get(String.self) {
+    // handle string
+  } else if let num = input.get(Int.self) {
+    // handle number
+  }
+}
+```
+
+Also available: `EitherOfThree<A, B, C>`, `EitherOfFour<A, B, C, D>`.
+
+### JavaScript Values (Direct JS manipulation)
+
+For advanced use in synchronous functions running on JS thread:
+
+```swift
+Function("callback") { (fn: JavaScriptFunction<String>) in
+  let result = fn("arg1", "arg2")
+}
+```
+
+---
+
+## Shared Objects
+
+Bridge native class instances to JS with automatic lifecycle management. Instances are deallocated when neither JS nor native code holds a reference.
+
+### Defining a Shared Object
+
+```swift
+class ImageContext: SharedObject {
+  private var image: UIImage
+
+  init(image: UIImage) {
+    self.image = image
+    super.init()
+  }
+
+  func rotate(degrees: Double) {
+    image = image.rotated(degrees: degrees)
+  }
+}
+```
+
+**Kotlin difference** — takes `RuntimeContext` in constructor, override `sharedObjectDidRelease()` for cleanup:
+
+```kotlin
+class ImageContext(
+  runtimeContext: RuntimeContext,
+  private var bitmap: Bitmap
+) : SharedObject(runtimeContext) {
+
+  fun rotate(degrees: Float) { /* ... */ }
+
+  override fun sharedObjectDidRelease() {
+    if (!bitmap.isRecycled) bitmap.recycle()
+  }
+}
+```
+
+### Exposing via Class DSL
+
+```swift
+Class("Context", ImageContext.self) {
+  Constructor { (path: String) -> ImageContext in
+    return ImageContext(image: UIImage(contentsOfFile: path)!)
+  }
+
+  Function("rotate") { (ctx: ImageContext, degrees: Double) -> ImageContext in
+    ctx.rotate(degrees: degrees)
+    return ctx
+  }
+
+  Property("width")
+    .get { (ctx: ImageContext) -> Int in ctx.width }
+}
+```
+
+Other Class DSL components: `StaticFunction`, `StaticAsyncFunction`, `AsyncFunction`.
+
+### SharedRef
+
+Specialized shared reference for passing typed objects between modules:
+
+```swift
+final class ImageRef: SharedRef<UIImage> {}
+```
+
+### JS Usage
+
+```typescript
+const ctx = await ImageModule.create("/path/to/image.png");
+ctx.rotate(90);
+console.log(ctx.width);
+```

package/dist/templates/default/apps/mobile/.agents/skills/expo-module/references/native-view.md

@@ -0,0 +1,171 @@
+# Native View Reference
+
+Native views let you render platform UI components (UIView on iOS, Android View on Android) as React components.
+
+## Defining a View
+
+**Swift:**
+
+```swift
+public class MyViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("MyView")
+
+    View(MyNativeView.self) {
+      Prop("title") { (view: MyNativeView, title: String) in
+        view.titleLabel.text = title
+      }
+
+      Events("onPress", "onLoad")
+
+      AsyncFunction("reset") { (view: MyNativeView) in
+        view.reset()
+      }
+    }
+  }
+}
+
+class MyNativeView: ExpoView {
+  let titleLabel = UILabel()
+
+  required init(appContext: AppContext) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    addSubview(titleLabel)
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    titleLabel.frame = bounds
+  }
+}
+```
+
+**Kotlin:**
+
+```kotlin
+class MyViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("MyView")
+
+    View(MyNativeView::class) {
+      Prop("title") { view: MyNativeView, title: String ->
+        view.titleView.text = title
+      }
+
+      Events("onPress", "onLoad")
+
+      AsyncFunction("reset") { view: MyNativeView ->
+        view.reset()
+      }
+    }
+  }
+}
+
+class MyNativeView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  val titleView = TextView(context).also {
+    addView(it, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+  }
+}
+```
+
+**TypeScript:**
+
+```typescript
+import { requireNativeView } from "expo";
+
+export type MyViewProps = {
+  title?: string;
+  onPress?: (event: { nativeEvent: { x: number; y: number } }) => void;
+  onLoad?: () => void;
+} & ViewProps;
+
+const NativeView = requireNativeView<MyViewProps>("MyView");
+
+export function MyView(props: MyViewProps) {
+  return <NativeView {...props} />;
+}
+```
+
+## View Event Dispatching
+
+**Swift:**
+
+```swift
+class MyNativeView: ExpoView {
+  let onPress = EventDispatcher()
+
+  func handleTap(at point: CGPoint) {
+    onPress(["x": point.x, "y": point.y])
+  }
+}
+```
+
+**Kotlin:**
+
+```kotlin
+class MyNativeView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onPress by EventDispatcher()
+
+  fun handleTap(x: Float, y: Float) {
+    onPress(mapOf("x" to x, "y" to y))
+  }
+}
+```
+
+## View Lifecycle
+
+```swift
+// Called after all props have been set
+OnViewDidUpdateProps { (view: MyNativeView) in
+  view.applyChanges()
+}
+```
+
+```kotlin
+// Android only - called when view is no longer used
+OnViewDestroys { view: MyNativeView ->
+  view.cleanup()
+}
+```
+
+## AsyncFunction on Views
+
+Functions defined inside `View` are accessible via React ref:
+
+```typescript
+const ref = useRef<MyView>(null);
+// Call native function
+await ref.current?.reset();
+```
+
+## PropGroup (Android)
+
+Batch-register multiple props with shared setter logic:
+
+```kotlin
+View(MyNativeView::class) {
+  PropGroup("border", "width" to Float::class, "color" to Int::class) { view, index, value ->
+    when (index) {
+      0 -> view.borderWidth = value as Float
+      1 -> view.borderColor = value as Int
+    }
+  }
+}
+```
+
+## GroupView (Android)
+
+Enable view group functionality for managing child views:
+
+```kotlin
+View(MyContainerView::class) {
+  GroupView {
+    AddChildView { parent, child, index -> parent.addView(child, index) }
+    GetChildCount { parent -> parent.childCount }
+    GetChildViewAt { parent, index -> parent.getChildAt(index) }
+    RemoveChildView { parent, child -> parent.removeView(child) }
+    RemoveChildViewAt { parent, index -> parent.removeViewAt(index) }
+  }
+}
+```

package/dist/templates/default/apps/mobile/.agents/skills/expo-native-ui/SKILL.md

@@ -0,0 +1,201 @@
+---
+name: expo-native-ui
+description: Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.
+version: 1.1.1
+license: MIT
+---
+
+# Expo Native UI Guidelines
+
+For routes, links, stacks, tabs, modals, sheets, and headers, use the `expo-router` skill. For any motion — entering/exiting, gestures, springs, keyboard-driven UI — use the `expo-animation` skill.
+
+> **Before picking any UI component, check `expo-ui` first.** `@expo/ui` provides native equivalents — BottomSheet, Button, Picker, Slider, Menu, Section, Switch, SegmentedControl, and more — rendered as real SwiftUI on iOS and Jetpack Compose on Android, available in Expo Go on SDK 56+ with no custom build. Load the **`expo-ui`** skill to find the right component before falling back to React Native built-ins or community libraries. This skill (`expo-native-ui`) covers the surrounding structure: Expo Router navigation, layout, styling, and visual effects.
+
+## References
+
+Consult these resources as needed:
+
+```
+references/
+  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
+  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)
+  icons.md               SF Symbols via expo-symbols SymbolView: names, weights, animations; Material icons on Android
+  media.md               Camera, audio, video, and file saving
+  storage.md             SQLite, AsyncStorage, SecureStore
+  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)
+  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js
+```
+
+## Running the App
+
+**CRITICAL: Always try Expo Go first before creating custom builds.**
+
+Most Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:
+
+1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go
+2. **Check if features work**: Test your app thoroughly in Expo Go
+3. **Only create custom builds when required** - see below
+
+### When Custom Builds Are Required
+
+You need `npx expo run:ios/android` or `eas build` ONLY when using:
+
+- **Local Expo modules** (custom native code in `modules/`)
+- **Apple targets** (widgets, app clips, extensions via `@bacons/apple-targets`)
+- **Third-party native modules** not included in Expo Go
+- **Custom native configuration** that can't be expressed in `app.json`
+
+### When Expo Go Works
+
+Expo Go supports a wide range of features out of the box:
+
+- Most `expo-*` packages (camera, location, sensors, sqlite, etc.) — but not all: remote push notifications don't work in Expo Go on Android since SDK 53, and some packages need native capabilities Expo Go doesn't bundle (e.g. WebGPU — see `references/webgpu-three.md`)
+- Expo Router navigation and deep links
+- Most UI libraries (reanimated, gesture handler, etc.)
+
+**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode/Android Studio setup.
+
+## Code Style
+
+- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.
+- Always use import statements at the top of the file.
+- Always use kebab-case for file names, e.g. `comment-card.tsx`
+- Never use special characters in file names
+- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.
+
+## Library Preferences
+
+- **For any sheet, picker, slider, toggle, menu, or grouped-form section: use `@expo/ui` (see `expo-ui` skill) before reaching for a React Native built-in or community library** — it renders native SwiftUI/Compose and works in Expo Go on SDK 56+. For grouped/settings-style rows (short, fixed-length), use `@expo/ui`'s `List` + `ListItem`. For large or unknown-length scrolling lists (feeds, search results, catalogs), use `FlatList` or `FlashList` — `@expo/ui`'s `List` is not virtualized.
+- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage
+- Never use legacy expo-permissions
+- `expo-audio` not `expo-av`
+- `expo-video` not `expo-av`
+- `expo-symbols` (`SymbolView`) for SF Symbols on iOS, not `@expo/vector-icons` — see `references/icons.md`. SF Symbols are Apple-only: on Android every icon needs a Material source (`md` prop on NativeTabs triggers; in-screen options under "Android: Material Icons" in icons.md), never SF-only iconography
+- `react-native-safe-area-context` not react-native SafeAreaView
+- `process.env.EXPO_OS` not `Platform.OS`
+- `React.use` not `React.useContext`
+- `expo-image` Image component instead of intrinsic element `img`
+- `expo-glass-effect` for liquid glass backdrops
+- `Color` from `expo-router` for native semantic colors, not raw `PlatformColor` (type-safe, auto-adapts to light/dark)
+- In SDK 56+, never import from `@react-navigation/*` directly — use `expo-router/react-navigation` instead (covers `@react-navigation/native`, `/core`, `/elements`, `/routers`)
+
+## Responsiveness
+
+- Wrap screens with scrollable content in a ScrollView. Screens whose root is a FlatList/FlashList must not add an outer ScrollView (the list is the scroll container), and full-bleed screens (camera, map, canvas) need neither
+- Use `<ScrollView contentInsetAdjustmentBehavior="automatic" />` instead of `<SafeAreaView>` for smarter safe area insets
+- `contentInsetAdjustmentBehavior="automatic"` should be applied to FlatList and SectionList as well
+- Use flexbox instead of Dimensions API
+- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size
+
+## Behavior
+
+- Use expo-haptics conditionally on iOS to make more delightful experiences
+- Use views with built-in haptics like `<Switch />` from React Native and `@react-native-community/datetimepicker`
+- When a Stack route has scrollable content, make the ScrollView (or FlatList) the first component inside the route, with `contentInsetAdjustmentBehavior="automatic"` set
+- Use the `<Text selectable />` prop on text containing data that could be copied
+- Consider formatting large numbers like 1.4M or 38k
+- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component
+- Every screen that loads data has four states (loading, error, empty, content) - never show the empty state while the first load is still resolving; the rules live in the `expo-data-fetching` skill
+- On scrollable forms and search results, use `keyboardShouldPersistTaps="handled"` so controls receive the first tap and unhandled taps can dismiss the keyboard. Use `"always"` only when unhandled taps should also keep it open
+- A form's primary action must never sit under the keyboard. For UI that tracks the keyboard's real frame, load the `expo-animation` skill's keyboard recipe (`react-native-keyboard-controller`) - never `Keyboard.addListener` plus a timing animation
+- Every enabled control must perform its advertised action: search filters results, Save commits edits, and settings affect behavior. Empty handlers and success alerts are not implementations; local state is enough when the user requested a prototype
+- For async saves, preserve drafts and handle pending/failure states per `expo-data-fetching`; do not dismiss a form before its save succeeds
+
+Before calling a screen complete, walk through its primary task, including one failure and recovery when it loads or saves data. Check keyboard access and back/dismiss behavior. Try long titles, missing images, no search results, and large system text; required actions must remain reachable. Report what you exercised and what you could not run.
+
+# Styling
+
+Follow each platform's own design language: Apple Human Interface Guidelines on iOS, Material Design 3 on Android. Never dress one platform in the other's uniform - no FAB or ripple in iOS layouts; no hand-built iOS chrome (back-chevrons, large-title text, iOS-styled switches) on Android.
+
+## General Styling Rules
+
+- Prefer flex gap over margin and padding styles
+- Prefer padding over margin where possible
+- Always account for safe area, either with stack headers, tabs, or ScrollView/FlatList `contentInsetAdjustmentBehavior="automatic"`
+- Ensure both top and bottom safe area insets are accounted for
+- Inline styles not StyleSheet.create unless reusing styles is faster
+- For any motion or animation work, load the `expo-animation` skill — it owns the animate-or-not decision, timing values, and interruption rules
+- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape
+- ALWAYS use a navigation stack title instead of a custom text element on the page
+- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)
+- CSS and Tailwind are not supported - use inline styles
+
+## Colors
+
+Use the `Color` API from `expo-router` for native semantic colors. It is a type-safe wrapper over `PlatformColor` that exposes iOS UIKit colors through `Color.ios.*` and Android Material 3 colors through `Color.android.material.*` (static) or `Color.android.dynamic.*` (adapts to the user's wallpaper on Android 12+). These resolve on-device and automatically adapt to light/dark mode and accessibility settings, so you no longer maintain separate light/dark hex tables or a `colors.web.ts` file.
+
+`Color` is platform-specific, so wrap each value in `Platform.select` with a `default` hex fallback for web. Centralize the palette in `theme/colors.ts` and import `colors` everywhere:
+
+```tsx
+// theme/colors.ts
+import { Platform } from "react-native";
+import { Color } from "expo-router";
+
+export const colors = {
+  label: Platform.select({
+    ios: Color.ios.label,
+    android: Color.android.dynamic.onSurface,
+    default: "#000000",
+  })!,
+  secondaryLabel: Platform.select({
+    ios: Color.ios.secondaryLabel,
+    android: Color.android.dynamic.onSurfaceVariant,
+    default: "#3c3c43",
+  })!,
+  separator: Platform.select({
+    ios: Color.ios.separator,
+    android: Color.android.dynamic.outlineVariant,
+    default: "#c6c6c8",
+  })!,
+  systemBackground: Platform.select({
+    ios: Color.ios.systemBackground,
+    android: Color.android.dynamic.surface,
+    default: "#ffffff",
+  })!,
+  secondarySystemBackground: Platform.select({
+    ios: Color.ios.secondarySystemBackground,
+    android: Color.android.dynamic.surfaceVariant,
+    default: "#f2f2f7",
+  })!,
+  systemBlue: Platform.select({
+    ios: Color.ios.systemBlue,
+    android: Color.android.dynamic.primary,
+    default: "#007aff",
+  })!,
+};
+```
+
+```tsx
+import { colors } from "@/theme/colors";
+
+<View style={{ backgroundColor: colors.systemBackground }}>
+  <Text style={{ color: colors.label }}>Title</Text>
+</View>;
+```
+
+- iOS re-resolves these colors automatically when the system theme changes. On Android, call `useColorScheme()` inside any component that renders them so it re-renders when the theme flips (required when React Compiler memoizes the component).
+- Don't pass `Color` / `PlatformColor` values into Reanimated styles — they are opaque native color objects, not strings; use static colors there.
+- `Platform.select({...})!` returns `string | OpaqueColorValue`. Most React Native style props accept `ColorValue` (`string | OpaqueColorValue`) so this works fine. But some third-party props only accept `string` (e.g. `tintColor` on `expo-image`). Cast when needed: `colors.label as string`.
+
+## Text Styling
+
+- Add the `selectable` prop to every `<Text/>` element displaying important data or error messages
+- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment
+
+## Shadows
+
+Use CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.
+
+```tsx
+<View style={{ boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)" }} />
+```
+
+'inset' shadows are supported.
+
+## Submitting Feedback
+If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:
+```bash
+npx --yes @expo/agent-cli@latest feedback --category skills --subject "expo-native-ui" "<actionable feedback>"
+```
+Only submit when you have something specific and actionable to report. Include as much relevant context as possible.
+If an agent repeatedly fails at an Expo task or the user has to step in, submit a brief report of the task, expected result, and what went wrong using `--category evals` and the relevant Expo package or command as `--subject`.

package/dist/templates/default/apps/mobile/.agents/skills/expo-native-ui/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Expo Native UI"
+  short_description: "Build beautiful, native-feeling Expo screens: HIG styling, semantic colors, controls, SF Symbols, media, and visual effects"
+  default_prompt: "Use $expo-native-ui to style native-feeling Expo screens, choose semantic colors and native controls, add media and visual effects, and decide when Expo Go is enough before creating native builds."