brand
nextlevelbuilder/ui-ux-pro-max-skill
Manage brand voice, visual identity, messaging, and asset consistency across projects.
What is brand?
This skill provides frameworks and tools for defining and maintaining brand identity, including voice guidelines, visual standards, messaging frameworks, and design tokens. Use it to establish brand consistency, validate assets, sync brand guidelines to design systems, and inject brand context into content creation.
- Define and manage brand voice, tone, and messaging frameworks
- Create and maintain visual identity standards including color palettes and typography
- Sync brand guidelines to design tokens (JSON and CSS variables)
- Validate assets against naming, size, and format standards
- Extract and compare colors against defined brand palettes
- Inject brand context into prompts for consistent content generation
How to install brand
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand- Node.js installed to run scripts
- docs/brand-guidelines.md file (or use the starter template)
- Optional: existing design token files or CSS entry points for sync detection
How to use brand
- 1.Create or edit docs/brand-guidelines.md with your brand identity details
- 2.Run `node scripts/inject-brand-context.cjs` to extract brand context for prompt injection
- 3.Run `node scripts/sync-brand-to-tokens.cjs` to sync guidelines to design-tokens.json and design-tokens.css
- 4.Use `node scripts/validate-asset.cjs <asset-path>` to check asset compliance
- 5.Use `node scripts/extract-colors.cjs <image-path>` to extract and compare colors against your palette
Use cases
- Establishing brand guidelines and style guides for new projects
- Ensuring consistent tone and messaging across marketing and product content
- Syncing brand identity to design systems and component libraries
- Auditing existing assets for brand compliance
- Managing color palettes and typography specifications across teams
- Brand managers and strategists
- UX/UI designers and design systems leads
- Marketing and content teams
- Product managers overseeing brand consistency
- Development teams implementing design tokens
brand FAQ
The sync creates or updates `assets/design-tokens.json` and `assets/design-tokens.css` from your `docs/brand-guidelines.md` source. It will not overwrite existing token files unless you use the `--force` flag.
Run `node scripts/inject-brand-context.cjs` to extract brand context, or use `--json` flag for JSON output. This context can then be included in prompts to ensure consistent branded content generation.
The validate-asset script checks individual assets. For batch validation, you would need to run the script multiple times with different asset paths or create a wrapper script.
The sync workflow detects existing token files, `:root` custom properties, Tailwind v4 `@theme` variables, or Tailwind theme colors and will report them before proceeding. Review the source and use `--force` only if you intend to replace them.
Full instructions (SKILL.md)
Source of truth, from nextlevelbuilder/ui-ux-pro-max-skill.
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:
node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json
Validate an asset:
node scripts/validate-asset.cjs <asset-path>
Extract/compare colors:
node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>
Brand Sync Workflow
# 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 truthassets/design-tokens.json→ Token definitionsassets/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
- Parse subcommand from
$ARGUMENTS(first word) - Load corresponding
references/{subcommand}.md - Execute with remaining arguments
Related skills
More from nextlevelbuilder/ui-ux-pro-max-skill and the wider catalog.
banner-design
Design multi-format banners for social, ads, web, and print with multiple art direction styles.
brand
Manage brand voice, visual identity, messaging, and asset consistency across projects.
design
Unified design skill for brand identity, logos, design systems, presentations, banners, and social media graphics.
design-system
Design token architecture, component specs, and brand-compliant slide generation for systematic design systems.
slides
Create strategic HTML presentations with Chart.js, design tokens, and copywriting formulas.
ui-styling
Build accessible, beautiful UIs with shadcn/ui components, Tailwind CSS, and canvas-based visual design.