Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill brand -a claude-code
Open on GitHub

What 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-code

2Manually: put the files in place

~/.claude/skills/brand/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/brand/

From the same set7

The whole set →

Similar

animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs frontend-ui-engineering addyosmani Enforces production standards for component architecture, WCAG 2.1 AA accessibility, and design systems. Stops AI models from defaulting to purple buttons, heavy shadows, and arbitrary spacing. Claude Code CX Codex Cursor +1 66,600installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. Claude Code 850,344installs

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

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor