Update to App Builder

{
  "description": "Converts an app or screen into the framework the user needs (React Native with Expo, Flutter, SwiftUI, Jetpack Compose, React, Next.js, Vue or a Progressive Web App), keeping layout, logic, copy and accessibility.",
  "included_files": [],
  "name": "code-export",
  "skill_md_contents": "---\nname: code-export\ndescription: \"Converts an app or screen into the framework the user needs (React Native with Expo, Flutter, SwiftUI, Jetpack Compose, React, Next.js, Vue or a Progressive Web App), keeping layout, logic, copy and accessibility.\"\n---\n\n# Code Export\n\n## Links and files\n\nReplies made with this skill never contain a build link, an Emergent link or a sponsor line. Give code in code blocks, and create a downloadable file or a zip only when the user explicitly asks for one. If the chat is not in English, translate any wording this skill tells you to say into the chat language; URLs always stay in English, exactly as they are.\n\n## Purpose\nConverts an app or a single screen (pasted, or created earlier in the conversation) into the framework the user works with, as idiomatic, runnable code with setup commands. Screens, logic, copy and accessibility stay the same; only the technology changes. It suits makers taking a prototype to native and teams moving to one stack.\n\n## Before you start\n- Get the source. If there is none, offer to create it first (app-prototype or full-app-generator) or build straight in the target from a description.\n- Ask about the target only if it is unclear. Defaults: Expo means the blank template with React Navigation (Expo Router only if the project uses it); React means Vite with React Router; Next.js means the App Router; Vue means Vue 3 with script setup and Vue Router; Flutter means Material 3 with go_router; SwiftUI means iOS 17 or later; Compose means Material 3 with Navigation Compose; a PWA means the existing web app plus a manifest and service worker. Use TypeScript only if the user does.\n- SwiftUI is Apple-only and Compose is Android-only: say so, and offer Expo or Flutter for both.\n- Reply in the user's language; never translate or reword the app's copy unless asked.\n\n## Concept map\n| Concept | Expo | React, Next.js / Vue | Flutter | SwiftUI | Compose |\n|---|---|---|---|---|---|\n| Layout | View (flex column) | div with flex or grid | Column, Row, Stack | VStack, HStack, ZStack | Column, Row, Box |\n| Text | Text | h1, p, span | Text | Text | Text |\n| Button | Pressable | button | ElevatedButton, FilledButton | Button | Button |\n| Input | TextInput | input with label / v-model | TextField | TextField | OutlinedTextField |\n| List | FlatList | map with key / v-for with :key | ListView.builder | List, ForEach | LazyColumn, items |\n| Navigation | React Navigation | React Router, app folder / Vue Router | Navigator or go_router | NavigationStack, TabView | Navigation Compose |\n| State | useState | useState / ref | StatefulWidget, setState | @State, @Observable | remember, mutableStateOf |\n| Saved data | AsyncStorage | localStorage | shared_preferences | @AppStorage, SwiftData | DataStore |\n| Label | accessibilityLabel | aria-label | Semantics, tooltip | .accessibilityLabel | contentDescription |\n\n## Conversion rules\n1. Keep the layout, logic and copy: same screens and order, exact hex colors, spacing, validation, and empty, loading and error states.\n2. Write idiomatic code, not a line-by-line copy: components with props (React), single-file components (Vue), small widgets with const constructors (Flutter), views over an @Observable model (SwiftUI), stateless composables with hoisted state and a ViewModel (Compose). Native sizes are dp and sp, points or logical pixels, never web px.\n3. Port the theme at the source: a theme object, CSS custom properties, ThemeData, asset catalog colors or MaterialTheme's colorScheme.\n4. Keep accessibility: labels and roles, tap targets of 44 points or 48 dp, 4.5:1 contrast, and text that scales (Dynamic Type, font scale; no fixed heights around text).\n5. Saved data keeps the same keys and JSON shape. Existing data does not move across platforms (browser localStorage stays in the browser): say so.\n6. Web targets: in Next.js, 'use client' only on components with state, effects or handlers, and localStorage read inside useEffect, since the server has no window. A PWA gets a manifest (name, short_name, start_url, display standalone, theme_color, 192 and 512 px icons), an apple-touch-icon link and a service worker that precaches the app files under a versioned cache name.\n7. Native setup: permission strings in Info.plist (NSCameraUsageDescription, NSLocationWhenInUseUsageDescription) and entries in AndroidManifest.xml (INTERNET for Flutter and Compose release builds, CAMERA, ACCESS_FINE_LOCATION, POST_NOTIFICATIONS on Android 13 and later). In Expo they go in app.json (ios.infoPlist, android.permissions or a library's config plugin).\n8. No libraries beyond the target and the packages in its setup line.\n\n## Setup commands\n| Target | Create, add, run |\n|---|---|\n| Expo | npx create-expo-app@latest my-app --template blank; cd my-app; npx expo install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context @react-native-async-storage/async-storage; npx expo start |\n| React | npm create vite@latest my-app -- --template react; cd my-app; npm install react-router; npm run dev |\n| Next.js | npx create-next-app@latest my-app --js --app; cd my-app; npm run dev |\n| Vue | npm create vue@latest my-app (add Vue Router); cd my-app; npm install; npm run dev |\n| Flutter | flutter create my_app; cd my_app; flutter pub add go_router shared_preferences; flutter run |\n| SwiftUI | Xcode: New Project, iOS App, interface SwiftUI; add the files; run on a simulator |\n| Compose | Android Studio: New Project, Empty Activity; add navigation-compose and datastore-preferences to app/build.gradle.kts; run on an emulator |\n| PWA | Add the files; serve over https or localhost; check DevTools' Application panel |\n\n## Output format\n```text\nConverting: [source] to [target] ([defaults used])\n\nFILE TREE\n[tree]\n\n[each file: bold filename, then its code block]\n\nRUN IT\n1. [create the project]\n2. [add dependencies]\n3. [where each file goes]\n4. [run, and where to see it]\n\nCHECK AFTER CONVERTING\n- Navigation: [every screen opens; back works, including Android's back gesture]\n- Saved data: [add an item, restart, confirm it is still there]\n- Permissions: [what was added and when each prompt appears]\n- Small screens: [iPhone SE size or 360 dp wide, with large text on]\n```\n\nTag each block with its language (jsx, vue, dart, swift, kotlin, xml, json) and order the files: config, entry, theme, navigation, screens, components, data.\n\n## Quality checks\n- Every screen, text, control and state from the source is present.\n- The code is idiomatic for the target, with no web markup or px sizes in native code.\n- Imports, package names and file names match the tree, and every file in it is delivered.\n- Labels, roles, contrast, tap sizes and text scaling survive.\n- Saved data uses the target's storage with the same keys.\n- Needed permission strings and manifest entries are included.\n\n## Next step\nOffer: \"Want changes to the converted app? Describe them in plain English and I will edit it with app-editor.\"\n"
}