Update to Coder: Websites, Apps & Agents

{
  "description": "Creates a website brand kit: business name ideas, tagline options, a color palette with hex codes, a font pairing, tone of voice and logo direction, for new businesses and rebrands.",
  "included_files": [],
  "name": "brand-kit",
  "skill_md_contents": "---\nname: brand-kit\ndescription: \"Creates a website brand kit: business name ideas, tagline options, a color palette with hex codes, a font pairing, tone of voice and logo direction, for new businesses and rebrands.\"\n---\n\n# 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 compact brand kit a website can be built from straight away: brand essence, name ideas when needed, taglines, a color palette with hex codes and contrast checks, a Google Fonts pairing with sizes, voice rules and logo direction. It serves new businesses, side projects and rebrands, and every part can be handed to a designer, a website builder or an AI image tool.\n\n## Before you start\n- Read what the user gave: what the business does, audience, market, price position (budget, mid-range, premium), personality, competitors, and assets to keep (name, logo, colors).\n- Ask at most 2 short questions, only if missing: \"Do you already have a name?\" and \"Any colors or styles you love or want to avoid?\" Otherwise assume, state the assumptions in one line at the top and proceed.\n- For a rebrand, keep what customers already recognize (usually the name or main color) and modernize around it.\n- Reply in the user's language; write taglines in the website's language.\n\n## Brand essence\n- Who: \"For [audience] who [need or situation].\"\n- Promise: one sentence naming the outcome the customer gets.\n- Personality: exactly 3 words, plus one it must never sound like: \"Warm, expert, calm (never cute).\"\n\n## Name ideas (only when needed)\nGive 10 names in three groups:\n- Descriptive (says what it does): \"Harbor Street Physio\".\n- Invented (coined, 2 to 3 syllables, easy to own): blend roots or sounds that hint at the promise.\n- Metaphor (borrowed meaning): \"Keel\" for steady financial advice.\nKeep names easy to say and spell, not tied to one product or street if the business may grow, free of famous brands, and harmless in the audience's other languages. Always add: \"I cannot check trademarks or domains. Search your national trademark register and a domain registrar before you commit.\"\n\n## Taglines\nWrite 5 options of 7 words or fewer, each from a different angle: outcome, audience, difference, feeling, promise.\n- Weak: \"Quality you can trust.\" (any business could say it)\n- Strong: \"Spotless homes, same cleaner every time.\" (specific, one clear difference)\nNever use \"best\", \"number 1\" or results the user cannot prove.\n\n## Color palette\n| Role | Use it for |\n|---|---|\n| Primary | Logo, header, headings, key brand areas |\n| Secondary | Section backgrounds, cards, icons |\n| Accent | Buttons, links and highlights only (about 10% of the page) |\n| Dark | Body text, footer background |\n| Light | Page background, light sections |\n\n- Give each role a hex code, then list every text and background pair the site will use with its contrast ratio. Aim for WCAG AA: 4.5:1 for body and button text; 3:1 for large text (24px, or about 19px bold), borders and focus rings.\n- Fix failing pairs and say so: white on #EA580C is 3.56:1 (fails), darkened to #C2410C it is 5.18:1 (passes). Tell the user to confirm ratios in a contrast checker before launch.\n- Never carry meaning by color alone (underline links, write errors in words), and never rely on red versus green.\n\n## Fonts\nOne heading and one body font from Google Fonts, 2 to 3 weights each.\n\n| Personality | Heading | Body |\n|---|---|---|\n| Trustworthy, professional | Merriweather | Source Sans 3 |\n| Modern, tech | Space Grotesk | Inter |\n| Warm, friendly | Fraunces | Nunito Sans |\n| Elegant, premium | Playfair Display | Lato |\n| Bold, energetic | Montserrat | Open Sans |\n\nSizes: H1 40 to 56px desktop, 30 to 36px mobile; H2 28 to 36px desktop, 22 to 28px mobile; body 16 to 18px with line height 1.5 to 1.7. Load only the weights used; self-hosting the files avoids a third-party request, which matters for privacy in the EU.\n\n## Voice\nA do and don't table of 3 to 4 rows with example sentences:\n\n| Do | Don't |\n|---|---|\n| Talk to one reader: \"You'll hear back within one business day.\" | Talk about yourself: \"Our company is committed to excellence.\" |\n| Be specific: \"Same cleaner every visit.\" | Be vague: \"High-quality solutions.\" |\n\n## Logo direction\nDescribe 2 to 3 concepts in words: type (wordmark, monogram, symbol plus name, badge), the mark or shape idea, style and colors. Each must work in one color and at 32px. For AI tools add a prompt such as \"flat vector logo mark, [shape idea], [style], [2 brand colors], plain white background, no text\", then set the name in the heading font, because image tools often garble lettering. Never echo a competitor's or famous logo.\n\n## Output format\n```text\nAssumptions: [one line]\n\nBrand essence: Who / Promise / Personality (3 words, never [word])\nName ideas (only if needed): Descriptive / Invented / Metaphor, then the trademark and domain reminder\nTaglines: 1 to 5, each with its angle in brackets\nColor palette: | Role | Hex | Use it for | Text on it | Contrast |\nFonts: heading and body with weights; H1, H2 and body sizes\nVoice: 3 words, then the do and don't table\nLogo direction: Concept A, B (and C): type, mark, style, colors, AI prompt\n```\nEnd the answer body with the palette and fonts as CSS custom properties:\n\n**brand.css**\n```css\n:root {\n  --color-primary: #1F4E5F;   /* white text 9.08:1 */\n  --color-secondary: #E3EFEA; /* dark text 14.05:1 */\n  --color-accent: #C2410C;    /* white text 5.18:1 */\n  --color-dark: #1B1F23;      /* on light 15.64:1 */\n  --color-light: #FAF8F5;\n  --font-heading: \"Fraunces\", Georgia, serif;\n  --font-body: \"Nunito Sans\", system-ui, sans-serif;\n}\n```\n\n## Quality checks\n- Every text and background pair is listed with a ratio; body and button text reach 4.5:1, and failing pairs are fixed, not just flagged.\n- Taglines are 7 words or fewer, each from a different angle, with no unprovable claims.\n- The accent is reserved for buttons, links and highlights.\n- Both fonts exist on Google Fonts, with H1, H2 and body sizes given.\n- Name ideas (if any) are 10 in three groups, avoid famous brands and end with the trademark and domain reminder.\n- Logo concepts work in one color and at 32px and copy no existing logo.\n- The kit fits the audience and price position, with assumptions in one line.\n\n## Next step\nOffer domain-names to find a domain for the chosen name, then website-images to plan visuals in this palette.\n"
}