Branded Visual

---
name: branded-visual
description: "Create branded {{BRAND_NAME}} visuals (diagrams, flowcharts, mind maps, frameworks) at platform-specific dimensions. Uses drawio for diagram creation, then renders branded HTML with dark bg, orange accents, brand fonts, and logo. Use when: creating diagrams, visual frameworks, branded graphics. Triggers on: branded visual, create diagram, create visual, make a visual, branded diagram, flowchart, mind map."
---

# Branded Visual Creator

Create branded `<{{BRAND_NAME}}>` visuals from concept to final screenshot. Works standalone (`/branded-visual`) or called by other skills (linkedin-posts, marketing-team).

## Prerequisites

- `drawio` skill for diagram creation (handles all design rules: dark grid bg, 4-color palette, centering, orange title bar)
- Playwright MCP (`mcp__playwright__*`) for screenshots
- Brand assets at `{{BRAND_ASSETS_DIR}}/`
- If Playwright MCP unavailable after checking, tell user immediately

---

## Brand Reference (Quick)

- **Orange:** #FD4F03
- **Deep Black (bg):** #050505 / #1a1a1a (drawio)
- **Green:** #2ECC40
- **Red:** #FF4136
- **Text:** #FFFFFF (white on dark)
- **Headline font:** PP Cirka (Bold for headlines, Regular for subheads)
- **Body font:** PP Telegraf (Regular body, Bold emphasis)
- **UI/labels font:** Space Mono
- **Logo:** `{{BRAND_ASSETS_DIR}}/logo-{{BRAND_NAME}}-simple.svg`
- **Full logo:** `{{BRAND_ASSETS_DIR}}/logo-{{BRAND_NAME}}.svg`

## Platform Dimensions

| Platform | Width | Height | Aspect Ratio |
|----------|-------|--------|-------------|
| LinkedIn | 1080 | 1350 | 4:5 portrait |
| Twitter/X | 1200 | 675 | 16:9 |
| Reddit | 1200 | 628 | ~1.91:1 |
| Skool | 1200 | 628 | ~1.91:1 |

---

## Workflow

### Step 1: Understand the Visual

Ask the user:
1. **What concept?** (flowchart, comparison, mind map, framework, data viz, process diagram)
2. **What platform?** (determines dimensions - default LinkedIn 1080x1350)
3. **Title/headline for the visual?** (rendered as orange title bar at top)
4. **Key elements?** (nodes, labels, relationships - or let you extract from content)

If called from another skill (linkedin-posts, marketing-team), the calling skill provides this context.

### Step 2: Create Diagram with drawio Skill

Use the `drawio` skill which enforces all design rules automatically:
- Dark grid-lined background
- 4-color palette only (Black, Orange, Green, Red + White for text)
- Orange H1 title bar at top
- All content horizontally centered

Save to the topic folder: `{{CONTENT_DIR}}/[TOPIC_SLUG]/`

Show user for approval: **"Does this capture the right concept? Edit / Approve / Regenerate?"**

Iterate until the concept is right.

### Step 3: Export + Brand Overlay (Optional)

Once the user approves the drawio diagram:

1. Export PNG at platform dimensions (default 1080x1350) via drawio CLI
2. If additional branding is needed (logo overlay, brand fonts), build a branded HTML wrapper:
   - Read template: `~/.claude/skills/branded-visual/references/html-template.md`
   - Canvas sized to platform dimensions
   - Embed the exported diagram PNG
   - Add logo ({{BRAND_NAME}}-simple.svg) bottom-right corner, subtle (opacity 0.4, ~60px)
   - `@font-face` declarations for PP Cirka + PP Telegraf if needed
   - No external dependencies
   - Screenshot via Playwright at exact platform dimensions

Save to topic folder as `[platform]-visual.png`

### Step 4: Output

Return the final PNG file path. If called by another skill, that skill uses this path for publishing.

Save final files:
- Draw.io source: `branded-visual.drawio` (for future edits)
- PNG export: `[platform]-visual.drawio.png`
- HTML source (if brand overlay used): `branded-visual.html`

---

## NON-NEGOTIABLE Rules

- **No em dashes** - never use em dashes in any text content. Use regular dashes, commas, or restructure.
- **4-color palette only** - Black, Orange (#FD4F03), Green (#2ECC40), Red (#FF4136). White for text only.
- **Dark grid background** - always.
- **Orange title bar** at the top of every diagram.
- **Center everything** - all content horizontally centered on the canvas.
- **1080x1350 PNG** - default export dimensions (LinkedIn). Adjust only if a different platform is specified.
- Logo must appear in final visual (subtle, bottom-right) when doing full brand overlay.
- Verify dimensions match the target platform before final export.