Made by@brandkitSocial image templates
@brandkit/social-image-templates
Generate on-brand social image templates as editable SVGs from your brand.md tokens: an Open Graph image (1200x630), a square post (1080x1080), and a story (1080x1920 with safe zones). Checks text contrast and fits the headline for you.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1{
- 2 "name": "social-image-templates",
- 3 "owner": "brandkit",
- 4 "version": "1.0.1",
- 5 "type": "skill",
- 6 "description": "Generate on-brand social image templates as editable SVGs from your brand.md tokens: an Open Graph image (1200x630), a square post (1080x1080), and a story (1080x1920 with safe zones). Checks text contrast and fits the headline for you.",
- 7 "category": "content",
- 8 "license": "MIT",
- 9 "compat": ["claude-code"],
- 10 "permissions": {
- 11 "shell": ["node scripts/make-templates.mjs"],
- 12 "files": {
- 13 "read": ["./brand.md", "./docs/brand.md", "./assets/**", "./brand/**"],
- 14 "write": ["./social-templates/**"]
- 15 }
- 16 },
- 17 "tests": {
- 18 "cases": [
- 19 {
- 20 "name": "builds three sizes with readable text on the brand color",
- 21 "inputs": {
- 22 "brand.md": "# Brand\n\n```yaml tokens\nname: Testco\ncolor:\n primary: \"#1F7A5C\"\n accent: \"#F2A541\"\n ink: \"#1B1F23\"\n paper: \"#FFFFFF\"\nfont:\n heading: [Fraunces, Georgia, serif]\n body: [Inter, sans-serif]\n```\n"
- 23 },
- 24 "checks": [
- 25 {
- 26 "type": "command_exits_zero",
- 27 "command": "node scripts/make-templates.mjs brand.md social-templates --title \"Launch week starts Monday\" --footer testco.example"
- 28 },
- 29 { "type": "file_contains", "path": "social-templates/og-1200x630.svg", "text": "width=\"1200\" height=\"630\"" },
- 30 { "type": "file_contains", "path": "social-templates/square-1080.svg", "text": "width=\"1080\" height=\"1080\"" },
- 31 { "type": "file_contains", "path": "social-templates/story-1080x1920.svg", "text": "Safe zone" },
- 32 { "type": "file_contains", "path": "social-templates/og-1200x630.svg", "text": "Launch week starts Monday" },
- 33 { "type": "file_contains", "path": "social-templates/og-1200x630.svg", "text": "fill=\"#1F7A5C\"" },
- 34 {
- 35 "type": "output_matches_schema",
- 36 "path": "social-templates/templates.json",
- 37 "schema": {
- 38 "type": "object",
- 39 "required": ["colors", "text_contrast", "templates"],
- 40 "properties": {
- 41 "colors": {
- 42 "type": "object",
- 43 "properties": { "background": { "const": "#1F7A5C" }, "text": { "const": "#FFFFFF" } }
- 44 },
- 45 "text_contrast": { "type": "number", "minimum": 4.5 },
- 46 "templates": { "type": "array", "minItems": 3, "maxItems": 3 }
- 47 }
- 48 }
- 49 }
- 50 ]
- 51 },
- 52 {
- 53 "name": "light style picks dark text and escapes special characters",
- 54 "inputs": {
- 55 "brand.md": "```yaml\ncolor:\n primary: \"#F2A541\"\n ink: \"#1B1F23\"\n paper: \"#FFFFFF\"\n```\n"
- 56 },
- 57 "checks": [
- 58 {
- 59 "type": "command_exits_zero",
- 60 "command": "node scripts/make-templates.mjs brand.md social-templates --style light --title \"Q&A: <live> today\""
- 61 },
- 62 { "type": "file_contains", "path": "social-templates/square-1080.svg", "text": "Q&A: <live> today" },
- 63 { "type": "file_contains", "path": "social-templates/square-1080.svg", "text": "fill=\"#1B1F23\"" },
- 64 {
- 65 "type": "output_matches_schema",
- 66 "path": "social-templates/templates.json",
- 67 "schema": {
- 68 "type": "object",
- 69 "properties": { "colors": { "type": "object", "properties": { "text": { "const": "#1B1F23" } } } }
- 70 }
- 71 }
- 72 ]
- 73 }
- 74 ]
- 75 }
- 76}