Update to App Builder

{
  "description": "Plans app visuals: app icon concepts, illustration style for onboarding and empty states, AI image prompts, interface icon sets, splash screens and the asset sizes to prepare for iOS, Android and the web.",
  "included_files": [],
  "name": "app-visuals",
  "skill_md_contents": "---\nname: app-visuals\ndescription: \"Plans app visuals: app icon concepts, illustration style for onboarding and empty states, AI image prompts, interface icon sets, splash screens and the asset sizes to prepare for iOS, Android and the web.\"\n---\n\n# App Visuals\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\nPlan every visual an app needs: icon concepts with production notes, an illustration style for onboarding and empty states, interface icons that fit each platform, a splash screen, an AI prompt per visual and an asset checklist with sizes. The result keeps an iPhone, Android or web app consistent, accessible and ready for store submission.\n\n## Before you start\n- Read: what the app does, audience, platforms, brand colors and style (use the app-brand-kit output if there is one), and any logo to keep.\n- Ask at most 2 questions, only if missing: \"Is there a logo or icon to keep?\" and \"iPhone, Android, web, or all three?\" Otherwise assume all three, state it in one line and proceed.\n- Reply in the user's language; AI prompts can stay in English, which most image tools handle best.\n\n## App icon\nGive 3 concept directions, each with a shape, a metaphor and colors:\n- One bold shape, still recognizable at about 40 px and in grayscale. No text, no photos, no screenshots, no thin lines.\n- 2 to 3 brand colors, strong contrast between shape and background.\n- Full-bleed square art: the system applies the rounded mask, so do not round corners or add a shadow or border.\n- Weak: a phone showing a calendar, with the app name below. Strong: a white leaf whose vein forms a check mark, on solid teal (a habit app).\n- Never copy another app's icon or use platform logos or device images.\n\nProduction notes (tell the user to confirm current specs in App Store Connect and the Google Play Console, since they change):\n- App Store: a 1024 by 1024 px PNG master, square, no transparency; Xcode makes the smaller sizes. Recent iOS versions also show dark, clear and tinted versions, so keep shape and background as separate layers.\n- Android adaptive icon: foreground and background layers of 108 by 108 dp (432 by 432 px at the highest density), with the main shape inside the central 66 dp safe zone, because launchers crop to different shapes. Add a monochrome layer for themed icons.\n- Google Play listing: 512 by 512 px, 32-bit PNG, up to 1 MB; Play adds the rounded corners and shadow.\n\n## Splash screen\nMatch the icon: its shape centered on its background color, nothing else (no tagline, no loading text), a dark version, and shown only while the app loads. Android 12 and later always draw a system splash from the icon (288 by 288 dp, shape inside a 192 dp circle) and a background color, so design for that.\n\n## Illustration style\nWrite one short spec for onboarding and empty states: style (flat vector, line art or soft 3D), line weight, 3 to 4 brand colors, people (diverse, simple, no stereotypes), white space.\n- Show the outcome the user wants, not the interface.\n- Empty states: a small illustration, one line on why it is empty and one button (\"No trips yet. Plan your first one.\").\n- Transparent backgrounds or dark versions; export SVG or vector drawables, or PNG at 2x and 3x.\n- Keep motion subtle and respect Reduce Motion.\n\n## Interface icons\n- iOS: SF Symbols, which match the system font and scale with Dynamic Type (licensed for Apple platforms only).\n- Android and the web: Material Symbols (open source), one style (outlined or rounded), filled for the selected tab.\n- Cross-platform: map each icon (house to home, magnifyingglass to search, bell to notifications, gearshape to settings) or use one open set everywhere.\n- Standard metaphors, visible tab labels, an accessibilityLabel on icon-only buttons, tap targets of 44 by 44 points (iOS) and 48 by 48 dp (Android), and 3:1 contrast against the background.\n\n## AI image prompts\nOne prompt per visual: subject, style, colors, composition, avoid. Repeat the same style words in every prompt.\n```text\nSubject: a white leaf whose vein forms a check mark\nStyle: flat vector app icon, bold geometric shapes, no outlines\nColors: #FFFFFF shape on solid #0F766E\nComposition: centered, square 1:1, shape filling about 60% of the canvas\nAvoid: text, letters, photos, gradients, shadows, device mockups, logos\n```\nAI tools rarely draw clean geometry: treat results as concepts and redraw the final icon as a vector. Never name copyrighted characters, brands, celebrities or living artists, and check the tool's terms allow commercial use.\n\n## Accessibility\n- Meaningful images get a short label saying what they show or do: accessibilityLabel (iOS), contentDescription (Android), accessible plus accessibilityLabel (React Native), alt (web).\n- Decorative images are hidden from screen readers: alt=\"\" on the web; in React Native, accessibilityElementsHidden (iOS) and importantForAccessibility=\"no-hide-descendants\" (Android).\n- Keep text out of images where you can. Text over an image keeps 4.5:1 with a scrim: a 60% black overlay keeps white text at 5.74:1 or more, even over pure white.\n\n## Output format\n```text\nAssumptions: [one line]\n\n1. Icon concepts A, B, C: shape / metaphor / colors / why it fits\n   Production notes (confirm current specs in each console)\n2. Visual style guide: illustration spec, empty states, splash screen,\n   | Action | SF Symbol | Material Symbol | Label |\n3. Prompts: one block per visual\n4. Asset checklist\n[ ] App Store icon 1024x1024 PNG, no transparency, plus dark and tinted\n[ ] Android adaptive layers 108 dp (432x432 px), safe zone, monochrome\n[ ] Google Play icon 512x512 PNG; feature graphic 1024x500 JPG or 24-bit PNG\n[ ] Web: manifest icons 192 and 512 px, a maskable 512 (shape in the central 80%), apple-touch-icon 180 px, favicon\n[ ] Splash: icon shape plus light and dark background colors\n[ ] Illustrations: SVG or PNG 2x and 3x, light and dark\n```\n\n## Quality checks\n- Each icon concept is one shape, no text or photos, and reads at small sizes and in grayscale.\n- The 1024 px master, Android layers with the safe zone and the 512 px Play icon are covered, with the reminder to confirm specs in each console.\n- Every prompt has subject, style, colors, composition and avoid, with shared style words.\n- No copyrighted characters, brands, celebrities or living artists.\n- Meaningful images are labeled, decorative ones hidden; text on images keeps 4.5:1, icons 3:1.\n- Interface icons fit each platform and have labels; the splash matches the icon.\n\n## Next step\nOffer app-store-optimization to write the store listing these images support, or app-brand-kit if the palette is not set.\n"
}