HybridAIOne · furukama · Apr 13, 2026
diff --git a/docs/development/guides/bundled-skills.md b/docs/development/guides/bundled-skills.md
@@ -6,12 +6,12 @@ sidebar_position: 4
 
 # Bundled Skills
 
-HybridClaw currently ships with 33 bundled skills. A few notable categories:
+HybridClaw currently ships with 34 bundled skills. A few notable categories:
 
 - office workflows: `pdf`, `xlsx`, `docx`, `pptx`, `office-workflows`
 - planning and engineering: `project-manager`, `feature-planning`,
   `code-review`, `code-simplification`
-- visual explainers and animation: `manim-video`
+- visual explainers and animation: `manim-video`, `excalidraw`
 - platform integrations: `github-pr-workflow`, `notion`, `trello`, `stripe`,
   `wordpress`, `google-workspace`, `discord`
 - knowledge workflows: `llm-wiki`, `obsidian`, `zettelkasten`

diff --git a/docs/index.html b/docs/index.html
@@ -1431,7 +1431,7 @@ <h3 style="color: var(--accent-1);">Proactive Scheduler Jobs</h3>
     </div>
     <div class="feature-card">
       <h3 style="color: var(--accent-1);">Skills Engine</h3>
-      <p>HybridClaw ships with 33 bundled skills, including the <code>manim-video</code> animation workflow, category-aware catalog and admin authoring flows, and OpenClaw/CLAUDE-compatible <code>SKILL.md</code> discovery with prompt embedding modes (<code>always</code>/<code>summary</code>/<code>hidden</code>), eligibility checks, and trust-aware security scanning. Community imports support packaged <code>official/&lt;skill&gt;</code> skills, <code>skills-sh</code>, <code>clawhub</code>, <code>lobehub</code>, <code>claude-marketplace</code>, <code>well-known</code>, and explicit GitHub repo/path sources via <code>hybridclaw skill import</code> or <code>/skill import</code>.</p>
+      <p>HybridClaw ships with 34 bundled skills, including the <code>manim-video</code> animation workflow and the <code>excalidraw</code> diagramming workflow, category-aware catalog and admin authoring flows, and OpenClaw/CLAUDE-compatible <code>SKILL.md</code> discovery with prompt embedding modes (<code>always</code>/<code>summary</code>/<code>hidden</code>), eligibility checks, and trust-aware security scanning. Community imports support packaged <code>official/&lt;skill&gt;</code> skills, <code>skills-sh</code>, <code>clawhub</code>, <code>lobehub</code>, <code>claude-marketplace</code>, <code>well-known</code>, and explicit GitHub repo/path sources via <code>hybridclaw skill import</code> or <code>/skill import</code>.</p>
     </div>
     <div class="feature-card">
       <h3 style="color: var(--accent-1);">Agent Packaging</h3>

