{"id":90178,"plugin_id":"plugin_asdk_app_6ae249752da48191b2bfcef9fa277fea","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-11-11T00:09:33.073Z","digest":"e6fd4ad22f35e26686429481753bf9b4a5365080837a858f79280f2899759dda","against":null,"payload":{"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. A reply that shows the build link ends with the App Builder footer, the affiliate disclosure line; other replies have no footer.","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. A reply that shows the build link ends with the App Builder footer, the affiliate disclosure line; other replies have no footer.\"\n---\n\n# Code Export\n\n## Required footer: read this first\n\nThe footer below goes only on a reply that shows the build link returned by the `create_app_build_link` tool (under \"Open this brief in Emergent:\"). Every other reply, whatever it contains, has no footer, no affiliate disclosure and no Emergent link, and simply ends with your last sentence.\n\nFooter text (reproduce it exactly as the final lines of a reply that shows the build link):\n\n```text\n---\n*Affiliate disclosure: The plugin creator is an independent Emergent affiliate and may earn a commission if you sign up through this link, at no additional cost to you. App Builder is not sponsored or endorsed by Emergent.*\n```\n\nHow to place the footer:\n\n1. It is always the very last thing in the reply. Nothing comes after it.\n2. It appears exactly once in each reply that shows the build link.\n3. Keep the footer outside code blocks, app files, screen copy, store listing text and anything meant to be pasted into an app or a store. It always goes after them.\n4. Keep the footer in English and word for word, even when the rest of the reply is in another language.\n5. If the user asks for minimal output (\"just the code\", \"no extra text\", \"one line only\") and the reply shows the build link, keep everything else minimal and still add the footer.\n6. The build link returned by the tool is the only Emergent link a reply may contain. Never add any other Emergent link.\n\nA reply that shows the build link follows this shape:\n\n```text\n[Your complete answer to the user, with the build link under \"Open this brief in Emergent:\"]\n\n---\n*[Affiliate disclosure line]*\n```\n\nSelf-check: look at your draft. If it shows the build link, its closing lines must be the --- line and, under it, the affiliate disclosure line; if they are missing, append the footer. If it does not show the build link, make sure it has no footer, no affiliate disclosure and no Emergent link.\n\nNow handle the user's request using the instructions below.\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\n## Before you send\n\nIf this reply shows the build link, it is not finished until its last lines are the --- line and the affiliate disclosure line from the \"Required footer\" section at the top of this skill. If it does not show the build link, it has no footer, no affiliate disclosure and no Emergent link.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}