brand-kit — Claude Code skill: build a brand-kit.json
Writes a brand-kit.json holding your product's colors, type and voice so other skills can read them. Useful when the site's source code isn't at hand.
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a claude-codeWhat brand-kit does
The skill walks six discovery paths and stops at the first one that returns enough. Point it at a repo and it reads tailwind.config.ts and CSS custom properties. Give it a public URL and it pulls the page with WebFetch. Hand it a logo or a screenshot and it derives a palette from the image. Run it bare and it interviews you.
The kit lands in .agents/brand-kit.json when that folder exists, otherwise .claude/brand-kit.json, otherwise the current working directory. The skill prints the path so you can move the file. Five fields are mandatory before it ships anything: colors.background, colors.foreground, colors.primary, type.family, voice.register.
Reading a palette out of an image calls for ffmpeg, ImageMagick or Node. With none of the three installed, the skill falls back to inspecting the picture by eye. Some tools only exist in Cogny Cloud workspaces, so on Solo the uploaded-assets path is skipped.
Once written, the file is picked up by /tiktok-launch-video, /reddit-launch-video, /linkedin-launch-video, /landing-page-review and /ad-copy-writer.
What it helps with
- collect a project's palette and font into one file
- recover brand colors from a logo when there is no source access
- spell out brand voice and banned words
- feed one visual style to video and landing-page skills
- pin brand colors down as hex codes
Example prompts for the agent
- /brand-kit https://example.com
- /brand-kit ~/git/our-site
- /brand-kit ~/Desktop/logo.png
How to install brand-kit
1Skills CLI (Vercel)
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a claude-code2Manually: put the files in place
~/.claude/skills/brand-kit/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/brand-kit/
1Skills CLI (Vercel)
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a codex2Manually: put the files in place
.agents/skills/brand-kit/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a cursor2Manually: put the files in place
.cursor/skills/brand-kit/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install cognyai/claude-code-marketing-skills brand-kit2Manually: put the files in place
.github/skills/brand-kit/SKILL.md1Skills CLI (Vercel)
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a gemini-cli2Platform CLI
gemini skills install https://github.com/cognyai/claude-code-marketing-skills --path skills/brand-kitManually: put the files in place
.devin/skills/brand-kit/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about brand-kit
How do I install brand-kit in Claude Code?
Run npx skills add cognyai/claude-code-marketing-skills --skill brand-kit -a claude-code. The skill ends up at ~/.claude/skills/brand-kit/SKILL.md.
What does brand-kit do?
It produces a brand-kit.json describing colors, typography and voice. Other marketing skills in the same collection read that file.
What is needed to extract a palette from an image?
ffmpeg, ImageMagick or Node. Without any of them the skill reads the image by eye instead.
