Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
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
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: on-brand-check
  3. 3description: Check whether a page, stylesheet, component, email, social post, or deck outline follows the brand guide (brand.md), and return a prioritized fix list covering colors, fonts, type and spacing scale, logo use, and voice. Reports only, never edits. Use when the user asks "is this on brand?", "brand review", "check this against our guidelines", "does this match our style guide?", or before shipping marketing work.
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# On-brand check
  8. 8
  9. 9A 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.
  10. 10
  11. 11## When to use
  12. 12
  13. 13- Before a page, email, deck, or post goes out. "Is this on brand?", "brand QA this".
  14. 14- Reviewing a pull request that touches styles or marketing copy.
  15. 15- To fix things, not just find them, use `/brand` instead. This kit only reports.
  16. 16
  17. 17## Inputs
  18. 18
  19. 191. **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.
  20. 202. **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.
  21. 213. **Channel**, if not obvious (web page, email, social, slide, print). Rules differ: email and social have tighter type and contrast needs.
  22. 22
  23. 23## Steps
  24. 24
  25. 251. **Read the whole guide**, not just the tokens: color rules, type rules, logo rules, voice, and any "never" lists.
  26. 262. **Run the mechanical check** on every file in scope:
  27. 27
  28. 28 ```bash
  29. 29 node scripts/check-brand.mjs brand.md src/pages/pricing.css src/pages/pricing.html --json out/brand-check.json
  30. 30 ```
  31. 31
  32. 32 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.
  33. 333. **Review by hand**, against the guide:
  34. 34 - **Color use:** right roles (primary for actions, accent used sparingly), contrast at least 4.5:1 for body text.
  35. 35 - **Type:** heading and body fonts in the right places, one display size, sentence or title case as the guide says.
  36. 36 - **Logo:** right version for the background and size, clear space, no recoloring, stretching, or effects.
  37. 37 - **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.
  38. 38 - **Spacing and layout:** consistent rhythm from the scale, enough white space around headings.
  39. 394. **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.
  40. 405. **Write `out/brand-check.md`** in the format below and show it. Do not change the checked files.
  41. 41
  42. 42## Output format
  43. 43
  44. 44```markdown
  45. 45# Brand check: pricing page
  46. 46
  47. 47Verdict: Almost there. 2 must fix, 3 should fix.
  48. 48
  49. 49## Must fix
  50. 501. `pricing.css:16` uses #7C3AED, not in the palette. Use color.accent (#F2A541) or remove.
  51. 512. Headline says "best-in-class", which the voice guide avoids. Try: "Book 30% more visits".
  52. 52
  53. 53## Should fix
  54. 54- `pricing.css:11` #1e7b5d is almost color.primary. Use var(--color-primary).
  55. 55
  56. 56## Nice to have
  57. 57- More space above the FAQ heading (24px from the scale, not 18px).
  58. 58
  59. 59## What is working
  60. 60- Logo, clear space, and button styles match the guide.
  61. 61```
  62. 62
  63. 63## Guardrails
  64. 64
  65. 65- Never edit the checked files. Offer `/brand` to apply the fixes.
  66. 66- Cite the guide for every Must fix. If the guide is silent, it is not a Must fix.
  67. 67- Do not paste whole files back. Quote only the line that needs a change.
  68. 68- If the guide contradicts itself, say so and ask which rule wins instead of guessing.
Sign in to comment on a line