ckm:brand

Overview

What ckm:brand is

ckm:brand is a branding-focused skill from the nextlevelbuilder/ui-ux-pro-max-skill repository. It helps you define, maintain, and enforce a consistent brand across content, UI, and marketing assets.

Instead of treating brand as a static PDF, ckm:brand encourages a living brand system: structured guidelines, checklists, and scripts that connect your brand decisions to design tokens, CSS, and real assets.

Key capabilities

With ckm:brand activated, you can:

• Define brand voice and tone with reusable frameworks.
• Shape visual identity: logo usage, colors, typography, and imagery.
• Create and refine messaging frameworks for campaigns and products.
• Run brand consistency reviews using detailed checklists.
• Improve asset management with directory and metadata conventions.
• Sync brand guidelines to design tokens and CSS via scripts.
• Check color usage and accessibility across assets and interfaces.

Who ckm:brand is for

This skill is a good fit for:

• Brand and marketing teams formalizing or updating brand guidelines.
• Product designers and UI/UX teams who need clean handoff from brand to front-end.
• Content strategists and copywriters responsible for brand voice and messaging.
• DesignOps / marketing ops roles building repeatable brand workflows.

It’s especially useful if your brand work touches both editorial content and digital product surfaces where consistency and accessibility matter.

When ckm:brand is (and isn’t) a good fit

Use ckm:brand when you:

• Want a single source of truth for brand guidelines (docs/brand-guidelines.md).
• Need repeatable reviews of marketing assets before approval.
• Are ready to translate brand decisions into tokens and CSS variables.
• Need a structured messaging and voice framework for content teams.

It may not be the best fit if you:

• Only need a quick logo and color choice without ongoing governance.
• Do not maintain your brand in a repository or code-based workflow.
• Are looking for a visual design tool (Figma, Sketch) rather than guidelines and scripts.

If your brand is Git-backed or you want to move in that direction, ckm:brand provides an opinionated, extensible starting point.

How to Use

1. Install the ckm:brand skill

Install the skill into your agent or skills-aware environment using the GitHub repository URL and brand skill slug:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

Once installed, the ckm:brand workflows and references become discoverable to your agent or tooling. Use the argument-hint style to guide invocations:

[update|review|create] [args]

For example:

• brand update homepage-hero – update guidelines or decisions for a specific surface.
• brand review campaign-email – review an asset or flow for brand consistency.
• brand create launch-messaging – create new messaging based on the framework.

Note: Use the exact install command above but adapt paths and integration details to your own environment.

2. Understand the core files and structure

After installation, open these files first to understand how ckm:brand is set up:

• SKILL.md – High-level description, when to use, quick start commands, and brand sync workflow.
• references/ – Detailed guidelines, checklists, and frameworks for brand.
• scripts/ – Node scripts that connect guidelines to assets and design tokens.
• templates/ – Starter templates for building your own brand documentation.

Key reference files:

• references/brand-guideline-template.md – Full brand guidelines structure.
• references/visual-identity.md – How to express the visual side of your brand.
• references/logo-usage-rules.md – When and how to use each logo variant.
• references/color-palette-management.md – Palette hierarchy and documentation patterns.
• references/typography-specifications.md – Type scales, font stacks, and usage.
• references/voice-framework.md – Brand voice traits, dos and don’ts.
• references/messaging-framework.md – Mission, vision, value prop, and message architecture.
• references/asset-organization.md – Suggested folder and metadata structure for assets.
• references/approval-checklist.md – End-to-end asset approval checklist.
• references/consistency-checklist.md – Cross-channel consistency audit.

3. Inject brand context into your prompts and workflows

To make sure brand context is always available to your agent or tooling, use the provided script to inject brand guidelines into prompts:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Typical uses:

• Prepend brand guidelines to content-generation prompts.
• Export a JSON representation of key brand rules for other tools.
• Keep copywriters and designers aligned without manually pasting long guidelines.

If your environment supports it, wire inject-brand-context.cjs into your prompt-building pipeline so every brand-relevant task automatically includes the latest brand rules.

4. Validate marketing assets for brand and accessibility

Use the validation script to check specific assets against your brand system:

node scripts/validate-asset.cjs <asset-path>

This script is designed to work with the structures and checklists documented in references/approval-checklist.md, references/consistency-checklist.md, and related files. In practice, you might:

• Run it on a new campaign graphic before launch.
• Integrate it into CI to catch off-brand assets in pull requests.
• Use it during design reviews as a structured checklist.

Combine script output with the approval checklist to ensure:

• Correct logo and color usage.
• Brand fonts and typography hierarchy are respected.
• Imagery matches brand style and meets quality standards.
• Accessibility basics (contrast, alt text, focus visibility) are covered.

5. Manage and document your color system

Color is a core part of brand and UI/UX. ckm:brand includes guidance and a helper script to keep your palette consistent and well documented.

Use the color script to inspect or compare palettes:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Typical uses:

• Extract colors from existing assets to check if they match your official palette.
• Compare a proposed new palette to current guidelines.
• Build and maintain tables and CSS variables as documented in references/color-palette-management.md.

The color management reference covers:

• Primary, secondary, neutral, and semantic color hierarchy.
• Documentation patterns in Markdown tables and CSS variables.
• How to represent colors in Tailwind-style configs.
• Accessibility standards for contrast (WCAG 2.1).

