--- name: social-canvas description: > Closed-loop social media infographic and carousel generator for Claude Code on the user's Mac. Renders HTML/CSS to PNG via Python Playwright (scripts/render.py), reads the PNG back, evaluates quality, and iterates until polished and publish-ready. Supports LinkedIn carousels, Instagram posts/stories, Twitter/X graphics, and infographics. (the agent fleet agents run their own fork of this skill on the VPS — keep the two in sync via skill-translate, but THIS copy is Claude Code-native.) license: MIT metadata: version: 3.0.0 platform: claude-code parity_note: the agent runtime fork lives on the VPS (synced via skill-translate); render.js is kept for that runtime --- # Social Canvas — Closed-Loop Visual Generator (Claude Code) Generate pixel-perfect social media infographics and carousels with a visual feedback loop. Generate HTML/CSS → render to PNG via `scripts/render.py` (Python Playwright) → Read the PNG back → evaluate against quality criteria → fix and re-render until the output is polished. **Skill base directory:** `~/.claude/skills/social-canvas` (also reachable as `~/.claude/skills/social-canvas`) **Renderers:** `scripts/render.py` is the Claude Code/Mac renderer (Python Playwright, verified working). `scripts/render.js` is the agent runtime-container renderer (playwright-core) — kept only for syncing to the VPS fork; do not use it locally. --- ## PHASE 0 — CLARIFY **Before doing anything, gather what you need.** Ask the user clarifying questions to fill gaps. Skip questions they already answered in their prompt. **Hard gate**: - Do not assume the format, scope, slide count, platform, or aesthetic direction when the user has not explicitly provided them. - Do not inspect prior artifacts for direction-setting, propose a concept, read design references, or start building files until Phase 0 is complete. - Your first substantive response after loading this skill must be a clarification message if any required inputs are missing. - If required inputs are still missing after the first clarification pass, stop and wait for the user's answer instead of proceeding with assumptions. - If the user explicitly says "you decide", record that delegated choice in one sentence, then proceed. **Minimum required inputs before Phase 1**: - Output format - Scope of the deliverable - Aesthetic direction - Whether the provided facts should be used as-is or verified first - **The core idea the visual must land** (one sentence): derive it from the piece's thesis / Core Claim and the source's own central metaphor, NOT the hook. The visual illustrates the payoff, not the opening line. (A visual once shipped illustrating only the hook and missing the post's actual thesis, 2026-06-17.) **Required question block**: - Ask only for unanswered items. - Prefer 3-5 concise questions. - Plain-text questions with short option hints inline, e.g.: `Format: single infographic, LinkedIn carousel, Instagram post, or other?` Questions to resolve: 1. **Platform/format**: LinkedIn carousel? Instagram post? Twitter/X? Story? (Determines dimensions — see `references/format-specs.md`) 2. **Core message**: What's the main point or topic? 3. **Slide count**: For carousels, how many slides? (Default: 5-7 for LinkedIn, 3-5 for Instagram) 4. **Content specifics**: Any stats, quotes, data points, or key facts to include? 5. **Images/logos**: Any files to embed? Collect absolute file paths. 6. **Aesthetic direction**: Minimal, bold, editorial, technical, or playful? (See `references/design-patterns.md` for details) 7. **Research needed?**: Should the topic be researched first to gather current stats/facts? If yes, use Perplexity (search or reason) to gather data before designing. **Rule**: Only proceed once you have enough info to produce something useful. **Phase 0 completion check**: Before entering Phase 1, restate the resolved brief in 5 lines or fewer: - Format - Scope - Style - Fact-handling choice - Core idea the image must land (one sentence, from the thesis not the hook) If you cannot fill all five lines from the user's answers or an explicit "you decide", Phase 0 is not complete. Every candidate concept must be tested against the core idea; reject any that only illustrate the hook or a sub-point. --- ## PHASE 1 — INTAKE & PLANNING ### Load Brand Config **MANDATORY.** Read brand config at `brand-config.json` (relative to this skill's directory). This contains exact colors, fonts, logo paths, and branding rules. Do NOT use hardcoded defaults — the JSON is the source of truth. ### Load Design Rules **MANDATORY.** Read `references/design-rules.md` before generating any HTML. These are hard constraints learned from production — every rule exists because it was violated and caught. Internalize the design rules. ### Load Visual Style Guide **MANDATORY.** Read `references/fractal-ai-visual-style.md` for the full Fractal AI visual identity. ### Determine Format Look up exact dimensions in `references/format-specs.md`. Set the width, height, and safe zone values. ### Plan Content Structure For carousels, plan the narrative arc: - **Slide 1**: Hook/title — stop the scroll with a bold statement or question → use `templates/layouts/hook.html` - **Slides 2-N**: Content — one idea per slide, varied layouts → use `content-block`, `stat`, `list`, `quote`, or `comparison` templates - **Final slide**: CTA — tell them what to do next → use `templates/layouts/cta.html` **CRITICAL**: Select a layout template for EACH slide from `templates/layouts/`. Vary the patterns — don't use the same layout on every content slide. Available layouts: | Template | Use For | |----------|---------| | `hook.html` | First slide — bold headline + optional visual element | | `content-block.html` | Detail slides with color header block + data viz (code, cards, terminal, flow) | | `stat.html` | Single powerful number/metric | | `list.html` | 3-5 numbered items or takeaways | | `quote.html` | Pull quote with attribution | | `comparison.html` | Before/after, old vs new, two-column contrast | | `cta.html` | Final slide — call to action | --- ## PHASE 2 — HTML/CSS GENERATION ### Setup ```bash rm -rf /tmp/social-canvas && mkdir -p /tmp/social-canvas # Copy logo for renderer access (relative paths) cp ~/.claude/skills/social-canvas/brand-assets/fractal-ai-logo-tree-text-transparent-bg.png /tmp/social-canvas/logo.png ``` ### Generate HTML Files from Templates Create one self-contained HTML file per slide at `/tmp/social-canvas/slide-{N}.html`. **PROCESS: Start from a layout template, then customize.** 1. Read the chosen template from `templates/layouts/{name}.html` 2. Read `templates/base-vars.css` for the locked brand tokens 3. Copy the template's HTML structure 4. Replace `{{PLACEHOLDERS}}` with actual content 5. Customize the data visualization zone (code block, cards, terminal, flow steps) as needed 6. Set `body { width: {WIDTH}px; height: {HEIGHT}px; }` for the target format **LOCKED BRAND TOKENS** — Copy these EXACTLY into every slide's `