Update to App Builder

{
  "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.",
  "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.\"\n---\n\n# App Brand Kit\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\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"
}