Made by@slashcloneCreate brand guidelines for your product
@slashclone/brand-book
Create brand guidelines for your product: one shareable HTML brand book covering logo, colors, type, icons, share images, and voice. It follows your real design tokens in light and dark themes, and a checker confirms contrast in both themes, icon and image sizes, and banned copy such as em dashes. Writes only to brand/ and public/brand/.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1{
- 2 "name": "brand-book",
- 3 "owner": "slashclone",
- 4 "version": "0.1.0",
- 5 "type": "skill",
- 6 "description": "Build and keep up a full brand kit as one self-contained HTML brand book: logo and wordmark (sizes, clear space, misuse), color tokens in light and dark, type, imagery rules, share images, favicon and app icons, voice and copy rules, and a downloads chapter. Includes a template, an example spec, and a checker for contrast in both themes, asset sizes, and banned copy such as em dashes. Writes only to brand/ and public/brand/.",
- 7 "category": "content",
- 8 "license": "MIT",
- 9 "compat": ["claude-code"],
- 10 "permissions": {
- 11 "shell": ["node scripts/check-brand.mjs"],
- 12 "files": {
- 13 "read": ["./brand/**", "./public/brand/**", "./data/**"],
- 14 "write": ["./brand/**", "./public/brand/**"]
- 15 }
- 16 },
- 17 "tests": {
- 18 "cases": [
- 19 {
- 20 "name": "the example spec passes contrast in both themes",
- 21 "inputs": {
- 22 "brand/brand.json": "{\"name\":\"Example\",\"edition\":1,\"tokens\":{\"light\":{\"page\":\"#FFFFFF\",\"text\":\"#1B1D22\",\"mark\":\"#2D5BD3\"},\"dark\":{\"page\":\"#0F1115\",\"text\":\"#ECEEF2\",\"mark\":\"#4C78E6\"}},\"pairs\":[{\"fg\":\"text\",\"bg\":\"page\",\"min\":4.5},{\"fg\":\"mark\",\"bg\":\"page\",\"min\":3}],\"assets\":[{\"path\":\"icons/favicon.svg\"}],\"copy\":[\"voice.md\"]}",
- 23 "brand/icons/favicon.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\"/></svg>\n",
- 24 "brand/voice.md": "# Voice\n\nPlain, short sentences. Use a period or a colon.\n"
- 25 },
- 26 "checks": [
- 27 {
- 28 "type": "command_exits_zero",
- 29 "command": "node scripts/check-brand.mjs --dir brand --out out/check.json"
- 30 },
- 31 {
- 32 "type": "output_matches_schema",
- 33 "path": "out/check.json",
- 34 "schema": {
- 35 "type": "object",
- 36 "required": ["failing", "contrast", "assets", "copyChecked"],
- 37 "properties": {
- 38 "failing": { "const": 0 },
- 39 "copyChecked": { "const": 1 },
- 40 "contrast": { "type": "array", "minItems": 4, "maxItems": 4 }
- 41 }
- 42 }
- 43 }
- 44 ]
- 45 },
- 46 {
- 47 "name": "reports an em dash, a missing dark token, and a missing icon",
- 48 "inputs": {
- 49 "brand/brand.json": "{\"name\":\"Broken\",\"tokens\":{\"light\":{\"page\":\"#FFFFFF\",\"text\":\"#1B1D22\",\"accent\":\"#2D5BD3\"},\"dark\":{\"page\":\"#0F1115\",\"text\":\"#ECEEF2\"}},\"pairs\":[{\"fg\":\"text\",\"bg\":\"page\",\"min\":4.5}],\"assets\":[{\"path\":\"icons/icon-512.png\",\"width\":512,\"height\":512}],\"copy\":[\"voice.md\"]}",
- 50 "brand/voice.md": "One line \u2014 with a dash.\n"
- 51 },
- 52 "checks": [
- 53 {
- 54 "type": "command_exits_zero",
- 55 "command": "node scripts/check-brand.mjs --dir brand --out out/check.json --report-only"
- 56 },
- 57 {
- 58 "type": "output_matches_schema",
- 59 "path": "out/check.json",
- 60 "schema": {
- 61 "type": "object",
- 62 "properties": { "failing": { "const": 3 } }
- 63 }
- 64 },
- 65 { "type": "file_contains", "path": "out/check.json", "text": "uses an em dash" }
- 66 ]
- 67 }
- 68 ]
- 69 }
- 70}