diff --git a/skills/excalidraw/SKILL.md b/skills/excalidraw/SKILL.md
@@ -0,0 +1,146 @@
+---
+name: excalidraw
+description: Create and revise editable `.excalidraw` diagrams as Excalidraw JSON for architecture diagrams, flowcharts, sequence diagrams, concept maps, and other hand-drawn explainers.
+user-invocable: true
+disable-model-invocation: false
+metadata:
+  hybridclaw:
+    category: publishing
+    short_description: "Editable Excalidraw diagrams and share links."
+    tags:
+      - excalidraw
+      - diagrams
+      - flowcharts
+      - architecture
+      - visualization
+    related_skills:
+      - manim-video
+      - write-blog-post
+---
+# Excalidraw
+
+Use this skill when the user wants an editable diagram, not just a rendered image.
+
+Typical requests:
+
+- architecture or system diagrams
+- flowcharts and process maps
+- sequence diagrams
+- concept maps and explainers
+- hand-drawn style visuals that should stay editable in Excalidraw
+
+Excalidraw files are plain JSON. The default deliverable is a `*.excalidraw` file in the workspace. The user can drag that file into [excalidraw.com](https://excalidraw.com) to view, edit, or export it.
+
+## Default Workflow
+
+1. Plan the diagram before writing JSON: title, nodes, connectors, groups, and rough canvas size.
+2. Write a valid Excalidraw `elements` array.
+3. Wrap the array in the standard file envelope.
+4. Save the result as `*.excalidraw`.
+5. If the user wants a shareable browser link, run:
+
+```bash
+node skills/excalidraw/scripts/upload.mjs diagram.excalidraw
+```
+
+The upload helper encrypts the diagram client-side and prints the Excalidraw share URL.
+
+## File Envelope
+
+Use this shape unless you are editing an existing file and need to preserve more fields:
+
+```json
+{
+  "type": "excalidraw",
+  "version": 2,
+  "source": "hybridclaw",
+  "elements": [],
+  "appState": {
+    "viewBackgroundColor": "#ffffff"
+  },
+  "files": {}
+}
+```
+
+When editing an existing `.excalidraw` file, preserve `appState`, `files`, and any other existing top-level keys unless the user asked for a deliberate reset.
+
+## Rules
+
+- Use Excalidraw JSON, not SVG or HTML, unless the user explicitly asked for another format.
+- For labeled shapes or arrows, create a separate `text` element and bind it with `containerId` plus the container's `boundElements`.
+- Do **not** invent a `"label"` property on rectangles, diamonds, ellipses, or arrows. Excalidraw ignores it.
+- Place a bound text element immediately after its container in the `elements` array.
+- Use readable sizes: `fontSize` 16+ for normal labels, 20+ for titles, and at least `120x60` for labeled boxes.
+- Leave about `20-30px` of space between major elements.
+- Prefer short stable ids such as `api`, `text-api`, `arrow-api-db`.
+- Avoid emoji and decorative Unicode. Stick to plain text that Excalidraw renders reliably.
+- Default to a white background with dark text unless the user explicitly asks for dark mode.
+- For arrows, `points` are offsets relative to the arrow's `x` and `y`.
+
+## Core Patterns
+
+### Labeled Rectangle
+
+```json
+[
+  {
+    "type": "rectangle",
+    "id": "api",
+    "x": 120,
+    "y": 120,
+    "width": 220,
+    "height": 80,
+    "roundness": { "type": 3 },
+    "backgroundColor": "#a5d8ff",
+    "fillStyle": "solid",
+    "boundElements": [{ "id": "text-api", "type": "text" }]
+  },
+  {
+    "type": "text",
+    "id": "text-api",
+    "x": 130,
+    "y": 145,
+    "width": 200,
+    "height": 24,
+    "text": "API Service",
+    "fontSize": 20,
+    "fontFamily": 1,
+    "strokeColor": "#1e1e1e",
+    "textAlign": "center",
+    "verticalAlign": "middle",
+    "containerId": "api",
+    "originalText": "API Service",
+    "autoResize": true
+  }
+]
+```
+
+### Arrow Between Shapes
+
+```json
+{
+  "type": "arrow",
+  "id": "arrow-api-db",
+  "x": 340,
+  "y": 160,
+  "width": 180,
+  "height": 0,
+  "points": [[0, 0], [180, 0]],
+  "endArrowhead": "arrow",
+  "startBinding": { "elementId": "api", "fixedPoint": [1, 0.5] },
+  "endBinding": { "elementId": "db", "fixedPoint": [0, 0.5] }
+}
+```
+
+## Reference Files
+
+- For palette and contrast guidance, read [references/colors.md](references/colors.md).
+- For copy-pasteable diagram patterns, read [references/examples.md](references/examples.md).
+- For dark-background diagrams, read [references/dark-mode.md](references/dark-mode.md).
+
+## Anti-Patterns
+
+- Do not cram many tiny nodes into one canvas when two simpler diagrams would read better.
+- Do not put all shapes first and all text last; that usually breaks layering and bindings.
+- Do not guess at Excalidraw-only properties you have not already seen in a working example.
+- Do not replace an editable diagram request with a static PNG export unless the user asked for the export.
diff --git a/skills/excalidraw/agents/openai.yaml b/skills/excalidraw/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: "Excalidraw"
+  short_description: "Editable Excalidraw diagrams and share links."
+  default_prompt: "Use $excalidraw to create an editable Excalidraw diagram for this system or process and save the .excalidraw file in the workspace."
diff --git a/skills/excalidraw/references/colors.md b/skills/excalidraw/references/colors.md
@@ -0,0 +1,45 @@
+# Excalidraw Palette
+
+Use a small, consistent palette. Excalidraw diagrams look better when color meaning stays stable across the canvas.
+
+## Fill Colors
+
+| Use | Fill | Hex |
+|-----|------|-----|
+| Primary nodes | Light Blue | `#a5d8ff` |
+| Outputs / success | Light Green | `#b2f2bb` |
+| Warnings / external systems | Light Orange | `#ffd8a8` |
+| Processing / orchestration | Light Purple | `#d0bfff` |
+| Errors / critical states | Light Red | `#ffc9c9` |
+| Notes / decisions | Light Yellow | `#fff3bf` |
+| Storage / data | Light Teal | `#c3fae8` |
+
+## Stroke And Accent Colors
+
+| Use | Stroke | Hex |
+|-----|--------|-----|
+| Default outline / text | Dark Gray | `#1e1e1e` |
+| Blue accent | Blue | `#4a9eed` |
+| Green accent | Green | `#22c55e` |
+| Orange accent | Amber | `#f59e0b` |
+| Red accent | Red | `#ef4444` |
+| Purple accent | Purple | `#8b5cf6` |
+
+## Background Zones
+
+For layered diagrams, use large low-opacity rectangles behind content:
+
+| Layer | Color | Hex |
+|-------|-------|-----|
+| UI / frontend | Blue zone | `#dbe4ff` |
+| Logic / agent layer | Purple zone | `#e5dbff` |
+| Data / tools layer | Green zone | `#d3f9d8` |
+
+Use `opacity: 30-35` for those background zones so they do not overpower the main nodes.
+
+## Contrast Rules
+
+- On white backgrounds, prefer `#1e1e1e` for text.
+- Secondary text on white should stay at or darker than `#757575`.
+- Do not use pale gray text on white.
+- On light fills, keep text dark; do not match the fill color with bright text.
diff --git a/skills/excalidraw/references/dark-mode.md b/skills/excalidraw/references/dark-mode.md
@@ -0,0 +1,37 @@
+# Dark Mode
+
+For dark diagrams, add a large background rectangle as the first element in the array:
+
+```json
+{
+  "type": "rectangle",
+  "id": "dark-bg",
+  "x": -4000,
+  "y": -3000,
+  "width": 10000,
+  "height": 7500,
+  "backgroundColor": "#1e1e2e",
+  "fillStyle": "solid",
+  "strokeColor": "transparent",
+  "strokeWidth": 0
+}
+```
+
+## Text On Dark Backgrounds
+
+- Primary text: `#e5e5e5`
+- Secondary text: `#a0a0a0`
+- Do not use the default `#1e1e1e` text color on a dark background.
+
+## Useful Dark Fills
+
+| Use | Fill | Hex |
+|-----|------|-----|
+| Primary nodes | Dark Blue | `#1e3a5f` |
+| Success / output | Dark Green | `#1a4d2e` |
+| Processing | Dark Purple | `#2d1b69` |
+| Warning | Dark Orange | `#5c3d1a` |
+| Error | Dark Red | `#5c1a1a` |
+| Storage | Dark Teal | `#1a4d4d` |
+
+Keep bright stroke colors for arrows and borders so the diagram still reads clearly.