{"id":90162,"plugin_id":"plugin_asdk_app_6ae249752da48191b2bfcef9fa277fea","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-11-11T00:09:32.434Z","digest":"ec9b45fa7703a726e0ea8bced291e3279b50f06f54b7ff1f051021033ccfb504","against":null,"payload":{"description":"Creates an app brand kit: tagline options, a color palette with hex codes and contrast checks, light and dark themes, typography for iOS, Android and the web, app icon direction and the voice for interface copy. 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":"app-brand-kit","skill_md_contents":"---\nname: app-brand-kit\ndescription: \"Creates an app brand kit: tagline options, a color palette with hex codes and contrast checks, light and dark themes, typography for iOS, Android and the web, app icon direction and the voice for interface copy. 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# App Brand Kit\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\nCreate a brand kit an app can be built from straight away: taglines, a palette with contrast ratios, light and dark themes, typography per platform, icon direction and interface voice, ending with theme code ready to paste.\n\n## Before you start\n- Read: what the app does, users, platforms, personality, competitors, and what to keep (name, logo, colors).\n- Ask at most 2 short questions, only if missing: \"Any colors you love or must avoid?\" and \"Playful or serious?\" Otherwise assume, state the assumptions in one line at the top and proceed.\n- Reply in the user's language; write taglines and copy in the app's language. No name yet? Point to app-names or use [App name].\n\n## Taglines\nWrite 3 to 5, each from a different angle (outcome, audience, difference, feeling, action), with its character count and placement (App Store subtitle 30, Google Play short description 80, onboarding).\n- Weak: \"The smart way to manage money.\" (any app could say it)\n- Strong: \"Split bills, skip the awkward\" (29 characters, one clear outcome)\n\nNo \"best\", \"#1\", \"free\" or prices: store metadata rules ban them.\n\n## Color palette\nName colors by role, not hue, so dark mode swaps values without code changes: primary (main buttons, active tab), accent (links, badges, selected states), background, surface (cards, sheets, inputs, bars), text, muted text (helper text, placeholders), success, warning, error.\n- Give each role a light and a dark hex, then list every pair shown as text with its ratio: text and muted text on background and surface, button text on primary and accent, status colors as text. Each needs 4.5:1; icons, borders and focus rings 3:1.\n- Fix failing pairs: white on #14B8A6 is 2.49:1 (fails); darkened to #0F766E it is 5.47:1 (passes). Ask the user to confirm in a contrast checker.\n- Never carry meaning by color alone: add an icon and words, and never rely on red versus green.\n\n## Light and dark themes\nDesign dark mode, never invert it:\n- Near-black gray background (#121417), lighter surfaces (#1C1F24) for elevation, off-white text (#E6E8EB) to cut glare.\n- Lighter brand tints: #0F766E on #121417 is only 3.37:1, so dark mode uses #5EEAD4 (12.47:1) with dark button text.\n- Re-check every pair, give illustrations dark versions, follow the system setting and offer System, Light or Dark. In Expo, set \"userInterfaceStyle\": \"automatic\" in app.json.\n\n## Typography\n- iOS: the system font (San Francisco) with its text styles, so Dynamic Type works. Android: the system font (Roboto on most devices) in sp. React Native: leave fontFamily unset to get both.\n- Web or a stronger brand: one Google Fonts pairing, brand font for headings only, such as Manrope with Inter or Nunito with Nunito Sans.\n\n| Style | iOS pt | Android sp | Web px |\n|---|---|---|---|\n| Title | 28 bold | 22 | 24 |\n| Headline | 17 semibold | 16 medium | 18 |\n| Body | 17 | 16 | 16 |\n| Caption | 12 | 12 | 12 |\n\nLine height about 1.2 for titles, 1.4 to 1.5 for body; layouts must survive 200% text.\n\n## App icon direction\nGive 2 to 3 concepts: one simple shape, its metaphor, 2 palette colors, a background. No text, photos or fine detail; full-bleed square art (the system rounds the corners); recognizable at about 40 px and in grayscale. Plan iOS dark and tinted variants and an Android monochrome themed icon, and tell the user to confirm current specs in App Store Connect and the Play Console. Never echo another app's icon; point to app-visuals for production.\n\n## Voice for interface copy\n3 words plus one to avoid (\"Calm, clear, encouraging (never preachy)\"), one casing everywhere and one word per concept.\n\n| Do | Don't |\n|---|---|\n| Name the action: \"Save workout\" | \"Submit\", \"OK\" |\n| Explain and guide: \"No connection. Changes will sync later.\" | \"Error 503\" |\n| Invite a first step: \"No habits yet. Add your first one.\" | \"No data\" |\n| Celebrate briefly: \"Done. 3 days in a row.\" | \"AMAZING!!! Superstar!!!\" |\n\n## Output format\n```text\nAssumptions: [one line]\n\nTaglines: 3 to 5 with angle, count, placement\nPalette: | Role | Light hex | Dark hex | Use |\nContrast: | Pair | Light | Dark | Pass |\nTypography: fonts per platform, type scale\nApp icon: Concepts A, B (and C)\nVoice: 3 words (never [word]), do and don't table\n```\nEnd the answer body with the palette and type scale as code, each file in its own block:\n\n**theme.css**\n```css\n:root {\n  --primary: #0F766E; --on-primary: #FFFFFF; /* 5.47:1 */\n  --accent: #6D28D9; --bg: #F8FAFC; --surface: #FFFFFF;\n  --text: #0F172A; /* on bg 17.06:1 */\n  --muted: #475569; /* on bg 7.24:1 */\n  --success: #15803D; --warning: #B45309; --error: #B91C1C;\n  --size-title: 1.5rem; --size-body: 1rem; --size-caption: 0.75rem;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --primary: #5EEAD4; --on-primary: #121417; /* 12.47:1 */\n    --accent: #C4B5FD; --bg: #121417; --surface: #1C1F24;\n    --text: #E6E8EB; /* on bg 15.03:1 */\n    --muted: #A0A7B1; /* on surface 6.81:1 */\n    --success: #4ADE80; --warning: #FBBF24; --error: #F87171;\n  }\n}\n```\n\n**theme.js**\n```js\nimport { Platform, useColorScheme } from 'react-native';\n\nconst light = { primary: '#0F766E', onPrimary: '#FFFFFF', accent: '#6D28D9', bg: '#F8FAFC', surface: '#FFFFFF', text: '#0F172A', muted: '#475569', success: '#15803D', warning: '#B45309', error: '#B91C1C' };\nconst dark = { primary: '#5EEAD4', onPrimary: '#121417', accent: '#C4B5FD', bg: '#121417', surface: '#1C1F24', text: '#E6E8EB', muted: '#A0A7B1', success: '#4ADE80', warning: '#FBBF24', error: '#F87171' };\nconst ios = Platform.OS === 'ios';\nexport const type = {\n  title: { fontSize: ios ? 28 : 22, fontWeight: '700' },\n  body: { fontSize: ios ? 17 : 16, lineHeight: 24 },\n  caption: { fontSize: 12, lineHeight: 16 },\n};\nexport const useTheme = () => ({ colors: useColorScheme() === 'dark' ? dark : light, type });\n```\n\n## Quality checks\n- Every text color pair has its ratio and meets 4.5:1 in both themes; failing pairs are fixed.\n- Dark mode is designed (own background, surfaces, lighter tints), not inverted.\n- The icon idea is one shape, no text or photos, and works at small sizes.\n- Taglines are distinct, correctly counted and free of claims and prices.\n- Type sizes are set per platform and scale with the user's text setting.\n- The code matches the tables exactly.\n\n## Next step\nOffer app-visuals to turn the icon direction into assets, or app-names if the app still needs a name.\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":{}}