brand — Claude Code skill: what it does, how to install
Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables.
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-codeWhat brand does
Brand hands the agent a working context: voice, visual rules, messaging, asset checks. The source of truth is docs/brand-guidelines.md at the project root. sync-brand-to-tokens.cjs compiles it into assets/design-tokens.json and assets/design-tokens.css, while inject-brand-context.cjs prints a compact version you can paste into a prompt, with --json for structured output.
Two halves. The references/ folder covers voice, visual identity, messaging framework, a consistency checklist, logo rules, typography, palette management and an approval checklist. Then four Node.js scripts: validate an asset by name, size and format, extract colors from an image and match them against the palette, sync tokens. Run them from the project root. Paths inside SKILL.md resolve against the skill folder, not the repo.
The token sync refuses to clobber. Spot existing token files, :root custom properties or Tailwind v4 @theme variables and it stops to report them. Read that report before you re-run with --force. Worth installing when one brandbook feeds several projects or platforms. If the brand only lives in design files, the references/ alone are enough.
What it helps with
- pull brand voice into a single file the agent writes from
- rebuild CSS variables after a brandbook edit
- validate asset naming, size and format before handoff
- extract colors from a mockup and check them against the palette
- walk the approval checklist before publishing
Example prompts for the agent
- Update `docs/brand-guidelines.md` with the new positioning and sync the design tokens
- Validate the files in `assets/` against the brand rules: naming, size, format
- Extract the colors from this mockup and tell me where they drift from the palette
How to install brand
1Skills CLI (Vercel)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code2Manually: put the files in place
~/.claude/skills/brand/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/brand/
1Skills CLI (Vercel)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a codex2Manually: put the files in place
.agents/skills/brand/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a cursor2Manually: put the files in place
.cursor/skills/brand/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install nextlevelbuilder/ui-ux-pro-max-skill brand2Manually: put the files in place
.github/skills/brand/SKILL.md1Skills CLI (Vercel)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a gemini-cli2Platform CLI
gemini skills install https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --path cli/assets/skills/brandManually: put the files in place
.devin/skills/brand/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set7
The whole set →Similar
Questions about brand
How do I install brand in Claude Code?
Run npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code. It lands at ~/.claude/skills/brand/SKILL.md; Codex, Cursor, Copilot, Gemini CLI and OpenCode use the same command with a different -a value.
What does the brand skill do?
It keeps your brandbook in docs/brand-guidelines.md and turns it into design tokens plus prompt context. It also validates assets and matches colors against the palette.
Why did the token sync stop?
It found existing token files, :root custom properties or Tailwind v4 @theme variables and left them alone. Check the report, and if those are earlier sync outputs, re-run with --force.
Source text
SKILL.md · MIT
---
name: brand
description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
argument-hint: "[update|review|create] [args]"
metadata:
author: claudekit
version: "1.0.0"
---
# Brand
Brand identity, voice, messaging, asset management, and consistency frameworks.
## When to Use
- Brand voice definition and content tone guidance
- Visual identity standards and style guide development
- Messaging framework creation
- Brand consistency review and audit
- Asset organization, naming, and approval
- Color palette management and typography specs
## Script Paths
Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.
## Quick Start
**Inject brand context into prompts:**
```bash
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
```
**Validate an asset:**
```bash
node scripts/validate-asset.cjs <asset-path>
```
**Extract/compare colors:**
```bash
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
```
## Brand Sync Workflow
```bash
# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20
```
The sync stops when it detects existing token files, `:root` custom properties
or Tailwind v4 `@theme` variables in common CSS entry points and their local
CSS imports, or Tailwind theme colors and presets. Review the reported source
before proceeding. If the detected files are the managed
`assets/design-tokens.*` outputs from an earlier sync and replacing them is
intentional, re-run with `--force`.
**Files synced:**
- `docs/brand-guidelines.md` → Source of truth
- `assets/design-tokens.json` → Token definitions
- `assets/design-tokens.css` → CSS variables
## Subcommands
| Subcommand | Description | Reference |
|------------|-------------|-----------|
| `update` | Update brand identity and sync to all design systems | `references/update.md` |
## References
| Topic | File |
|-------|------|
| Voice Framework | `references/voice-framework.md` |
| Visual Identity | `references/visual-identity.md` |
| Messaging | `references/messaging-framework.md` |
| Consistency | `references/consistency-checklist.md` |
| Guidelines Template | `references/brand-guideline-template.md` |
| Asset Organization | `references/asset-organization.md` |
| Color Management | `references/color-palette-management.md` |
| Typography | `references/typography-specifications.md` |
| Logo Usage | `references/logo-usage-rules.md` |
| Approval Checklist | `references/approval-checklist.md` |
## Scripts
| Script | Purpose |
|--------|---------|
| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection |
| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
| `scripts/validate-asset.cjs` | Validate asset naming, size, format |
| `scripts/extract-colors.cjs` | Extract and compare colors against palette |
## Templates
| Template | Purpose |
|----------|---------|
| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
## Routing
1. Parse subcommand from `$ARGUMENTS` (first word)
2. Load corresponding `references/{subcommand}.md`
3. Execute with remaining arguments
© claudekit · MIT · nextlevelbuilder/ui-ux-pro-max-skill