Create 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.1",
- 5 "type": "skill",
- 6 "title": "Create brand guidelines for your product",
- 7 "description": "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/.",
- 8 "category": "content",
- 9 "license": "MIT",
- 10 "compat": [
- 11 "claude-code"
- 12 ],
- 13 "permissions": {
- 14 "shell": [
- 15 "node scripts/check-brand.mjs"
- 16 ],
- 17 "files": {
- 18 "read": [
- 19 "./brand/**",
- 20 "./public/brand/**",
- 21 "./data/**"
- 22 ],
- 23 "write": [
- 24 "./brand/**",
- 25 "./public/brand/**"
- 26 ]
- 27 }
- 28 },
- 29 "tests": {
- 30 "cases": [
- 31 {
- 32 "name": "the example spec passes contrast in both themes",
- 33 "inputs": {
- 34 "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\"]}",
- 35 "brand/icons/favicon.svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 64 64\"><rect width=\"64\" height=\"64\"/></svg>\n",
- 36 "brand/voice.md": "# Voice\n\nPlain, short sentences. Use a period or a colon.\n"
- 37 },
- 38 "checks": [
- 39 {
- 40 "type": "command_exits_zero",
- 41 "command": "node scripts/check-brand.mjs --dir brand --out out/check.json"
- 42 },
- 43 {
- 44 "type": "output_matches_schema",
- 45 "path": "out/check.json",
- 46 "schema": {
- 47 "type": "object",
- 48 "required": [
- 49 "failing",
- 50 "contrast",
- 51 "assets",
- 52 "copyChecked"
- 53 ],
- 54 "properties": {
- 55 "failing": {
- 56 "const": 0
- 57 },
- 58 "copyChecked": {
- 59 "const": 1
- 60 },
- 61 "contrast": {
- 62 "type": "array",
- 63 "minItems": 4,
- 64 "maxItems": 4
- 65 }
- 66 }
- 67 }
- 68 }
- 69 ]
- 70 },
- 71 {
- 72 "name": "reports an em dash, a missing dark token, and a missing icon",
- 73 "inputs": {
- 74 "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\"]}",
- 75 "brand/voice.md": "One line — with a dash.\n"
- 76 },
- 77 "checks": [
- 78 {
- 79 "type": "command_exits_zero",
- 80 "command": "node scripts/check-brand.mjs --dir brand --out out/check.json --report-only"
- 81 },
- 82 {
- 83 "type": "output_matches_schema",
- 84 "path": "out/check.json",
- 85 "schema": {
- 86 "type": "object",
- 87 "properties": {
- 88 "failing": {
- 89 "const": 3
- 90 }
- 91 }
- 92 }
- 93 },
- 94 {
- 95 "type": "file_contains",
- 96 "path": "out/check.json",
- 97 "text": "uses an em dash"
- 98 }
- 99 ]
- 100 }
- 101 ]
- 102 }
- 103}
