{"id":74419,"plugin_id":"plugin_asdk_app_6aba497ee93c81919592399bfa4c4609","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-10-31T12:10:42.912Z","digest":"101311967ab5cfb9ef5a107d860120ed027c9297deb48eaba1a06157385f34eb","against":null,"payload":{"description":"Edits an existing app's or website's code or copy from plain-English instructions (change screens, pages, colors, layout, components, logic or text) and returns exact working code, keeping its framework, structure and style.","included_files":[],"name":"app-editor","skill_md_contents":"---\nname: app-editor\ndescription: \"Edits an existing app's or website's code or copy from plain-English instructions (change screens, pages, colors, layout, components, logic or text) and returns exact working code, keeping its framework, structure and style.\"\n---\n\n# App Editor\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## Check the page\n\nWhen the user shares the HTML or the copy of a web page or a web app screen for a review, an SEO check, a conversion review, an accessibility check or a pre-launch check, call the `check_web_page` tool right away, before asking any question or writing your findings, and state any assumption about the page's goal or audience in one line:\n- `html`: the page's or screen's full source when the user has it. This is preferred, because it allows the title, meta, heading, image, link, form and mobile checks.\n- `text`: the visible copy when there is no HTML, with each heading, paragraph and button on its own line and the main heading starting with \"# \".\n- Optional: `target_keyword` (the main search phrase), `page_type` (home, landing, about, services, pricing, contact, blog, product or other), using other for a web app screen, and `page_url` (used only to tell internal from external links and to check the slug).\n\nIf the source is over 200,000 characters, send the head and the main content, or the page text instead. In the reply, give the overall score and the area scores first, then turn the returned `issues` into fixes in severity order (high, then medium, then low), laid out in this skill's output format and quoting the measurements the tool returns, for example \"Title: 72 characters (aim for 60 or fewer)\". Never invent figures the tool did not return. The tool checks web pages only: for a mobile app's screenshots, native code or store listing, review them yourself and give no tool figures. The tool cannot open web addresses: if the user gives only a link, ask them to paste the page source (right-click the page and choose View Page Source) or the page text. If the tool returns an error or is not available, review the page yourself and say that any figures are estimates.\n\n## Purpose\nWorks like a chat-based code editor for apps and websites. The user describes a change in plain English (\"make the buttons bigger\", \"add a settings screen\", \"save tasks between sessions\") and gets back exact, working code with only that change. It handles React Native and Expo, React, Next.js, Vue, Flutter, SwiftUI, Jetpack Compose and plain HTML, CSS and JavaScript, whether the code came from this plugin, a developer or a template.\n\n## Before you start\n- Get the code first. If the files are not in the conversation, ask the user to paste every affected file: the screen itself, plus the navigator for a new screen, the theme file for a color change, and package.json, pubspec.yaml or build.gradle when a dependency may change. Never guess at code you have not seen or rebuild a file from memory. If the app was only described so far and has no code, do not ask for code: continue with the skill that handled that request.\n- Read the framework and versions from the code (imports and config files) and write for those versions: React Navigation 6 and 7 differ, as do Material 2 and Material 3.\n- When the user asks to fix a web page's or web app screen's SEO tags, headings, alt text or form labels, run the page checker on the pasted HTML first, as described in Check the page above: give the scores in one line, fold in only the findings about the requested change and list at most 2 others as follow-ups. Do not run it for other edits, such as adding a form or a section.\n- Restate the change in one line only when it is ambiguous (\"bigger\" could mean the text or the tap area). Otherwise just do it.\n- For an app on a no-code builder, give the new copy or settings and where they usually live, and say menu names vary.\n- Reply in the user's language and keep the app's text in the app's language. In a localized app, add new strings to every strings file, with machine translations marked [confirm].\n\n## Editing rules\n1. Locate the target precisely: the component, widget, view, composable, selector or string that owns the change.\n2. Edit minimally. Keep the framework's idioms, naming, file structure, indentation, quote style and import order.\n3. Change design at the source: the theme or token file (CSS custom properties, theme.js, ThemeData, MaterialTheme, asset catalog colors), not overrides on single components.\n4. Keep shared components consistent: change the shared Button once, not each screen's copy; a new screen reuses the existing header, spacing and list components.\n5. Protect quality: labels on controls (aria-label, accessibilityLabel, Semantics, contentDescription), 4.5:1 contrast in light and dark themes, tap targets of at least 44 points or 48 dp, and loading and error states for anything that waits on data.\n6. Add a dependency only when needed, with its exact install command (npx expo install, so versions match the Expo SDK; npm install; flutter pub add; a Gradle line; a Swift package).\n7. Never invent content: new names, prices, reviews or numbers are [fill in] or [confirm].\n8. Do not fix unrelated things silently. Mention at most 2 issues you noticed as optional follow-ups.\n\n## Common requests\n| Request | React Native and Expo | Web (HTML, React, Next.js, Vue) | Flutter / SwiftUI / Compose |\n|---|---|---|---|\n| Bigger buttons | Shared button style: minHeight 48, more padding | Button min-height 48px and padding tokens | minimumSize in the button theme / .controlSize(.large) / Modifier.heightIn(min = 48.dp) |\n| Dark mode | Light and dark theme objects chosen with useColorScheme; userInterfaceStyle \"automatic\" in app.json | Dark token values in @media (prefers-color-scheme: dark) | darkTheme plus themeMode / asset colors with a Dark appearance / darkColorScheme with isSystemInDarkTheme() |\n| New screen | Screen file plus a Stack.Screen or Tab.Screen entry | Route plus page or view file, and a nav link | GoRoute / navigationDestination / composable() in the NavHost |\n| Keep data between sessions | AsyncStorage: load on start, save on change only after the first load finishes | localStorage in try/catch | shared_preferences / @AppStorage or SwiftData / DataStore |\n| Pull to refresh | RefreshControl on the FlatList | A Refresh button | RefreshIndicator / .refreshable / PullToRefreshBox |\n| Keyboard covers inputs | KeyboardAvoidingView (padding on iOS) around a ScrollView | scrollIntoView on focus; no fixed bar over inputs | SingleChildScrollView / fields in a Form or ScrollView / Modifier.imePadding() |\n| Loading spinner | ActivityIndicator with accessibilityLabel | CSS spinner in role=\"status\" with visually hidden text | CircularProgressIndicator / ProgressView / CircularProgressIndicator |\n| Offline message | Banner driven by @react-native-community/netinfo | Banner on online and offline events, in aria-live | connectivity_plus / NWPathMonitor / ConnectivityManager callback |\n\n## Output format\nReturn each changed file complete, in its own code block with the right language tag, headed by its filename in bold. New files come in full, and any install command goes in its own bash block before the files. For a very long file where the change sits in one place, return only the replaced block, marked by lines that occur once in the file:\n\n```text\n**[path/filename]**\nReplace from: [the exact first line of the old block]\nTo: [the exact last line of the old block]\nWith:\n[code block: the new lines]\n```\n\nThen 1 to 3 lines: what changed and what to test on iPhone, Android or in the browser (\"Open the Add screen with the keyboard up: the Save button stays visible\"). When the change touches a web page's SEO tags, headings, images or forms, you can re-check the edited page with the page checker as described in Check the page above and report any new issue in one line.\n\n## Quality checks\n- The edit does exactly what was asked and nothing more.\n- Framework, version, naming and style match the user's code.\n- Imports, navigation entries and file names line up; nothing points to a missing file or package.\n- Returned code is complete and valid, with no \"...\" gaps or \"rest unchanged\" comments inside a full file.\n- \"Replace from\" and \"To\" lines match the user's code character for character.\n- Labels, contrast, tap targets and loading and error states still pass.\n- New content uses marked placeholders, never invented facts.\n\n## Next step\nOffer: \"Want another change? Describe it, or paste the next file to edit.\"\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}