6. Create or refine your brand guidelines with templates

Start a structured brand guidelines document using:

• references/brand-guideline-template.md
• templates/brand-guidelines-starter.md

Copy one of these into your repo as docs/brand-guidelines.md or similar, then customize:

• Quick reference (colors, fonts, voice traits).
• Detailed color palette with usage notes.
• Typography stacks and responsive type scales.
• Logo variants, clear space, and minimum size rules.
• Voice principles, tone-by-context, and phrase examples.
• Messaging hierarchy and audience-specific messages.

These templates are designed to be human-readable for designers and marketers, but structured enough for scripts (like sync-brand-to-tokens.cjs) to process.

7. Sync brand guidelines to design tokens and CSS

One of the most powerful parts of ckm:brand is the Brand Sync Workflow described in SKILL.md. It connects your written guidelines to front-end implementation.

Typical 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

Files involved (as documented in the skill):

• docs/brand-guidelines.md → Source of truth for brand decisions.
• assets/design-tokens.json → Design token definitions generated or updated.
• assets/design-tokens.css → CSS variables surfaced to front-end.

How to use this in practice:

• Update colors, typography, or spacing in docs/brand-guidelines.md.
• Run sync-brand-to-tokens.cjs to propagate those changes.
• Import assets/design-tokens.css into your UI code so brand updates flow through to the product.

This keeps your brand guidelines, design system, and implementation aligned without manual double-entry.

8. Run brand reviews and audits using checklists

For larger teams or campaigns, use the reference checklists as a repeatable review process:

• references/approval-checklist.md – Step-by-step asset approval.
• references/consistency-checklist.md – Brand consistency across channels.

You can:

• Turn these into review forms or checklists in your project management tool.
• Use them as acceptance criteria in tickets for new pages or campaigns.
• Combine with validate-asset.cjs for semi-automated checks.

This helps ensure brand, UI/UX, and accessibility standards are consistently applied across web, email, social, and print.

FAQ

What does ckm:brand actually do for my team day-to-day?

ckm:brand gives you three practical benefits:

1. Codified brand guidelines – Structured templates and references to write clear brand rules.
2. Operational workflows – Scripts and checklists that make brand work repeatable instead of ad hoc.
3. Implementation alignment – Syncs guidelines into design tokens and CSS so your UI reflects brand decisions.

Rather than being a generic branding checklist, it’s oriented around how brand is used in modern UI/UX and marketing workflows.

How do I install ckm:brand from GitHub?

Use the skills installer with the published repository and skill slug:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill brand

This pulls the brand skill from .claude/skills/brand in the repository. After that, consult SKILL.md and the references/ folder to integrate it with your own repo and processes.

Can I customize the brand guidelines and still use the scripts?

Yes. ckm:brand is meant to be adapted. You should:

• Copy the provided templates into your own docs/ or brand/ directory.
• Edit them with your brand’s colors, typography, messaging, and rules.
• Keep the structure broadly similar so scripts like sync-brand-to-tokens.cjs can still parse them.

If you significantly change file names or structure, you may need to adjust the scripts to match your new locations or formats.

Does ckm:brand replace our design system or CMS?

No. ckm:brand sits alongside your design system and CMS:

• It defines the brand rules and tokens that your design system implements.
• It documents voice and messaging that your CMS content should follow.

Your design system (e.g., component library) and CMS remain the delivery mechanisms. ckm:brand keeps the brand logic behind them consistent and machine-readable.

How does ckm:brand support accessibility?

Accessibility is embedded into several references:

• references/approval-checklist.md includes visual and content accessibility checks.
• references/color-palette-management.md documents contrast requirements and semantic color use.

Use these in design reviews and asset approval to ensure color contrast, focus visibility, alt text, and content structure meet common standards like WCAG 2.1 AA.

Can ckm:brand help non-designers stay on brand?

Yes. While some assets target designers and front-end engineers, many documents are written for marketers, content teams, and general stakeholders:

• Voice and messaging frameworks provide ready-made patterns.
• Checklists give clear yes/no criteria without design jargon.
• Injected brand context helps non-designers prompt AI tools in a brand-safe way.

By centralizing these resources, ckm:brand reduces the need for ad hoc brand guidance.

What if we already have a brand PDF or external style guide?

You can use ckm:brand to operationalize your existing materials:

• Translate key sections of your PDF into docs/brand-guidelines.md using the provided templates.
• Encode your logo rules, palette, and typography into the structured references.
• Use the sync and validation scripts to bring those rules into tokens and asset checks.

You don’t have to discard your existing brand doc; instead, treat ckm:brand as the repository-backed, automation-friendly version of it.

Is ckm:brand only for UI products, or can we use it for general marketing?

ckm:brand covers both:

• For UI/UX and front-end, it offers design-token sync, CSS variables, color and typography specs.
• For marketing and content, it provides messaging frameworks, approval checklists, and asset organization.

If your brand touches web, product, and marketing campaigns, ckm:brand helps keep them aligned under one system.

How often should we update our brand guidelines when using ckm:brand?

The workflow assumes your brand is a living system. A practical approach is:

• Update guidelines any time you make a meaningful visual or messaging change.
• Run the Brand Sync Workflow right after changes so tokens and CSS stay in sync.
• Periodically run consistency audits using the checklists across key channels.

Because everything lives in your repository, updates can follow normal version control and review practices.