Skip to content
SlashClone
Made by@brandkit

On brand check

@brandkit/on-brand-check

Review a page, stylesheet, email, deck outline, or post against your brand guide and get a short fix list: off-palette colors (with the nearest brand color), wrong fonts, sizes and spacing off the scale, banned words, logo misuse, and voice. Reports only; changes nothing.

SkillContentv1.0.0 (latest)Tested
Activity
New: be the first to try it

Real output from this kit

How this works

  1. It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
  2. While it works, it reads and changes files in the places it lists, nowhere else.
  3. It runs these commands on your computer: node scripts/check-brand.mjs.
  4. Nothing runs until you choose to use it, and you can remove it any time.

SKILL.md

On-brand check

A second pair of eyes that knows the brand guide by heart. A script catches the mechanical problems (a hex code that is almost the brand green, a stray font). Claude then reviews what a script cannot: voice, hierarchy, logo use, and whether the piece feels like the brand.

When to use

  • Before a page, email, deck, or post goes out. "Is this on brand?", "brand QA this".
  • Reviewing a pull request that touches styles or marketing copy.
  • To fix things, not just find them, use /brand instead. This kit only reports.

Inputs

  1. Brand guide: brand.md or docs/brand.md. No guide: stop and offer brand-guide-builder. A guide without a tokens block still works for the voice and logo review; say the mechanical check was skipped.
  2. What to check: file paths, a folder, pasted text, or a URL the user has saved locally. Pasted text: save it to out/brand-check-input.md first so the script can read it.
  3. Channel, if not obvious (web page, email, social, slide, print). Rules differ: email and social have tighter type and contrast needs.

Steps

  1. Read the whole guide, not just the tokens: color rules, type rules, logo rules, voice, and any "never" lists.
  2. Run the mechanical check on every file in scope:

    node scripts/check-brand.mjs brand.md src/pages/pricing.css src/pages/pricing.html --json out/brand-check.json

    It reports off-palette-color, near-brand-color (almost the brand color: a typo or eyedropper drift), off-brand-font, off-scale-size, off-scale-spacing, and avoided-word. Pure white and black are always allowed.

  3. Review by hand, against the guide:

    • Color use: right roles (primary for actions, accent used sparingly), contrast at least 4.5:1 for body text.
    • Type: heading and body fonts in the right places, one display size, sentence or title case as the guide says.
    • Logo: right version for the background and size, clear space, no recoloring, stretching, or effects.
    • Voice: read it aloud against the voice section. Flag jargon, vague claims, and tone that does not match. Quote the line and give a rewrite.
    • Spacing and layout: consistent rhythm from the scale, enough white space around headings.
  4. Sort findings into Must fix (breaks a rule in the guide), Should fix (drifts from it), and Nice to have (taste). Skip anything the guide does not cover, or label it clearly as your opinion.
  5. Write out/brand-check.md in the format below and show it. Do not change the checked files.

Output format

# Brand check: pricing page

Verdict: Almost there. 2 must fix, 3 should fix.

## Must fix
1. `pricing.css:16` uses #7C3AED, not in the palette. Use color.accent (#F2A541) or remove.
2. Headline says "best-in-class", which the voice guide avoids. Try: "Book 30% more visits".

## Should fix
- `pricing.css:11` #1e7b5d is almost color.primary. Use var(--color-primary).

## Nice to have
- More space above the FAQ heading (24px from the scale, not 18px).

## What is working
- Logo, clear space, and button styles match the guide.

Guardrails

  • Never edit the checked files. Offer /brand to apply the fixes.
  • Cite the guide for every Must fix. If the guide is silent, it is not a Must fix.
  • Do not paste whole files back. Quote only the line that needs a change.
  • If the guide contradicts itself, say so and ask which rule wins instead of guessing.

README.md

On-brand check

Ask "is this on brand?" and get a short, specific fix list. It checks colors, fonts, type and spacing scale, words to avoid, logo use, and voice against your brand.md.

Who it is for: marketers and founders shipping pages and posts without a brand team, and developers reviewing style changes.

Example

Input: examples/landing.css and examples/launch-email.md, checked against examples/brand.md.

node scripts/check-brand.mjs examples/brand.md examples/landing.css examples/launch-email.md

Output (trimmed):

FileLineKindFoundSuggestion
landing.css7off-brand-fontPlayfair Displayuse a brand font: Fraunces, Georgia, Inter, JetBrains Mono
landing.css11near-brand-color#1e7b5duse color.primary (#1F7A5C); this is almost it
landing.css16off-palette-color#7C3AEDnearest brand color is color.muted (#5F6B76)
launch-email.md1avoided-wordrevolutionarythe voice guide avoids this word; say it plainly

Claude then adds the judgment calls (voice, logo, hierarchy) and writes out/brand-check.md with Must fix, Should fix, and Nice to have.

What it can access

  • Reads brand.md or docs/brand.md, plus the files you ask it to check.
  • Writes only out/brand-check.md, out/brand-check.json, and (for pasted text) out/brand-check-input.md.
  • Runs one script, scripts/check-brand.mjs (Node, no dependencies). No network.

Setup

None. Needs Node 18 or newer. For the mechanical checks, brand.md needs a tokens block (see brand-guide-builder).

Files

  • README.md
  • SKILL.md
  • examples/brand.md
  • examples/landing.css
  • examples/launch-email.md
  • kit.json
  • scripts/check-brand.mjs
  • scripts/tokens-lib.mjs

Did it work?

0worked for them0did not work

Sign in to say whether it worked for you.

Nobody has said yet. Tried it? Tell the next person.