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// Reads the tokens block from a brand guide (brand.md). Node built-ins only.
  2. 2//
  3. 3// The tokens block is a fenced code block whose info string is yaml, yml, or json.
  4. 4// A block marked "tokens" (```yaml tokens) wins; otherwise the first yaml or json block.
  5. 5// The YAML reader understands the small subset brand guides need: nested maps, "- item"
  6. 6// lists, [inline, lists], { inline: maps }, quoted or plain scalars, and "# comments".
  7. 7
  8. 8const GROUP_ALIASES = {
  9. 9 colors: "color",
  10. 10 colour: "color",
  11. 11 colours: "color",
  12. 12 fonts: "font",
  13. 13 typeface: "font",
  14. 14 typefaces: "font",
  15. 15 size: "text",
  16. 16 sizes: "text",
  17. 17 type: "text",
  18. 18 "font-size": "text",
  19. 19 fontsize: "text",
  20. 20 spacing: "space",
  21. 21 radii: "radius",
  22. 22 shadows: "shadow",
  23. 23};
  24. 24
  25. 25export function extractTokenBlock(markdown) {
  26. 26 const blocks = [];
  27. 27 const re = /^(```|~~~)[ \t]*([^\n]*)\n([\s\S]*?)^\1[ \t]*$/gm;
  28. 28 for (const m of markdown.matchAll(re)) {
  29. 29 const info = m[2].trim().toLowerCase().split(/\s+/);
  30. 30 const lang = info[0] ?? "";
  31. 31 if (!["yaml", "yml", "json"].includes(lang)) continue;
  32. 32 blocks.push({ lang, tagged: info.includes("tokens"), body: m[3] });
  33. 33 }
  34. 34 return blocks.find((b) => b.tagged) ?? blocks[0] ?? null;
  35. 35}
  36. 36
  37. 37function stripComment(line) {
  38. 38 let quote = null;
  39. 39 for (let i = 0; i < line.length; i++) {
  40. 40 const ch = line[i];
  41. 41 if (quote) {
  42. 42 if (ch === quote) quote = null;
  43. 43 } else if (ch === '"' || ch === "'") quote = ch;
  44. 44 else if (ch === "#" && (i === 0 || /\s/.test(line[i - 1])) && /\s|$/.test(line[i + 1] ?? "")) {
  45. 45 return line.slice(0, i);
  46. 46 }
  47. 47 }
  48. 48 return line;
  49. 49}
  50. 50
  51. 51function scalar(raw) {
  52. 52 const v = raw.trim();
  53. 53 if (v === "") return "";
  54. 54 if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
  55. 55 return v.slice(1, -1);
  56. 56 }
  57. 57 if (v.startsWith("[") && v.endsWith("]")) {
  58. 58 return splitInline(v.slice(1, -1)).map(scalar);
  59. 59 }
  60. 60 if (v.startsWith("{") && v.endsWith("}")) {
  61. 61 const map = {};
  62. 62 for (const pair of splitInline(v.slice(1, -1))) {
  63. 63 const colon = pair.search(/:(\s|$)/);
  64. 64 if (colon === -1) throw new Error(`expected "key: value" inside { } in "${v}"`);
  65. 65 map[scalar(pair.slice(0, colon))] = scalar(pair.slice(colon + 1));
  66. 66 }
  67. 67 return map;
  68. 68 }
  69. 69 return v;
  70. 70}
  71. 71
  72. 72function splitInline(s) {
  73. 73 const out = [];
  74. 74 let cur = "";
  75. 75 let quote = null;
  76. 76 let depth = 0;
  77. 77 for (const ch of s) {
  78. 78 if (quote) {
  79. 79 cur += ch;
  80. 80 if (ch === quote) quote = null;
  81. 81 } else if (ch === '"' || ch === "'") {
  82. 82 quote = ch;
  83. 83 cur += ch;
  84. 84 } else if (ch === "[" || ch === "{") {
  85. 85 depth++;
  86. 86 cur += ch;
  87. 87 } else if (ch === "]" || ch === "}") {
  88. 88 depth--;
  89. 89 cur += ch;
  90. 90 } else if (ch === "," && depth === 0) {
  91. 91 out.push(cur);
  92. 92 cur = "";
  93. 93 } else cur += ch;
  94. 94 }
  95. 95 if (cur.trim() !== "") out.push(cur);
  96. 96 return out;
  97. 97}
  98. 98
  99. 99export function parseYamlSubset(text) {
  100. 100 const lines = text
  101. 101 .split(/\r?\n/)
  102. 102 .map((l, i) => ({ n: i + 1, raw: stripComment(l).replace(/\s+$/, "") }))
  103. 103 .filter((l) => l.raw.trim() !== "");
  104. 104 const root = {};
  105. 105 // Stack of { indent, container } where container is an object or array.
  106. 106 const stack = [{ indent: -1, container: root }];
  107. 107 for (let i = 0; i < lines.length; i++) {
  108. 108 const { n, raw } = lines[i];
  109. 109 if (raw.includes("\t")) throw new Error(`tokens line ${n}: use spaces, not tabs`);
  110. 110 const indent = raw.length - raw.trimStart().length;
  111. 111 const body = raw.trim();
  112. 112 while (stack.length > 1 && indent <= stack[stack.length - 1].indent) stack.pop();
  113. 113 const parent = stack[stack.length - 1].container;
  114. 114 if (body.startsWith("- ") || body === "-") {
  115. 115 if (!Array.isArray(parent)) throw new Error(`tokens line ${n}: list item outside a list`);
  116. 116 parent.push(scalar(body.slice(1)));
  117. 117 continue;
  118. 118 }
  119. 119 const colon = body.search(/:(\s|$)/);
  120. 120 if (colon === -1) throw new Error(`tokens line ${n}: expected "key: value"`);
  121. 121 if (Array.isArray(parent)) throw new Error(`tokens line ${n}: key inside a list`);
  122. 122 const key = scalar(body.slice(0, colon));
  123. 123 const rest = body.slice(colon + 1).trim();
  124. 124 if (rest !== "") {
  125. 125 parent[key] = scalar(rest);
  126. 126 continue;
  127. 127 }
  128. 128 const next = lines[i + 1];
  129. 129 const nextIndent = next ? next.raw.length - next.raw.trimStart().length : -1;
  130. 130 const isList = next && nextIndent > indent && next.raw.trim().startsWith("-");
  131. 131 const child = isList ? [] : {};
  132. 132 parent[key] = child;
  133. 133 stack.push({ indent, container: child });
  134. 134 }
  135. 135 return root;
  136. 136}
  137. 137
  138. 138/** Parses brand.md text and returns normalized tokens. Throws with a helpful message. */
  139. 139export function readTokens(markdown) {
  140. 140 const block = extractTokenBlock(markdown);
  141. 141 if (!block) {
  142. 142 throw new Error(
  143. 143 'no tokens block found. Add a fenced block like ```yaml tokens ... ``` to brand.md (see examples/brand.md).',
  144. 144 );
  145. 145 }
  146. 146 let raw;
  147. 147 try {
  148. 148 raw = block.lang === "json" ? JSON.parse(block.body) : parseYamlSubset(block.body);
  149. 149 } catch (err) {
  150. 150 throw new Error(`could not read the tokens block: ${err.message}`);
  151. 151 }
  152. 152 const tokens = {};
  153. 153 for (const [key, value] of Object.entries(raw)) {
  154. 154 const k = String(key).toLowerCase();
  155. 155 tokens[GROUP_ALIASES[k] ?? k] = value;
  156. 156 }
  157. 157 return tokens;
  158. 158}
  159. 159
  160. 160/** Flattens a nested group into [["primary", "#123"], ["gray-100", "#eee"]]. */
  161. 161export function flatten(group, prefix = "") {
  162. 162 if (group === null || typeof group !== "object" || Array.isArray(group)) return [];
  163. 163 const out = [];
  164. 164 for (const [k, v] of Object.entries(group)) {
  165. 165 const name = prefix ? `${prefix}-${k}` : String(k);
  166. 166 if (v !== null && typeof v === "object" && !Array.isArray(v)) out.push(...flatten(v, name));
  167. 167 else out.push([name, Array.isArray(v) ? v.join(", ") : String(v)]);
  168. 168 }
  169. 169 return out;
  170. 170}
  171. 171
  172. 172export function slug(s) {
  173. 173 return String(s)
  174. 174 .toLowerCase()
  175. 175 .replace(/[^a-z0-9]+/g, "-")
  176. 176 .replace(/^-|-$/g, "");
  177. 177}
Sign in to comment on a line