/excalidraw

name: excalidraw
description: Create visual presentations, slide decks, and explanatory diagrams in Excalidraw. Use when user asks to create a presentation, slide deck, visual explainer, pitch deck, comparison diagram, process flow, or any multi-slide visual content. Supports two output modes — generating .excalidraw JSON files OR injecting slides directly into excalidraw.com via Chrome browser automation (clipboard JS injection + paste). Combines presentation design expertise with Excalidraw technical implementation.

Excalidraw Presentation Designer

Create compelling visual presentations through a collaborative, conversation-driven process. Every presentation is co-designed with the user — never assumed.

How This Skill Works

This is a **guided conversation**, not an assembly line. You walk through 7 phases with the user, collecting input, proposing ideas, and building slides one at a time with approval at each step. The goal is a presentation that feels like THEIRS, not a template.

**Rules:**

• Never build slides without understanding intent, audience, and motivation first
• Never batch-build all slides then reveal — build one, verify, iterate, then next
• Use `AskUserQuestion` for all structured decision points (2-4 options with descriptions)
• Ask in small groups (2-3 questions max at a time) — this is a conversation, not a survey
• Don't proceed to the next phase without confirmation from the current one

---

Phase 0: Silent Config Load

Run this silently at the start of every session. Do NOT ask the user anything yet.

Step 0.1: Check for Saved Brand Config

Look for `.excalidraw/brand.md` in the working directory.

• **If found:** Read it silently. You'll use it in Phase 2.
• **If not found:** No action. You'll collect brand info in Phase 2.

Step 0.2: Check for Shared Context

Look for `.claude/product-marketing-context.md` in the working directory.

• **If found:** Read it silently. Extract any relevant company info, tone, audience details to inform later phases.
• **If not found:** No action.

Step 0.3: Acknowledge (briefly)

If either config was found, mention it in one line: > "I found your saved brand config — I'll use it unless you want to start fresh."

If neither was found, say nothing — proceed directly to Phase 1.

---

Phase 1: Understand Intent

Ask 2-3 structured questions to understand what the user needs. Use `AskUserQuestion` for each.

Question 1: What are you creating?

This determines the narrative arc suggestion in Phase 3.

question: "What type of presentation are you creating?"
header: "Type"
options:
  - label: "Pitch deck"
    description: "Persuade someone — sell an idea, product, or strategy"
  - label: "Explainer"
    description: "Break down a concept, system, or process so people understand it"
  - label: "Tutorial / How-to"
    description: "Step-by-step guide teaching someone how to do something"
  - label: "Process / Architecture diagram"
    description: "Map out a system, workflow, or technical architecture"
multiSelect: false

Question 2: Who is the audience?

This shapes complexity level and tone.

question: "Who will see this presentation?"
header: "Audience"
options:
  - label: "Clients / Prospects"
    description: "External stakeholders you want to impress or persuade"
  - label: "Internal team"
    description: "Colleagues who need clarity, not polish"
  - label: "Investors"
    description: "People evaluating your idea — need credibility and vision"
  - label: "Social media / Educational"
    description: "Public audience — needs to be visually striking and self-explanatory"
multiSelect: false

Question 3: What's the motivation?

This determines emphasis, visual weight, and CTA approach.

question: "What should this presentation accomplish?"
header: "Goal"
options:
  - label: "Persuade"
    description: "Sell an idea — emphasis on benefits, proof, and call to action"
  - label: "Educate"
    description: "Teach a concept — emphasis on clarity, progression, and examples"
  - label: "Document"
    description: "Capture a process — emphasis on accuracy, completeness, and structure"
  - label: "Impress"
    description: "Showcase results — emphasis on metrics, visuals, and impact"
multiSelect: false

**After collecting answers:** Summarize back to the user in one sentence: > "Got it — a [type] for [audience] to [motivation]. Let's figure out the look and feel."

---

Phase 2: Branding & Visual Style

Step 2.1: Check for Existing Brand

**If `.excalidraw/brand.md` was found in Phase 0:**

question: "I found your saved brand style. What would you like to do?"
header: "Brand"
options:
  - label: "Use saved brand (Recommended)"
    description: "Apply your existing colors, fonts, and tone"
  - label: "Start fresh"
    description: "Set up brand style from scratch"
multiSelect: false

If they choose "Use saved brand," skip to Phase 3.

Step 2.2: Collect Brand Style (if no saved brand or starting fresh)

question: "How should I get your brand style?"
header: "Style source"
options:
  - label: "Scrape my website"
    description: "I'll extract colors, fonts, and tone from your URL"
  - label: "I'll describe it"
    description: "Tell me your colors, tone, and vibe"
  - label: "Use a clean default"
    description: "Professional blue/gray palette — looks good on everything"
  - label: "Match a reference"
    description: "Provide a screenshot or link and I'll match the style"
multiSelect: false

**Option A — Scrape website:** 1. Ask for the URL 2. Use `WebFetch` to extract: dominant colors, font style, tone (professional/playful/bold/minimal) 3. Present what you found: "Here's what I extracted from your site: primary color X, accent Y, tone Z. Does this look right?" 4. Adjust based on feedback

**Option B — Manual description:** Ask with `AskUserQuestion`:

question: "What's your brand's visual tone?"
header: "Tone"
options:
  - label: "Professional"