Skip to content
SlashClone

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/.

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

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.