{"id":"e6ae773a-2195-4d18-a28d-0526ecb7cd01","shortId":"eAMSzV","kind":"skill","title":"brand-kit","tagline":"Build a portable brand-kit.json for the user's product — colors, typography, voice — that other skills (video, ad creative, landing page) can consume. Multiple discovery paths so it works whether the user has access to their site's source code or only a public URL or just a logo ","description":"# Brand Kit\n\nBuild a `brand-kit.json` describing the user's product in a way other skills can consume — colors, type, voice, do/don't language, optional logo. Other Cogny skills (`/tiktok-launch-video`, `/reddit-launch-video`, `/linkedin-launch-video`, `/landing-page-review`, `/ad-copy-writer`) read this file when present.\n\nThe skill is built around the reality that **users don't always have access to their site's source code**. There are six paths to a kit, in priority order. Stop at the first one that yields enough.\n\n## Usage\n\n`/brand-kit https://example.com` — extract from a live site\n`/brand-kit ~/git/our-site` — extract from a local repo (Tailwind / CSS vars)\n`/brand-kit ~/Desktop/logo.png` — extract palette from a logo or screenshot\n`/brand-kit ~/Desktop/homepage.png logo.png` — combine site screenshot + logo\n`/brand-kit` — interview the user\n\n## Output\n\nA `brand-kit.json` written to (in priority order, whichever path makes sense for the user's setup):\n\n1. `.agents/brand-kit.json` (if `.agents/` exists)\n2. `.claude/brand-kit.json` (if `.claude/` exists)\n3. `./brand-kit.json` (otherwise — current working directory)\n\nAlways print the path you wrote to so the user can move it.\n\n## Schema\n\n```json\n{\n  \"name\": \"cogny\",\n  \"site\": \"https://cogny.com\",\n  \"logo\": {\n    \"path\": \"./brand/logo-square.png\",\n    \"use_in_video\": false\n  },\n  \"colors\": {\n    \"background\": \"#1f1d1d\",\n    \"foreground\": \"#ede8e3\",\n    \"primary\":    \"#b09acd\",\n    \"accent\":     \"#c9badf\",\n    \"muted\":      \"#9a9494\",\n    \"card\":       \"#282525\",\n    \"fuchsia\":    \"#d4848a\",\n    \"success\":    \"#7ec8a4\",\n    \"amber\":      \"#d4a857\"\n  },\n  \"type\": {\n    \"family\":   \"'JetBrains Mono', 'Fira Code', ui-monospace, monospace\",\n    \"weight_display\": 700,\n    \"weight_body\":    500,\n    \"letter_spacing_display\": \"-0.02em\"\n  },\n  \"voice\": {\n    \"register\":   \"technical, direct, anti-jargon, CLI-aesthetic\",\n    \"person\":     \"first-person plural (we / your)\",\n    \"do\":         [\"concrete numbers\", \"name the tradeoff\", \"name the tool\"],\n    \"dont\":       [\"leverage\", \"unlock\", \"revolutionary\", \"next-gen\"]\n  },\n  \"source\": \"repo: ~/git/cogny/tailwind.config.ts + src/index.css\",\n  \"captured_at\": \"2026-04-25\"\n}\n```\n\nMinimum viable kit: `colors.background`, `colors.foreground`, `colors.primary`, `type.family`, `voice.register`. Don't ship without all five.\n\n---\n\n## Path 0 — Cogny MCP context tree (cheapest, run first if connected)\n\n**Use when**: the `cogny` MCP server is in `.mcp.json`. The user may have already documented their brand — voice, palette, tone — in their context tree, in which case scraping is redundant.\n\n```\nmcp__cogny__get_context_tree_overview              # see what's documented\nmcp__cogny__search_context query=\"brand\"           # palette, voice, tone, design tokens\nmcp__cogny__search_context query=\"positioning\"     # voice + register often live here\nmcp__cogny__read_context_node node_id=\"…\"\n```\n\nIf the tree returns brand / palette / voice nodes, hydrate the kit from those values. Cross-check against Path 1 or 3 only if something looks stale or contradictory.\n\nIf the cogny MCP isn't connected, or the tree has nothing brand-related, fall through to Path 1.\n\n## Path 1 — Repo with Tailwind / CSS variables (best signal)\n\n**Use when**: the user has access to the site's source.\n\nLook for, in order:\n\n```bash\n# Tailwind config — custom color namespaces\nfd -t f 'tailwind\\.config\\.(ts|js|mjs|cjs)$' <repo>\n# CSS custom properties (most modern stacks)\nfd -t f '(globals|index|app|theme|variables)\\.css$' <repo>\n# Design tokens\nfd -t f '(design-tokens|tokens|theme)\\.json$' <repo>\n```\n\nWhen you find a Tailwind config, look for a custom color namespace (commonly the brand name, e.g. `cogny: {...}`):\n\n```ts\n// tailwind.config.ts (cogny example)\ncolors: {\n  cogny: { dark: \"#1f1d1d\", purple: \"#b09acd\", secondary: \"#7E69AB\", light: \"#c9badf\" }\n}\n```\n\nWhen you find a CSS file, grep for the canonical custom-property names:\n\n```bash\ngrep -E '^\\s*--(background|foreground|primary|accent|muted|card)' <css-file>\n```\n\nMap the values into the kit schema. If you find both `--primary` (HSL or hex) and a Tailwind namespace, prefer the Tailwind namespace — it's usually the explicit brand intent rather than a shadcn default.\n\nType detection in the same files:\n\n```bash\ngrep -E \"(font-family|fontFamily|--font-)\" <repo>/src/**/*.{css,ts,tsx,js} 2>/dev/null | head\n```\n\n---\n\n## Path 2 — Live site URL (works without source access)\n\n**Use when**: the user only has a public URL.\n\nSteps:\n\n1. **Fetch the homepage** with `WebFetch <url>` and extract any inline `<style>` blocks and the head's stylesheet links.\n2. **Fetch the main stylesheet** (the largest CSS link in the head, typically). `curl -sL <css-url> | head -c 200000` is enough — look for CSS custom properties (`--primary`, `--background`, etc.) and `@font-face` rules.\n3. **Look for a manifest** at `/site.webmanifest`, `/manifest.json`, or `/manifest.webmanifest`. Manifests contain `theme_color`, `background_color`, and an icon list — gold for brand kits.\n4. **Look for a favicon and a high-res logo**:\n   ```bash\n   curl -sL \"<site>/favicon.ico\" -o /tmp/favicon.ico\n   curl -sL \"<site>/apple-touch-icon.png\" -o /tmp/touch.png\n   # Or extract from <link rel=\"icon\"> in the homepage HTML\n   ```\n   The largest PNG icon on the site (Apple touch icon, manifest icon) is the brand mark.\n5. **Detect typography**: search the inline CSS for `font-family` declarations on `body`, `html`, or `h1`. If you see Google Fonts links in `<head>`, the family name is right there in the URL.\n\nIf the site ships a static frontend (Next.js, etc.), the bundled CSS often contains the same custom properties as the dev source — so you might still recover the full brand palette without repo access.\n\nIf you only get partial info (e.g. you got `theme_color` from the manifest but no full palette), proceed to Path 3 to fill in gaps from the logo / a screenshot.\n\n---\n\n## Path 3 — Logo or screenshot palette extraction (the fallback that always works)\n\n**Use when**: the user uploads a logo image, a screenshot of their homepage, or a brand asset PNG/JPG.\n\nThe user usually has *some* image — a logo on Desktop, a slack avatar, a website screenshot. Extract a palette directly with FFmpeg:\n\n```bash\n# Generate a small palette image (max 6 distinct colors) from any image.\nffmpeg -y -i <input.png> \\\n  -vf \"palettegen=max_colors=6:reserve_transparent=0:stats_mode=single\" \\\n  -frames:v 1 -update 1 /tmp/_palette.png\n\n# Read those palette colors back as hex. The PPM header is\n#   P6\\n<W> <H>\\n255\\n  → 13 bytes for the standard 16x16 palette.\nffmpeg -y -i /tmp/_palette.png -c:v ppm -f image2 -update 1 - 2>/dev/null \\\n  | tail -c +14 \\\n  | xxd -c 3 -p \\\n  | awk '!seen[$0]++' \\\n  | head -8 \\\n  | awk '{print \"#\" toupper($1)}'\n```\n\nOutput for the cogny logo (gradient C on dark warm bg):\n\n```\n#1D1B1B   ← background\n#5F4953   ← deep plum\n#BB93B9   ← lavender (primary brand)\n#CA8B9D   ← coral-pink\n#D2858C   ← coral (accent)\n```\n\n**Mapping rules** — the palette is sorted by frequency, but the *role* assignment is yours to make:\n\n- Darkest color → `colors.background` (if it covers >40% of pixels)\n- Brightest non-white → `colors.foreground` (if there's no off-white, default `#fafafa`)\n- Most saturated chroma → `colors.primary`\n- Second most saturated → `colors.accent`\n\nEyeball the original image once and confirm — algorithmic role assignment gets it right ~70% of the time.\n\n**For typography from a screenshot**: image-based font detection is unreliable. Either:\n\n- Ask the user (\"the headline font on this image is…?\"), **or**\n- Use a free tool like WhatTheFont or Fontspring Matcherator — show the user the URL, don't try to do it programmatically.\n\n**Optional: semantic palette via node-vibrant** (one npm install, gives vibrant/muted/dark-vibrant/light-vibrant categories — more useful for primary/accent role mapping):\n\n```bash\nnpm install -g node-vibrant\nnode -e \"\n  const Vibrant = require('node-vibrant');\n  Vibrant.from(process.argv[1]).getPalette().then(p => {\n    const out = {};\n    for (const k of ['Vibrant','Muted','DarkVibrant','LightVibrant','DarkMuted','LightMuted']) {\n      if (p[k]) out[k] = p[k].hex;\n    }\n    console.log(JSON.stringify(out, null, 2));\n  });\n\" <input.png>\n```\n\nUse whichever is available. FFmpeg ships with the video skills already, so that's the default.\n\n---\n\n## Path 4 — Color picker / manual entry (always available)\n\n**Use when**: nothing else worked, or the user wants to override the kit explicitly.\n\nAsk, in this order, and accept partial answers:\n\n1. Background hex? (the page background users see most)\n2. Foreground hex? (body text color)\n3. Primary brand hex? (the color a button or link uses)\n4. Accent hex? (optional — if there's a second brand color)\n5. Font family? (\"a sans like Inter\", \"JetBrains Mono\", etc. — best-effort, system fallbacks are fine)\n\nThree colors and a font is enough to ship.\n\n---\n\n## Path 5 — Voice extraction (always run, regardless of color path)\n\nVoice is the part of a brand kit that copy-paste tooling forgets. It changes which beats a video would write or which headlines an ad-copy skill would produce.\n\n**Source for voice**: the homepage hero + 1–2 deeper pages (about, pricing, blog).\n\nSteps:\n\n1. Fetch the homepage hero text (h1, h2, the first paragraph after the hero CTA).\n2. Fetch one deep page (`/about` or `/pricing` typically).\n3. Read the copy and produce three fields:\n\n```json\n\"voice\": {\n  \"register\": \"<one-line description>\",\n  \"do\":   [\"pattern 1\", \"pattern 2\", \"pattern 3\"],\n  \"dont\": [\"banned word 1\", \"banned word 2\"]\n}\n```\n\nExamples (these are real, derived from each company's homepage):\n\n| Brand | register | do | dont |\n|-------|----------|----|------|\n| cogny | \"technical, direct, anti-jargon, CLI-aesthetic\" | concrete numbers, name the tradeoff, name the tool | leverage, unlock, revolutionary, next-gen |\n| Linear | \"operator, opinionated, fast\" | second-person, terse, build-mode language | enterprise, synergy, robust |\n| Mailchimp | \"warm, conversational, plain-English\" | first-person, friendly contractions, clear CTAs | utilize, paradigm, leverage |\n\nIf you can't infer voice from the page (e.g. very thin homepage), ask the user for one sentence describing how they want to sound. Don't make it up.\n\n---\n\n## Steps (the actual flow)\n\n1. **Detect what input the user gave you**:\n   - URL → Path 2 → fall through to 3 / 5 if needed\n   - Repo path → Path 1 → fall through to 5\n   - Image path → Path 3 + ask for site URL or repo for voice (Path 5)\n   - Nothing → Path 4 + ask if they have a logo to extract from\n\n2. **Build the kit incrementally**. Print partial state after each step so the user can intervene:\n   ```\n   ◆ Brand kit (cogny)\n   ✓ colors    bg=#1f1d1d  fg=#ede8e3  primary=#b09acd  accent=#c9badf\n   ✓ type      JetBrains Mono / mono\n   ◇ voice     pending — fetching /about for analysis…\n   ```\n\n3. **Show the user the result** before writing the file. They should approve color role assignments (background vs primary, etc.) — these are the high-leverage calls.\n\n4. **Write `brand-kit.json`** to the most appropriate location (see Output section). If a kit already exists, diff it and ask before overwriting.\n\n5. **Print a one-line install hint** for the consumer skills:\n   ```\n   Saved → .agents/brand-kit.json\n   Used by: /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video,\n            /ad-copy-writer, /landing-page-review\n   ```\n\n## Common mistakes\n\n1. **Treating a single hex color as the brand** — most brands have a primary + an accent + a background-foreground pair. Three colors minimum.\n2. **Shipping without voice** — colors carry brand 30%; voice carries it 70%. Don't skip Path 5.\n3. **Using shadcn defaults as the brand** — if the user's CSS file has the literal shadcn `--primary: 240 5.9% 10%`, that's a placeholder not a brand. Cross-check with the homepage screenshot.\n4. **Over-saturating the kit with logo gradient artifacts** — palette extraction from a gradient logo will return 4–5 transitional colors. Pick the endpoints (primary + accent), drop the in-betweens.\n5. **Letting LinkedIn-blue / Twitter-blue / TikTok-pink slip into the kit** — those are platform UI colors that bleed into screenshots, not brand colors.\n6. **Trusting `theme-color` blindly** — sites sometimes set `theme-color` to match the address bar of mobile Safari, which is decorative and may not match the actual brand primary.\n\n## Related\n\n- `/tiktok-launch-video`, `/reddit-launch-video`, `/linkedin-launch-video` — consume the kit\n- `/ad-copy-writer` — uses voice rules to write platform-appropriate copy\n- `/landing-page-review` — checks consistency between a landing page and the brand kit\n- `/non-commodity-content` — voice extraction overlaps with this skill's interview step","tags":["brand","kit","claude","code","marketing","skills","cognyai","agent-skills","ai-agents","claude-code","claude-skills","cluade-mcp"],"capabilities":["skill","source-cognyai","skill-brand-kit","topic-agent-skills","topic-ai-agents","topic-claude-code","topic-claude-skills","topic-cluade-mcp","topic-cursor","topic-geo","topic-growth-hacking","topic-llm","topic-marketing","topic-mcp","topic-seo"],"categories":["claude-code-marketing-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cognyai/claude-code-marketing-skills/brand-kit","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cognyai/claude-code-marketing-skills","source_repo":"https://github.com/cognyai/claude-code-marketing-skills","install_from":"skills.sh"}},"qualityScore":"0.474","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 48 github stars · SKILL.md body (12,784 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:58:05.211Z","embedding":null,"createdAt":"2026-04-25T12:56:01.937Z","updatedAt":"2026-05-18T18:58:05.211Z","lastSeenAt":"2026-05-18T18:58:05.211Z","tsv":"'-0.02':263 '-04':305 '-25':306 '/ad-copy-writer':84 '/brand-kit':129,136,146,155,162 '/brand-kit.json':194 '/brand/logo-square.png':220 '/desktop/homepage.png':156 '/desktop/logo.png':147 '/dev/null':627 '/git/cogny/tailwind.config.ts':300 '/git/our-site':137 '/landing-page-review':83 '/linkedin-launch-video':82 '/reddit-launch-video':81 '/src':621 '/tiktok-launch-video':80 '0':322 '1':183,420,449,451,648 '1f1d1d':227,540 '2':188,626,630 '2026':304 '282525':237 '3':193,422 '500':259 '700':256 '7e69':544 '7ec8a4':241 '9a9494':235 'ab':545 'accent':232,569 'access':36,103,464,637 'ad':20 'aesthet':274 'agent':186 'agents/brand-kit.json':184 'alreadi':345 'alway':101,199 'amber':242 'anti':270 'anti-jargon':269 'app':500 'around':94 'b09acd':231,542 'background':226,566 'bash':474,562,613 'best':457 'bodi':258 'brand':2,52,348,377,405,443,529,600 'brand-kit':1 'brand-kit.json':7,56,168 'brand-rel':442 'build':4,54 'built':93 'c9badf':233,547 'canon':557 'captur':302 'card':236,571 'case':358 'cheapest':327 'check':417 'cjs':488 'claud':191 'claude/brand-kit.json':189 'cli':273 'cli-aesthet':272 'code':42,109,249 'cogni':78,215,323,335,363,373,384,395,432,532,535,538 'cogny.com':217 'color':13,69,225,478,525,537 'colors.background':310 'colors.foreground':311 'colors.primary':312 'combin':158 'common':527 'concret':283 'config':476,484,520 'connect':331,436 'consum':25,68 'context':325,354,365,375,386,397 'contradictori':429 'creativ':21 'cross':416 'cross-check':415 'css':144,455,489,503,552,622 'current':196 'custom':477,490,524,559 'custom-properti':558 'd4848a':239 'd4a857':243 'dark':539 'default':606 'describ':57 'design':381,504,510 'design-token':509 'detect':608 'direct':268 'directori':198 'discoveri':27 'display':255,262 'do/don':72 'document':346,371 'dont':291 'e':564,615 'e.g':531 'ede8e3':229 'em':264 'enough':127 'exampl':536 'example.com':130 'exist':187,192 'explicit':599 'extract':131,138,148,655 'f':482,497,508 'fall':445 'fals':224 'famili':245,618 'fd':480,495,506 'fetch':649 'file':87,553,612 'find':517,550,581 'fira':248 'first':123,277,329 'first-person':276 'five':320 'font':617,620 'font-famili':616 'fontfamili':619 'foreground':228,567 'fuchsia':238 'gen':297 'get':364 'global':498 'grep':554,563,614 'head':628 'hex':586 'homepag':651 'hsl':584 'hydrat':409 'id':400 'index':499 'inlin':657 'intent':601 'interview':163 'isn':434 'jargon':271 'jetbrain':246 'js':486,625 'json':213,514 'kit':3,53,116,309,411,577 'land':22 'languag':74 'letter':260 'leverag':292 'light':546 'live':134,392,631 'local':141 'logo':51,76,152,161,218 'logo.png':157 'look':426,470,521 'make':176 'map':572 'may':343 'mcp':324,336,362,372,383,394,433 'mcp.json':340 'minimum':307 'mjs':487 'modern':493 'mono':247 'monospac':252,253 'move':210 'multipl':26 'mute':234,570 'name':214,285,288,530,561 'namespac':479,526,590,594 'next':296 'next-gen':295 'node':398,399,408 'noth':441 'number':284 'often':391 'one':124 'option':75 'order':119,173,473 'otherwis':195 'output':166 'overview':367 'page':23 'palett':149,350,378,406 'path':28,113,175,202,219,321,419,448,450,629 'person':275,278 'plural':279 'portabl':6 'posit':388 'prefer':591 'present':89 'primari':230,568,583 'print':200 'prioriti':118,172 'product':12,61 'properti':491,560 'public':46,645 'purpl':541 'queri':376,387 'rather':602 'read':85,396 'realiti':96 'redund':361 'regist':266,390 'relat':444 'repo':142,299,452 'return':404 'revolutionari':294 'run':328 'schema':212,578 'scrape':359 'screenshot':154,160 'search':374,385 'secondari':543 'see':368 'sens':177 'server':337 'setup':182 'shadcn':605 'ship':317 'signal':458 'site':39,106,135,159,216,467,632 'six':112 'skill':18,66,79,91 'skill-brand-kit' 'someth':425 'sourc':41,108,298,469,636 'source-cognyai' 'space':261 'src/index.css':301 'stack':494 'stale':427 'step':647 'stop':120 'success':240 'tailwind':143,454,475,483,519,589,593 'tailwind.config.ts':534 'technic':267 'theme':501,513 'token':382,505,511,512 'tone':351,380 'tool':290 'topic-agent-skills' 'topic-ai-agents' 'topic-claude-code' 'topic-claude-skills' 'topic-cluade-mcp' 'topic-cursor' 'topic-geo' 'topic-growth-hacking' 'topic-llm' 'topic-marketing' 'topic-mcp' 'topic-seo' 'tradeoff':287 'tree':326,355,366,403,439 'ts':485,533,623 'tsx':624 'type':70,244,607 'type.family':313 'typographi':14 'ui':251 'ui-monospac':250 'unlock':293 'url':47,633,646 'usag':128 'use':221,332,459,638 'user':10,34,59,98,165,180,208,342,462,641 'usual':597 'valu':414,574 'var':145 'variabl':456,502 'viabl':308 'video':19,223 'voic':15,71,265,349,379,389,407 'voice.register':314 'way':64 'webfetch':653 'weight':254,257 'whether':32 'whichev':174 'without':318,635 'work':31,197,634 'written':169 'wrote':204 'yield':126","prices":[{"id":"395eebfa-da46-4aa5-a239-76eebbddc9ee","listingId":"e6ae773a-2195-4d18-a28d-0526ecb7cd01","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cognyai","category":"claude-code-marketing-skills","install_from":"skills.sh"},"createdAt":"2026-04-25T12:56:01.937Z"}],"sources":[{"listingId":"e6ae773a-2195-4d18-a28d-0526ecb7cd01","source":"github","sourceId":"cognyai/claude-code-marketing-skills/brand-kit","sourceUrl":"https://github.com/cognyai/claude-code-marketing-skills/tree/main/skills/brand-kit","isPrimary":false,"firstSeenAt":"2026-04-25T12:56:01.937Z","lastSeenAt":"2026-05-18T18:58:05.211Z"}],"details":{"listingId":"e6ae773a-2195-4d18-a28d-0526ecb7cd01","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cognyai","slug":"brand-kit","github":{"repo":"cognyai/claude-code-marketing-skills","stars":48,"topics":["agent-skills","ai-agents","claude-code","claude-skills","cluade-mcp","cursor","geo","growth-hacking","llm","marketing","mcp","seo","vibe","windsurf"],"license":null,"html_url":"https://github.com/cognyai/claude-code-marketing-skills","pushed_at":"2026-05-07T20:57:53Z","description":"Marketing skills for Claude Code — SEO audits and implementation, ad analysis, ad optimization. Free skills need no account. $9/mo for live Search Console, Bing & LinkedIn data.","skill_md_sha":"b62d4107acc8743716711de90226f79f517c2641","skill_md_path":"skills/brand-kit/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cognyai/claude-code-marketing-skills/tree/main/skills/brand-kit"},"layout":"multi","source":"github","category":"claude-code-marketing-skills","frontmatter":{"name":"brand-kit","description":"Build a portable brand-kit.json for the user's product — colors, typography, voice — that other skills (video, ad creative, landing page) can consume. Multiple discovery paths so it works whether the user has access to their site's source code or only a public URL or just a logo image."},"skills_sh_url":"https://skills.sh/cognyai/claude-code-marketing-skills/brand-kit"},"updatedAt":"2026-05-18T18:58:05.211Z"}}