From 3da703c01b2630ac44e87fcc6e565623f5eda1fe Mon Sep 17 00:00:00 2001 From: ilya-bov <111734093+ilya-bov@users.noreply.github.com> Date: Wed, 25 Feb 2026 16:52:53 +0300 Subject: [PATCH] new skills --- bundled-skills/1password/SKILL.md | 70 - .../1password/references/cli-examples.md | 29 - .../1password/references/get-started.md | 17 - bundled-skills/apple-notes/SKILL.md | 77 - bundled-skills/apple-reminders/SKILL.md | 118 -- bundled-skills/blogwatcher/SKILL.md | 69 - bundled-skills/blucli/SKILL.md | 47 - bundled-skills/clawhub/SKILL.md | 77 - bundled-skills/eightctl/SKILL.md | 50 - bundled-skills/excalidraw/SKILL.md | 248 +++ .../excalidraw/references/best-practices.md | 199 +++ .../excalidraw/references/diagram-patterns.md | 344 +++++ .../references/element-reference.md | 399 +++++ .../excalidraw/references/examples.md | 1365 +++++++++++++++++ bundled-skills/food-order/SKILL.md | 48 - bundled-skills/gog/SKILL.md | 116 -- bundled-skills/goplaces/SKILL.md | 52 - bundled-skills/himalaya/SKILL.md | 257 ---- .../himalaya/references/configuration.md | 184 --- .../references/message-composition.md | 199 --- bundled-skills/peekaboo/SKILL.md | 190 --- bundled-skills/remotion/SKILL.md | 328 ++++ .../remotion/references/components.md | 217 +++ .../references/composition-patterns.md | 144 ++ .../remotion/references/remotion.sh | 98 ++ bundled-skills/sag/SKILL.md | 87 -- bundled-skills/sherpa-onnx-tts/SKILL.md | 103 -- .../sherpa-onnx-tts/bin/sherpa-onnx-tts | 178 --- bundled-skills/songsee/SKILL.md | 49 - bundled-skills/sonoscli/SKILL.md | 46 - bundled-skills/spotify-player/SKILL.md | 64 - bundled-skills/wacli/SKILL.md | 72 - 32 files changed, 3342 insertions(+), 2199 deletions(-) delete mode 100644 bundled-skills/1password/SKILL.md delete mode 100644 bundled-skills/1password/references/cli-examples.md delete mode 100644 bundled-skills/1password/references/get-started.md delete mode 100644 bundled-skills/apple-notes/SKILL.md delete mode 100644 bundled-skills/apple-reminders/SKILL.md delete mode 100644 bundled-skills/blogwatcher/SKILL.md delete mode 100644 bundled-skills/blucli/SKILL.md delete mode 100644 bundled-skills/clawhub/SKILL.md delete mode 100644 bundled-skills/eightctl/SKILL.md create mode 100644 bundled-skills/excalidraw/SKILL.md create mode 100644 bundled-skills/excalidraw/references/best-practices.md create mode 100644 bundled-skills/excalidraw/references/diagram-patterns.md create mode 100644 bundled-skills/excalidraw/references/element-reference.md create mode 100644 bundled-skills/excalidraw/references/examples.md delete mode 100644 bundled-skills/food-order/SKILL.md delete mode 100644 bundled-skills/gog/SKILL.md delete mode 100644 bundled-skills/goplaces/SKILL.md delete mode 100644 bundled-skills/himalaya/SKILL.md delete mode 100644 bundled-skills/himalaya/references/configuration.md delete mode 100644 bundled-skills/himalaya/references/message-composition.md delete mode 100644 bundled-skills/peekaboo/SKILL.md create mode 100644 bundled-skills/remotion/SKILL.md create mode 100644 bundled-skills/remotion/references/components.md create mode 100644 bundled-skills/remotion/references/composition-patterns.md create mode 100644 bundled-skills/remotion/references/remotion.sh delete mode 100644 bundled-skills/sag/SKILL.md delete mode 100644 bundled-skills/sherpa-onnx-tts/SKILL.md delete mode 100755 bundled-skills/sherpa-onnx-tts/bin/sherpa-onnx-tts delete mode 100644 bundled-skills/songsee/SKILL.md delete mode 100644 bundled-skills/sonoscli/SKILL.md delete mode 100644 bundled-skills/spotify-player/SKILL.md delete mode 100644 bundled-skills/wacli/SKILL.md diff --git a/bundled-skills/1password/SKILL.md b/bundled-skills/1password/SKILL.md deleted file mode 100644 index 47cb505..0000000 --- a/bundled-skills/1password/SKILL.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -name: 1password -description: Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op. -homepage: https://developer.1password.com/docs/cli/get-started/ -metadata: - { - "eggent": - { - "emoji": "🔐", - "requires": { "bins": ["op"] }, - "install": - [ - { - "id": "brew", - "kind": "brew", - "formula": "1password-cli", - "bins": ["op"], - "label": "Install 1Password CLI (brew)", - }, - ], - }, - } ---- - -# 1Password CLI - -Follow the official CLI get-started steps. Don't guess install commands. - -## References - -- `references/get-started.md` (install + app integration + sign-in flow) -- `references/cli-examples.md` (real `op` examples) - -## Workflow - -1. Check OS + shell. -2. Verify CLI present: `op --version`. -3. Confirm desktop app integration is enabled (per get-started) and the app is unlocked. -4. REQUIRED: create a fresh tmux session for all `op` commands (no direct `op` calls outside tmux). -5. Sign in / authorize inside tmux: `op signin` (expect app prompt). -6. Verify access inside tmux: `op whoami` (must succeed before any secret read). -7. If multiple accounts: use `--account` or `OP_ACCOUNT`. - -## REQUIRED tmux session (T-Max) - -The shell tool uses a fresh TTY per command. To avoid re-prompts and failures, always run `op` inside a dedicated tmux session with a fresh socket/session name. - -Example (see `tmux` skill for socket conventions, do not reuse old session names): - -```bash -SOCKET_DIR="${eggent_TMUX_SOCKET_DIR:-${CLAWDBOT_TMUX_SOCKET_DIR:-${TMPDIR:-/tmp}/eggent-tmux-sockets}}" -mkdir -p "$SOCKET_DIR" -SOCKET="$SOCKET_DIR/eggent-op.sock" -SESSION="op-auth-$(date +%Y%m%d-%H%M%S)" - -tmux -S "$SOCKET" new -d -s "$SESSION" -n shell -tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op signin --account my.1password.com" Enter -tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op whoami" Enter -tmux -S "$SOCKET" send-keys -t "$SESSION":0.0 -- "op vault list" Enter -tmux -S "$SOCKET" capture-pane -p -J -t "$SESSION":0.0 -S -200 -tmux -S "$SOCKET" kill-session -t "$SESSION" -``` - -## Guardrails - -- Never paste secrets into logs, chat, or code. -- Prefer `op run` / `op inject` over writing secrets to disk. -- If sign-in without app integration is needed, use `op account add`. -- If a command returns "account is not signed in", re-run `op signin` inside tmux and authorize in the app. -- Do not run `op` outside tmux; stop and ask if tmux is unavailable. diff --git a/bundled-skills/1password/references/cli-examples.md b/bundled-skills/1password/references/cli-examples.md deleted file mode 100644 index c8da097..0000000 --- a/bundled-skills/1password/references/cli-examples.md +++ /dev/null @@ -1,29 +0,0 @@ -# op CLI examples (from op help) - -## Sign in - -- `op signin` -- `op signin --account ` - -## Read - -- `op read op://app-prod/db/password` -- `op read "op://app-prod/db/one-time password?attribute=otp"` -- `op read "op://app-prod/ssh key/private key?ssh-format=openssh"` -- `op read --out-file ./key.pem op://app-prod/server/ssh/key.pem` - -## Run - -- `export DB_PASSWORD="op://app-prod/db/password"` -- `op run --no-masking -- printenv DB_PASSWORD` -- `op run --env-file="./.env" -- printenv DB_PASSWORD` - -## Inject - -- `echo "db_password: {{ op://app-prod/db/password }}" | op inject` -- `op inject -i config.yml.tpl -o config.yml` - -## Whoami / accounts - -- `op whoami` -- `op account list` diff --git a/bundled-skills/1password/references/get-started.md b/bundled-skills/1password/references/get-started.md deleted file mode 100644 index 3c60f75..0000000 --- a/bundled-skills/1password/references/get-started.md +++ /dev/null @@ -1,17 +0,0 @@ -# 1Password CLI get-started (summary) - -- Works on macOS, Windows, and Linux. - - macOS/Linux shells: bash, zsh, sh, fish. - - Windows shell: PowerShell. -- Requires a 1Password subscription and the desktop app to use app integration. -- macOS requirement: Big Sur 11.0.0 or later. -- Linux app integration requires PolKit + an auth agent. -- Install the CLI per the official doc for your OS. -- Enable desktop app integration in the 1Password app: - - Open and unlock the app, then select your account/collection. - - macOS: Settings > Developer > Integrate with 1Password CLI (Touch ID optional). - - Windows: turn on Windows Hello, then Settings > Developer > Integrate. - - Linux: Settings > Security > Unlock using system authentication, then Settings > Developer > Integrate. -- After integration, run any command to sign in (example in docs: `op vault list`). -- If multiple accounts: use `op signin` to pick one, or `--account` / `OP_ACCOUNT`. -- For non-integration auth, use `op account add`. diff --git a/bundled-skills/apple-notes/SKILL.md b/bundled-skills/apple-notes/SKILL.md deleted file mode 100644 index edf697b..0000000 --- a/bundled-skills/apple-notes/SKILL.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -name: apple-notes -description: Manage Apple Notes via the `memo` CLI on macOS (create, view, edit, delete, search, move, and export notes). Use when a user asks eggent to add a note, list notes, search notes, or manage note folders. -homepage: https://github.com/antoniorodr/memo -metadata: - { - "eggent": - { - "emoji": "📝", - "os": ["darwin"], - "requires": { "bins": ["memo"] }, - "install": - [ - { - "id": "brew", - "kind": "brew", - "formula": "antoniorodr/memo/memo", - "bins": ["memo"], - "label": "Install memo via Homebrew", - }, - ], - }, - } ---- - -# Apple Notes CLI - -Use `memo notes` to manage Apple Notes directly from the terminal. Create, view, edit, delete, search, move notes between folders, and export to HTML/Markdown. - -Setup - -- Install (Homebrew): `brew tap antoniorodr/memo && brew install antoniorodr/memo/memo` -- Manual (pip): `pip install .` (after cloning the repo) -- macOS-only; if prompted, grant Automation access to Notes.app. - -View Notes - -- List all notes: `memo notes` -- Filter by folder: `memo notes -f "Folder Name"` -- Search notes (fuzzy): `memo notes -s "query"` - -Create Notes - -- Add a new note: `memo notes -a` - - Opens an interactive editor to compose the note. -- Quick add with title: `memo notes -a "Note Title"` - -Edit Notes - -- Edit existing note: `memo notes -e` - - Interactive selection of note to edit. - -Delete Notes - -- Delete a note: `memo notes -d` - - Interactive selection of note to delete. - -Move Notes - -- Move note to folder: `memo notes -m` - - Interactive selection of note and destination folder. - -Export Notes - -- Export to HTML/Markdown: `memo notes -ex` - - Exports selected note; uses Mistune for markdown processing. - -Limitations - -- Cannot edit notes containing images or attachments. -- Interactive prompts may require terminal access. - -Notes - -- macOS-only. -- Requires Apple Notes.app to be accessible. -- For automation, grant permissions in System Settings > Privacy & Security > Automation. diff --git a/bundled-skills/apple-reminders/SKILL.md b/bundled-skills/apple-reminders/SKILL.md deleted file mode 100644 index 7e7938c..0000000 --- a/bundled-skills/apple-reminders/SKILL.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -name: apple-reminders -description: Manage Apple Reminders via remindctl CLI (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output. -homepage: https://github.com/steipete/remindctl -metadata: - { - "eggent": - { - "emoji": "⏰", - "os": ["darwin"], - "requires": { "bins": ["remindctl"] }, - "install": - [ - { - "id": "brew", - "kind": "brew", - "formula": "steipete/tap/remindctl", - "bins": ["remindctl"], - "label": "Install remindctl via Homebrew", - }, - ], - }, - } ---- - -# Apple Reminders CLI (remindctl) - -Use `remindctl` to manage Apple Reminders directly from the terminal. - -## When to Use - -✅ **USE this skill when:** - -- User explicitly mentions "reminder" or "Reminders app" -- Creating personal to-dos with due dates that sync to iOS -- Managing Apple Reminders lists -- User wants tasks to appear in their iPhone/iPad Reminders app - -## When NOT to Use - -❌ **DON'T use this skill when:** - -- Scheduling Clawdbot tasks or alerts → use `cron` tool with systemEvent instead -- Calendar events or appointments → use Apple Calendar -- Project/work task management → use Notion, GitHub Issues, or task queue -- One-time notifications → use `cron` tool for timed alerts -- User says "remind me" but means a Clawdbot alert → clarify first - -## Setup - -- Install: `brew install steipete/tap/remindctl` -- macOS-only; grant Reminders permission when prompted -- Check status: `remindctl status` -- Request access: `remindctl authorize` - -## Common Commands - -### View Reminders - -```bash -remindctl # Today's reminders -remindctl today # Today -remindctl tomorrow # Tomorrow -remindctl week # This week -remindctl overdue # Past due -remindctl all # Everything -remindctl 2026-01-04 # Specific date -``` - -### Manage Lists - -```bash -remindctl list # List all lists -remindctl list Work # Show specific list -remindctl list Projects --create # Create list -remindctl list Work --delete # Delete list -``` - -### Create Reminders - -```bash -remindctl add "Buy milk" -remindctl add --title "Call mom" --list Personal --due tomorrow -remindctl add --title "Meeting prep" --due "2026-02-15 09:00" -``` - -### Complete/Delete - -```bash -remindctl complete 1 2 3 # Complete by ID -remindctl delete 4A83 --force # Delete by ID -``` - -### Output Formats - -```bash -remindctl today --json # JSON for scripting -remindctl today --plain # TSV format -remindctl today --quiet # Counts only -``` - -## Date Formats - -Accepted by `--due` and date filters: - -- `today`, `tomorrow`, `yesterday` -- `YYYY-MM-DD` -- `YYYY-MM-DD HH:mm` -- ISO 8601 (`2026-01-04T12:34:56Z`) - -## Example: Clarifying User Intent - -User: "Remind me to check on the deploy in 2 hours" - -**Ask:** "Do you want this in Apple Reminders (syncs to your phone) or as a Clawdbot alert (I'll message you here)?" - -- Apple Reminders → use this skill -- Clawdbot alert → use `cron` tool with systemEvent diff --git a/bundled-skills/blogwatcher/SKILL.md b/bundled-skills/blogwatcher/SKILL.md deleted file mode 100644 index df016fc..0000000 --- a/bundled-skills/blogwatcher/SKILL.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -name: blogwatcher -description: Monitor blogs and RSS/Atom feeds for updates using the blogwatcher CLI. -homepage: https://github.com/Hyaxia/blogwatcher -metadata: - { - "eggent": - { - "emoji": "📰", - "requires": { "bins": ["blogwatcher"] }, - "install": - [ - { - "id": "go", - "kind": "go", - "module": "github.com/Hyaxia/blogwatcher/cmd/blogwatcher@latest", - "bins": ["blogwatcher"], - "label": "Install blogwatcher (go)", - }, - ], - }, - } ---- - -# blogwatcher - -Track blog and RSS/Atom feed updates with the `blogwatcher` CLI. - -Install - -- Go: `go install github.com/Hyaxia/blogwatcher/cmd/blogwatcher@latest` - -Quick start - -- `blogwatcher --help` - -Common commands - -- Add a blog: `blogwatcher add "My Blog" https://example.com` -- List blogs: `blogwatcher blogs` -- Scan for updates: `blogwatcher scan` -- List articles: `blogwatcher articles` -- Mark an article read: `blogwatcher read 1` -- Mark all articles read: `blogwatcher read-all` -- Remove a blog: `blogwatcher remove "My Blog"` - -Example output - -``` -$ blogwatcher blogs -Tracked blogs (1): - - xkcd - URL: https://xkcd.com -``` - -``` -$ blogwatcher scan -Scanning 1 blog(s)... - - xkcd - Source: RSS | Found: 4 | New: 4 - -Found 4 new article(s) total! -``` - -Notes - -- Use `blogwatcher --help` to discover flags and options. diff --git a/bundled-skills/blucli/SKILL.md b/bundled-skills/blucli/SKILL.md deleted file mode 100644 index 77af0d4..0000000 --- a/bundled-skills/blucli/SKILL.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -name: blucli -description: BluOS CLI (blu) for discovery, playback, grouping, and volume. -homepage: https://blucli.sh -metadata: - { - "eggent": - { - "emoji": "🫐", - "requires": { "bins": ["blu"] }, - "install": - [ - { - "id": "go", - "kind": "go", - "module": "github.com/steipete/blucli/cmd/blu@latest", - "bins": ["blu"], - "label": "Install blucli (go)", - }, - ], - }, - } ---- - -# blucli (blu) - -Use `blu` to control Bluesound/NAD players. - -Quick start - -- `blu devices` (pick target) -- `blu --device status` -- `blu play|pause|stop` -- `blu volume set 15` - -Target selection (in priority order) - -- `--device ` -- `BLU_DEVICE` -- config default (if set) - -Common tasks - -- Grouping: `blu group status|add|remove` -- TuneIn search/play: `blu tunein search "query"`, `blu tunein play "query"` - -Prefer `--json` for scripts. Confirm the target device before changing playback. diff --git a/bundled-skills/clawhub/SKILL.md b/bundled-skills/clawhub/SKILL.md deleted file mode 100644 index 593de2a..0000000 --- a/bundled-skills/clawhub/SKILL.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -name: clawhub -description: Use the ClawHub CLI to search, install, update, and publish agent skills from clawhub.com. Use when you need to fetch new skills on the fly, sync installed skills to latest or a specific version, or publish new/updated skill folders with the npm-installed clawhub CLI. -metadata: - { - "eggent": - { - "requires": { "bins": ["clawhub"] }, - "install": - [ - { - "id": "node", - "kind": "node", - "package": "clawhub", - "bins": ["clawhub"], - "label": "Install ClawHub CLI (npm)", - }, - ], - }, - } ---- - -# ClawHub CLI - -Install - -```bash -npm i -g clawhub -``` - -Auth (publish) - -```bash -clawhub login -clawhub whoami -``` - -Search - -```bash -clawhub search "postgres backups" -``` - -Install - -```bash -clawhub install my-skill -clawhub install my-skill --version 1.2.3 -``` - -Update (hash-based match + upgrade) - -```bash -clawhub update my-skill -clawhub update my-skill --version 1.2.3 -clawhub update --all -clawhub update my-skill --force -clawhub update --all --no-input --force -``` - -List - -```bash -clawhub list -``` - -Publish - -```bash -clawhub publish ./my-skill --slug my-skill --name "My Skill" --version 1.2.0 --changelog "Fixes + docs" -``` - -Notes - -- Default registry: https://clawhub.com (override with CLAWHUB_REGISTRY or --registry) -- Default workdir: cwd (falls back to eggent workspace); install dir: ./skills (override with --workdir / --dir / CLAWHUB_WORKDIR) -- Update command hashes local files, resolves matching version, and upgrades to latest unless --version is set diff --git a/bundled-skills/eightctl/SKILL.md b/bundled-skills/eightctl/SKILL.md deleted file mode 100644 index 728cb6f..0000000 --- a/bundled-skills/eightctl/SKILL.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -name: eightctl -description: Control Eight Sleep pods (status, temperature, alarms, schedules). -homepage: https://eightctl.sh -metadata: - { - "eggent": - { - "emoji": "🎛️", - "requires": { "bins": ["eightctl"] }, - "install": - [ - { - "id": "go", - "kind": "go", - "module": "github.com/steipete/eightctl/cmd/eightctl@latest", - "bins": ["eightctl"], - "label": "Install eightctl (go)", - }, - ], - }, - } ---- - -# eightctl - -Use `eightctl` for Eight Sleep pod control. Requires auth. - -Auth - -- Config: `~/.config/eightctl/config.yaml` -- Env: `EIGHTCTL_EMAIL`, `EIGHTCTL_PASSWORD` - -Quick start - -- `eightctl status` -- `eightctl on|off` -- `eightctl temp 20` - -Common tasks - -- Alarms: `eightctl alarm list|create|dismiss` -- Schedules: `eightctl schedule list|create|update` -- Audio: `eightctl audio state|play|pause` -- Base: `eightctl base info|angle` - -Notes - -- API is unofficial and rate-limited; avoid repeated logins. -- Confirm before changing temperature or alarms. diff --git a/bundled-skills/excalidraw/SKILL.md b/bundled-skills/excalidraw/SKILL.md new file mode 100644 index 0000000..e06e8b1 --- /dev/null +++ b/bundled-skills/excalidraw/SKILL.md @@ -0,0 +1,248 @@ +--- +name: excalidraw +description: Create and edit Excalidraw diagrams programmatically. Use when the user asks to create diagrams, flowcharts, architecture diagrams, wireframes, or any visual drawings in Excalidraw format (.excalidraw files). +--- + +# Excalidraw Diagram Creation + +This skill enables you to create beautiful, hand-drawn style diagrams in the Excalidraw JSON format. + +## File Format Overview + +Excalidraw files (`.excalidraw`) are JSON with this structure: + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": [], + "appState": { + "viewBackgroundColor": "#ffffff", + "gridSize": null + }, + "files": {} +} +``` + +## Quick Start - Creating Elements + +Every element needs at minimum: `type`, `id`, `x`, `y`, and styling properties. + +### Minimal Rectangle +```json +{ + "type": "rectangle", + "id": "rect-1", + "x": 100, + "y": 100, + "width": 200, + "height": 100, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1234, + "version": 1, + "versionNonce": 1234, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "roundness": { "type": 3 } +} +``` + +### Text Element +```json +{ + "type": "text", + "id": "text-1", + "x": 120, + "y": 130, + "width": 160, + "height": 25, + "text": "Hello World", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 5678, + "version": 1, + "versionNonce": 5678, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Hello World", + "autoResize": true, + "lineHeight": 1.25 +} +``` + +### Arrow Element +```json +{ + "type": "arrow", + "id": "arrow-1", + "x": 300, + "y": 150, + "width": 100, + "height": 0, + "points": [[0, 0], [100, 0]], + "startArrowhead": null, + "endArrowhead": "arrow", + "startBinding": null, + "endBinding": null, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 9012, + "version": 1, + "versionNonce": 9012, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false +} +``` + +## Element Types + +| Type | Use For | +|------|---------| +| `rectangle` | Boxes, containers, cards | +| `ellipse` | Circles, ovals, nodes | +| `diamond` | Decision points, conditions | +| `text` | Labels, descriptions | +| `arrow` | Connections, flow direction | +| `line` | Connectors without arrowheads | +| `freedraw` | Hand-drawn paths | +| `image` | Embedded images | +| `frame` | Grouping/framing elements | + +## Color Palette (Recommended) + +### Backgrounds +- `#a5d8ff` - Light blue +- `#b2f2bb` - Light green +- `#ffec99` - Light yellow +- `#ffc9c9` - Light red/pink +- `#e9ecef` - Light gray +- `#d0bfff` - Light purple +- `#99e9f2` - Light cyan + +### Strokes +- `#1e1e1e` - Default black +- `#1971c2` - Blue +- `#2f9e44` - Green +- `#f08c00` - Orange +- `#e03131` - Red +- `#9c36b5` - Purple + +## Styling Properties + +| Property | Values | Description | +|----------|--------|-------------| +| `fillStyle` | `"solid"`, `"hachure"`, `"cross-hatch"` | Fill pattern | +| `strokeWidth` | `1`, `2`, `4` | Line thickness | +| `strokeStyle` | `"solid"`, `"dashed"`, `"dotted"` | Line style | +| `roughness` | `0`, `1`, `2` | Hand-drawn feel (0=smooth, 2=rough) | +| `opacity` | `0-100` | Transparency | +| `roundness` | `{ "type": 3 }` | Rounded corners | + +## Connecting Elements with Arrows + +To connect shapes with arrows, use bindings: + +```json +{ + "type": "arrow", + "id": "arrow-1", + "startBinding": { + "elementId": "rect-1", + "focus": 0, + "gap": 5 + }, + "endBinding": { + "elementId": "rect-2", + "focus": 0, + "gap": 5 + }, + "points": [[0, 0], [200, 0]] +} +``` + +Also add `boundElements` to the connected shapes: +```json +{ + "type": "rectangle", + "id": "rect-1", + "boundElements": [{ "id": "arrow-1", "type": "arrow" }] +} +``` + +## Font Families + +| Value | Font | +|-------|------| +| `1` | Hand-drawn (Virgil) | +| `2` | Normal (Helvetica) | +| `3` | Code (Cascadia) | + +## Best Practices + +1. **Generate unique IDs** - Use descriptive prefixes like `rect-1`, `arrow-2`, `text-header` +2. **Use random seeds** - Each element needs a unique `seed` for consistent rendering +3. **Space elements well** - Leave 50-100px between elements +4. **Align elements** - Use consistent x/y coordinates for visual alignment +5. **Group related items** - Use matching `groupIds` arrays +6. **Use the color palette** - Stick to Excalidraw's built-in colors for consistency + +## Diagram Types You Can Create + +| Type | Description | +|------|-------------| +| **Flowcharts** | Process flows, algorithms, decision trees | +| **Sequence Diagrams** | API calls, user interactions, message flows | +| **Architecture Diagrams** | System design, microservices, infrastructure | +| **Mind Maps** | Brainstorming, concept mapping, idea organization | +| **Data Flow Diagrams** | Data movement, system analysis | +| **ERD** | Database schemas, entity relationships | +| **Wireframes** | UI mockups, layout sketches | + +## Reference Documentation + +- **[diagram-patterns.md](diagram-patterns.md)** - Professional patterns for each diagram type (flowcharts, sequence diagrams, mind maps, architecture, etc.) +- **[examples.md](examples.md)** - Complete working JSON examples you can use as templates +- **[element-reference.md](element-reference.md)** - Full property reference for all element types +- **[best-practices.md](best-practices.md)** - Design tips, color theory, typography guidelines + +## Quick Tips for Beautiful Diagrams + +1. **Use `roughness: 0`** for formal/technical diagrams, `roughness: 1` for friendly sketches +2. **Use `fontFamily: 2`** (Helvetica) for professional look, `fontFamily: 1` (Virgil) only when casual look is requested +3. **Consistent spacing** - 100px between major elements, 50px for related items +4. **Color semantics** - Blue for info/input, Green for success/data, Yellow for decisions, Red for errors +5. **Arrow conventions** - Solid for actions, Dashed for responses/async \ No newline at end of file diff --git a/bundled-skills/excalidraw/references/best-practices.md b/bundled-skills/excalidraw/references/best-practices.md new file mode 100644 index 0000000..b6d7b2b --- /dev/null +++ b/bundled-skills/excalidraw/references/best-practices.md @@ -0,0 +1,199 @@ +# Excalidraw Design Best Practices + +Guidelines for creating beautiful, professional-looking diagrams. + +## Layout Principles + +### Alignment +- Align elements on a grid (mentally or using coordinates) +- Keep consistent horizontal/vertical spacing between related elements +- Use multiples of 50px for spacing: 50, 100, 150, 200 + +### Hierarchy +- Larger elements = more important +- Use color to show relationships +- Group related items visually and with `groupIds` + +### Flow Direction +- Left-to-right for processes/time +- Top-to-bottom for hierarchies +- Consistent arrow direction within a diagram + +## Color Usage + +### The 60-30-10 Rule +- **60%** - Background/white space +- **30%** - Primary accent color (main boxes) +- **10%** - Secondary accent (highlights, important items) + +### Semantic Colors +| Color | Meaning | Hex Background | Hex Stroke | +|-------|---------|----------------|------------| +| Blue | Information, input, user | `#a5d8ff` | `#1971c2` | +| Green | Success, output, database | `#b2f2bb` | `#2f9e44` | +| Yellow | Warning, decision, process | `#ffec99` | `#f08c00` | +| Red | Error, danger, stop | `#ffc9c9` | `#e03131` | +| Purple | External, storage, special | `#d0bfff` | `#9c36b5` | +| Gray | Neutral, disabled, notes | `#e9ecef` | `#868e96` | + +### Monochromatic Schemes +For minimal, professional looks: +- All shapes: `#e9ecef` background, `#1e1e1e` stroke +- Important items: `#a5d8ff` background +- Keep most elements neutral + +## Typography + +### Font Size Guidelines +| Use Case | Size | +|----------|------| +| Main titles | 28-36 | +| Section headers | 24 | +| Box labels | 20 | +| Descriptions | 16 | +| Notes/annotations | 14 | +| Fine print | 12 | + +### Font Family Choices +- **Virgil (1)** - Default hand-drawn, casual, friendly +- **Helvetica (2)** - Clean, professional, formal +- **Cascadia (3)** - Code, technical specs, monospace + +Do not use Virgil unless asked for a casual look. + +### Text in Containers +- Center text horizontally and vertically +- Keep text concise (2-4 words per line) +- Use `\n` for multi-line text + +## Shape Selection + +### When to Use Each Shape + +| Shape | Best For | +|-------|----------| +| **Rectangle** | Processes, services, containers, generic boxes | +| **Rounded Rectangle** | Buttons, cards, user-friendly elements | +| **Ellipse** | Start/end points, databases, data stores | +| **Diamond** | Decisions, conditions, branching logic | + +### Shape Sizing +- Minimum: 80x60 for shapes with text +- Standard: 120x80 for process boxes +- Large: 160x100+ for containers with descriptions + +## Arrow Best Practices + +### Arrow Types by Usage +| Style | Use | +|-------|-----| +| Solid arrow | Primary flow, main sequence | +| Dashed arrow | Response, return, optional | +| Dotted arrow | Reference, dependency | +| No arrowhead (line) | Association, grouping | + +### Arrow Routing +- Prefer horizontal or vertical arrows +- Avoid diagonal arrows when possible +- Use elbow connectors (L-shaped points) for complex routing +- Keep arrows from crossing when possible + +### Binding Arrows +Always bind arrows to shapes when possible: +```json +"startBinding": { "elementId": "shape-id", "focus": 0, "gap": 5 } +``` +This makes diagrams update automatically when shapes move. + +## Diagram-Specific Tips + +### Flowcharts +1. Start with ellipse (Start) +2. Use rectangles for processes +3. Use diamonds for decisions +4. Label arrows from decisions (Yes/No) +5. End with ellipse (End) +6. Flow top-to-bottom or left-to-right + +### Architecture Diagrams +1. Group related services +2. Use color to show tiers (frontend, backend, data) +3. Label connections with protocols (HTTP, gRPC, SQL) +4. Include a legend if using many colors +5. Show boundaries with frames or large rectangles + +### Sequence Diagrams +1. Actors at top as rectangles +2. Vertical dashed lines (lifelines) +3. Horizontal arrows for messages +4. Number messages in order +5. Dashed arrows for responses + +### Entity Relationship Diagrams +1. Rectangles for entities +2. Include key fields as text +3. Lines for relationships +4. Label cardinality (1:N, M:N) + +## Roughness Settings + +| Value | Effect | Use When | +|-------|--------|----------| +| `0` | Clean, precise lines | Formal docs, technical specs | +| `1` | Slightly hand-drawn | Default, balanced look | +| `2` | Very sketchy | Brainstorming, informal | + +Tip: Use `roughness: 0` for all technical documentation. + +## Common Mistakes to Avoid + +1. **Too many colors** - Stick to 2-3 accent colors max +2. **Inconsistent spacing** - Use the same gap everywhere +3. **Tiny text** - Minimum 14px for readability +4. **Unlabeled arrows** - Add labels for complex flows +5. **Crowded layouts** - Leave whitespace, spread out +6. **Missing legend** - Add one if using color/shape coding +7. **Crossed arrows** - Reroute to avoid crossings +8. **Inconsistent shapes** - Same concept = same shape type + +## Quick Reference: Professional Template + +For a clean, professional look: +```json +{ + "strokeColor": "#1e1e1e", + "backgroundColor": "#e9ecef", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 0, + "opacity": 100, + "fontFamily": 2, + "fontSize": 16 +} +``` + +For highlighted/important elements: +```json +{ + "backgroundColor": "#a5d8ff", + "strokeColor": "#1971c2" +} +``` + +## Responsive Sizing + +When creating diagrams that might be viewed at different sizes: + +- Use relative positioning (elements spaced proportionally) +- Minimum canvas size: 600x400 +- Standard canvas: 800x600 +- Large/complex: 1200x800+ + +## Testing Your Diagrams + +1. Paste JSON into [excalidraw.com](https://excalidraw.com) +2. Check for visual issues +3. Verify all text is readable +4. Ensure arrows point correctly +5. Test zooming in/out \ No newline at end of file diff --git a/bundled-skills/excalidraw/references/diagram-patterns.md b/bundled-skills/excalidraw/references/diagram-patterns.md new file mode 100644 index 0000000..73c9779 --- /dev/null +++ b/bundled-skills/excalidraw/references/diagram-patterns.md @@ -0,0 +1,344 @@ +# Professional Diagram Patterns + +Patterns and techniques for creating beautiful, professional diagrams based on Excalidraw best practices. + +## Flowcharts + +### Standard Flowchart Symbols +| Shape | Meaning | Excalidraw Type | +|-------|---------|-----------------| +| Rounded rectangle | Start/End (Terminal) | `rectangle` with `roundness` | +| Rectangle | Process/Action | `rectangle` | +| Diamond | Decision | `diamond` | +| Parallelogram | Input/Output | `rectangle` rotated or use lines | +| Circle | Connector/Reference | `ellipse` | + +### Swimlane Flowcharts +Organize by responsibility using frames or colored regions: + +``` +┌─────────────────┬─────────────────┬─────────────────┐ +│ User │ System │ Database │ +├─────────────────┼─────────────────┼─────────────────┤ +│ ┌─────────┐ │ │ │ +│ │ Request │────┼──►┌─────────┐ │ │ +│ └─────────┘ │ │ Process │───┼──►┌─────────┐ │ +│ │ └─────────┘ │ │ Query │ │ +│ │ │ └─────────┘ │ +└─────────────────┴─────────────────┴─────────────────┘ +``` + +**Implementation tips:** +- Use large rectangles with `backgroundColor: "transparent"` and `strokeStyle: "dashed"` for lanes +- Add lane headers at top with bold text +- Keep elements within their lanes +- Horizontal arrows cross lane boundaries + +### Color Coding for Flowcharts +- Start/End: `#b2f2bb` (green) +- Process: `#a5d8ff` (blue) +- Decision: `#ffec99` (yellow) +- Error/Exception: `#ffc9c9` (red) + +--- + +## Sequence Diagrams + +### Core Components + +**1. Actors/Participants (top row)** +```json +{ + "type": "rectangle", + "backgroundColor": "#a5d8ff", + "width": 100, + "height": 50, + "roundness": { "type": 3 } +} +``` + +**2. Lifelines (vertical dashed lines)** +```json +{ + "type": "line", + "strokeStyle": "dashed", + "strokeWidth": 1, + "roughness": 0, + "points": [[0, 0], [0, 400]] +} +``` + +**3. Synchronous Messages (solid arrows)** +```json +{ + "type": "arrow", + "strokeStyle": "solid", + "endArrowhead": "arrow" +} +``` + +**4. Asynchronous Messages (dashed arrows)** +```json +{ + "type": "arrow", + "strokeStyle": "dashed", + "endArrowhead": "arrow" +} +``` + +**5. Return Messages (dashed, pointing back)** +```json +{ + "type": "arrow", + "strokeStyle": "dashed", + "strokeColor": "#868e96", + "endArrowhead": "arrow" +} +``` + +**6. Activation Boxes (thin rectangles on lifelines)** +```json +{ + "type": "rectangle", + "width": 16, + "height": 80, + "backgroundColor": "#e9ecef", + "strokeWidth": 1 +} +``` + +### Sequence Diagram Layout +``` + User Auth Database + │ │ │ + │───Login────►│ │ + │ │──Query User──►│ + │ │◄──User Data───│ + │◄──Token─────│ │ + │ │ │ +``` + +- Spacing: 200px between participants +- Message vertical spacing: 50-80px +- Label messages above arrows +- Number messages for complex flows: "1. Login", "2. Verify", etc. + +--- + +## Mind Maps + +### Radial Layout Pattern +Central idea with branches radiating outward: + +``` + ┌─────────┐ + │ Topic A │ + └────┬────┘ + │ + ┌────────────────┼────────────────┐ + │ │ │ + ┌────┴────┐ ┌─────┴─────┐ ┌────┴────┐ + │ Sub 1 │ │ CENTRAL │ │ Sub 2 │ + └─────────┘ │ IDEA │ └─────────┘ + └─────┬─────┘ + │ + ┌────┴────┐ + │ Topic B │ + └─────────┘ +``` + +### Mind Map Color Strategy +- Center: Bold color (`#228be6` blue or `#7950f2` purple) +- Level 1 branches: Distinct colors for each +- Level 2+: Lighter shades of parent color + +### Branch Styling +- Use curved lines (multiple points) for organic feel +- Thicker lines closer to center (`strokeWidth: 4` → `2` → `1`) +- Branches spread at 45-60° angles + +### Mind Map Element Sizes +| Level | Font Size | Shape Size | Stroke Width | +|-------|-----------|------------|--------------| +| Center | 28-36 | 180x100 | 4 | +| Level 1 | 20-24 | 140x70 | 2 | +| Level 2 | 16-18 | 100x50 | 2 | +| Level 3 | 14-16 | 80x40 | 1 | + +--- + +## Software Architecture Diagrams + +### Layered Architecture +Stack components vertically with clear boundaries: + +``` +┌─────────────────────────────────────────┐ +│ Presentation Layer │ +│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ +│ │ Web │ │ Mobile │ │ API │ │ +│ └─────────┘ └─────────┘ └─────────┘ │ +├─────────────────────────────────────────┤ +│ Business Layer │ +│ ┌─────────────────────────────────┐ │ +│ │ Service Logic │ │ +│ └─────────────────────────────────┘ │ +├─────────────────────────────────────────┤ +│ Data Layer │ +│ ┌─────────┐ ┌─────────┐ │ +│ │ DB │ │ Cache │ │ +│ └─────────┘ └─────────┘ │ +└─────────────────────────────────────────┘ +``` + +**Layer colors (top to bottom):** +- Presentation: `#a5d8ff` (blue) +- Business: `#b2f2bb` (green) +- Data: `#d0bfff` (purple) + +### Microservices Pattern +Independent services with API gateway: + +``` + ┌─────────────┐ + │ Clients │ + └──────┬──────┘ + │ + ┌──────┴──────┐ + │ API Gateway │ + └──────┬──────┘ + ┌───────────────┼───────────────┐ + │ │ │ + ┌──────┴──────┐ ┌──────┴──────┐ ┌──────┴──────┐ + │ Service A │ │ Service B │ │ Service C │ + └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ + │ │ │ + ┌──────┴──────┐ ┌──────┴──────┐ ┌──────┴──────┐ + │ DB A │ │ DB B │ │ DB C │ + └─────────────┘ └─────────────┘ └─────────────┘ +``` + +### Component Shapes by Type +| Component | Shape | Color | +|-----------|-------|-------| +| User/Client | Ellipse or stick figure | `#a5d8ff` | +| Service/API | Rectangle | `#b2f2bb` | +| Database | Ellipse (cylinder look) | `#d0bfff` | +| Queue/Message | Rectangle with wavy side | `#ffec99` | +| External System | Rectangle with double border | `#e9ecef` | +| Load Balancer | Diamond | `#99e9f2` | + +--- + +## Data Flow Diagrams (DFD) + +### Yourdon-Coad Notation +| Symbol | Meaning | Excalidraw | +|--------|---------|------------| +| Circle | Process | `ellipse` | +| Rectangle | External Entity | `rectangle` | +| Open Rectangle | Data Store | `rectangle` without one side (use lines) | +| Arrow | Data Flow | `arrow` | + +### Gane-Sarson Notation +| Symbol | Meaning | Excalidraw | +|--------|---------|------------| +| Rounded Rectangle | Process | `rectangle` with `roundness` | +| Rectangle | External Entity | `rectangle` | +| Open Rectangle | Data Store | Same as above | +| Arrow | Data Flow | `arrow` | + +### DFD Levels +- **Context (Level 0)**: Single process, external entities only +- **Level 1**: Main processes, data stores appear +- **Level 2+**: Detailed sub-processes + +### DFD Layout Tips +- External entities at edges +- Processes in center +- Data stores between related processes +- Label every arrow with data name + +--- + +## Entity Relationship Diagrams + +### ER Notation +``` +┌─────────────┐ ┌─────────────┐ +│ ENTITY │ │ ENTITY │ +├─────────────┤ ├─────────────┤ +│ attribute1 │─────────│ attribute1 │ +│ attribute2 │ 1:N │ attribute2 │ +│ *key* │ │ *key* │ +└─────────────┘ └─────────────┘ +``` + +### Cardinality Notation +Use text labels or crow's foot: +- `1` - One +- `N` or `*` - Many +- `0..1` - Zero or one +- `1..*` - One or more + +--- + +## Common Professional Patterns + +### Consistent Styling Rules +1. **All diagrams**: `roughness: 1`, `strokeWidth: 2` +2. **Formal/technical**: `roughness: 0`, `fontFamily: 2` (Helvetica) +3. **Casual/brainstorm**: `roughness: 2`, `fontFamily: 1` (Virgil) + +### Visual Hierarchy +``` +Title (36px, bold stroke) + │ + ├── Primary Elements (20px, colored backgrounds) + │ │ + │ └── Secondary Elements (16px, lighter colors) + │ │ + │ └── Details (14px, gray text) + │ + └── Annotations (12px, dashed borders) +``` + +### Arrow Conventions +| Style | Meaning | +|-------|---------| +| Solid + arrow | Primary flow, action | +| Dashed + arrow | Response, return, async | +| Solid + no head | Association, relationship | +| Dotted + arrow | Optional, reference | +| Thick solid | Main/critical path | + +### Professional Color Combinations + +**Corporate/Formal:** +- Primary: `#228be6` (blue) +- Secondary: `#868e96` (gray) +- Background: `#f8f9fa` + +**Friendly/Startup:** +- Primary: `#7950f2` (purple) +- Secondary: `#20c997` (teal) +- Accent: `#ff922b` (orange) + +**Technical/Engineering:** +- Primary: `#1e1e1e` (black) +- Background: `#e9ecef` (light gray) +- Accent: `#228be6` (blue) + +--- + +## Quick Reference: Diagram Types + +| Diagram Type | Key Shapes | Flow Direction | Best For | +|--------------|------------|----------------|----------| +| Flowchart | Rectangle, Diamond | Top→Bottom | Processes, algorithms | +| Sequence | Rectangle, Lines, Arrows | Left→Right time | Interactions, APIs | +| Mind Map | Ellipse, Lines | Center→Out | Brainstorming, concepts | +| Architecture | Rectangles, Layers | Top→Bottom | Systems, infrastructure | +| DFD | Circles, Rectangles | Various | Data movement | +| ERD | Rectangles, Lines | N/A | Database design | +| Wireframe | Rectangles, Text | N/A | UI/UX design | \ No newline at end of file diff --git a/bundled-skills/excalidraw/references/element-reference.md b/bundled-skills/excalidraw/references/element-reference.md new file mode 100644 index 0000000..7c2c487 --- /dev/null +++ b/bundled-skills/excalidraw/references/element-reference.md @@ -0,0 +1,399 @@ +# Excalidraw Element Reference + +Complete property reference for all Excalidraw element types. + +## Common Properties (All Elements) + +Every element must include these properties: + +```json +{ + "id": "unique-id", + "type": "rectangle", + "x": 0, + "y": 0, + "width": 100, + "height": 100, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 12345, + "version": 1, + "versionNonce": 12345, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false +} +``` + +### Property Details + +| Property | Type | Description | +|----------|------|-------------| +| `id` | string | Unique identifier. Use descriptive names like `"header-box"` | +| `type` | string | Element type (see types below) | +| `x` | number | X coordinate (left edge) | +| `y` | number | Y coordinate (top edge) | +| `width` | number | Width in pixels | +| `height` | number | Height in pixels | +| `angle` | number | Rotation in radians (0 = no rotation) | +| `strokeColor` | string | Border/line color (hex) | +| `backgroundColor` | string | Fill color (hex or `"transparent"`) | +| `fillStyle` | string | `"solid"`, `"hachure"`, `"cross-hatch"` | +| `strokeWidth` | number | `1` (thin), `2` (medium), `4` (bold) | +| `strokeStyle` | string | `"solid"`, `"dashed"`, `"dotted"` | +| `roughness` | number | `0` (architect), `1` (artist), `2` (cartoonist) | +| `opacity` | number | 0-100 (100 = fully opaque) | +| `seed` | number | Random seed for hand-drawn rendering | +| `version` | number | Element version (start at 1) | +| `versionNonce` | number | Random nonce for version | +| `isDeleted` | boolean | Soft delete flag (use `false`) | +| `groupIds` | array | IDs of groups this element belongs to | +| `boundElements` | array/null | Elements bound to this (arrows, text) | +| `link` | string/null | URL link attached to element | +| `locked` | boolean | Prevent editing | + +--- + +## Rectangle + +```json +{ + "type": "rectangle", + "id": "rect-1", + "x": 100, + "y": 100, + "width": 200, + "height": 100, + "roundness": { "type": 3 }, + ... common properties +} +``` + +### Rectangle-Specific Properties + +| Property | Type | Description | +|----------|------|-------------| +| `roundness` | object/null | `{ "type": 3 }` for rounded corners, `null` for sharp | + +--- + +## Ellipse + +```json +{ + "type": "ellipse", + "id": "ellipse-1", + "x": 100, + "y": 100, + "width": 150, + "height": 150, + ... common properties +} +``` + +Note: For a perfect circle, set `width` equal to `height`. + +--- + +## Diamond + +```json +{ + "type": "diamond", + "id": "diamond-1", + "x": 100, + "y": 100, + "width": 120, + "height": 120, + ... common properties +} +``` + +Diamonds are rotated squares - useful for decision nodes in flowcharts. + +--- + +## Text + +```json +{ + "type": "text", + "id": "text-1", + "x": 100, + "y": 100, + "width": 200, + "height": 50, + "text": "Your text here", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "left", + "verticalAlign": "top", + "containerId": null, + "originalText": "Your text here", + "autoResize": true, + "lineHeight": 1.25, + ... common properties +} +``` + +### Text-Specific Properties + +| Property | Type | Values | +|----------|------|--------| +| `text` | string | The displayed text (supports `\n` for newlines) | +| `fontSize` | number | Common: `16`, `20`, `28`, `36` | +| `fontFamily` | number | `1` (Virgil/hand), `2` (Helvetica), `3` (Cascadia/code) | +| `textAlign` | string | `"left"`, `"center"`, `"right"` | +| `verticalAlign` | string | `"top"`, `"middle"` | +| `containerId` | string/null | ID of container element (for bound text) | +| `originalText` | string | Original text (same as `text` unless edited) | +| `autoResize` | boolean | Auto-resize container to fit | +| `lineHeight` | number | Line spacing multiplier (default: 1.25) | + +--- + +## Arrow + +```json +{ + "type": "arrow", + "id": "arrow-1", + "x": 100, + "y": 100, + "width": 200, + "height": 0, + "points": [[0, 0], [200, 0]], + "startArrowhead": null, + "endArrowhead": "arrow", + "startBinding": null, + "endBinding": null, + ... common properties +} +``` + +### Arrow-Specific Properties + +| Property | Type | Description | +|----------|------|-------------| +| `points` | array | Array of [x, y] points relative to element origin | +| `startArrowhead` | string/null | `null`, `"arrow"`, `"bar"`, `"dot"`, `"triangle"` | +| `endArrowhead` | string/null | `null`, `"arrow"`, `"bar"`, `"dot"`, `"triangle"` | +| `startBinding` | object/null | Binding to start element | +| `endBinding` | object/null | Binding to end element | + +### Arrow Points + +Points are relative to the arrow's x, y position: +- First point is always `[0, 0]` +- Subsequent points define the path +- Width/height should match the bounding box of points + +```json +// Straight horizontal arrow (200px long) +"points": [[0, 0], [200, 0]] + +// Straight vertical arrow (150px down) +"points": [[0, 0], [0, 150]] + +// L-shaped arrow +"points": [[0, 0], [100, 0], [100, 100]] + +// Curved arrow (3+ points creates curves) +"points": [[0, 0], [50, -30], [100, 0]] +``` + +### Binding Objects + +```json +{ + "startBinding": { + "elementId": "rect-1", + "focus": 0, + "gap": 5 + }, + "endBinding": { + "elementId": "rect-2", + "focus": 0, + "gap": 5 + } +} +``` + +| Property | Type | Description | +|----------|------|-------------| +| `elementId` | string | ID of the bound element | +| `focus` | number | -1 to 1, position along the edge (0 = center) | +| `gap` | number | Pixels gap between arrow and shape | + +--- + +## Line + +Same as arrow but without arrowheads by default: + +```json +{ + "type": "line", + "id": "line-1", + "x": 100, + "y": 100, + "width": 200, + "height": 0, + "points": [[0, 0], [200, 0]], + "startArrowhead": null, + "endArrowhead": null, + ... common properties +} +``` + +--- + +## Freedraw + +Hand-drawn paths: + +```json +{ + "type": "freedraw", + "id": "freedraw-1", + "x": 100, + "y": 100, + "width": 150, + "height": 80, + "points": [[0, 0], [10, 5], [20, 3], [30, 8], ...], + "pressures": [0.5, 0.6, 0.7, ...], + "simulatePressure": true, + ... common properties +} +``` + +### Freedraw-Specific Properties + +| Property | Type | Description | +|----------|------|-------------| +| `points` | array | Dense array of [x, y] points | +| `pressures` | array | Pressure values 0-1 for each point | +| `simulatePressure` | boolean | Simulate pen pressure | + +--- + +## Frame + +Groups elements visually: + +```json +{ + "type": "frame", + "id": "frame-1", + "x": 50, + "y": 50, + "width": 500, + "height": 400, + "name": "My Frame", + ... common properties +} +``` + +Child elements should have `frameId` set to the frame's ID. + +--- + +## Image + +```json +{ + "type": "image", + "id": "image-1", + "x": 100, + "y": 100, + "width": 300, + "height": 200, + "fileId": "file-abc123", + "status": "saved", + "scale": [1, 1], + ... common properties +} +``` + +The actual image data goes in the top-level `files` object: + +```json +{ + "files": { + "file-abc123": { + "id": "file-abc123", + "mimeType": "image/png", + "dataURL": "data:image/png;base64,..." + } + } +} +``` + +--- + +## Bound Elements + +When text is inside a shape, or arrows connect shapes: + +### Shape with bound text: +```json +{ + "type": "rectangle", + "id": "rect-1", + "boundElements": [ + { "id": "text-1", "type": "text" } + ] +} +``` + +### Text bound to shape: +```json +{ + "type": "text", + "id": "text-1", + "containerId": "rect-1" +} +``` + +### Shape with bound arrow: +```json +{ + "type": "rectangle", + "id": "rect-1", + "boundElements": [ + { "id": "arrow-1", "type": "arrow" } + ] +} +``` + +--- + +## Groups + +To group elements, give them matching `groupIds`: + +```json +{ + "type": "rectangle", + "id": "rect-1", + "groupIds": ["group-1"] +} +{ + "type": "text", + "id": "text-1", + "groupIds": ["group-1"] +} +``` + +Nested groups use multiple IDs (innermost first): +```json +"groupIds": ["inner-group", "outer-group"] +``` \ No newline at end of file diff --git a/bundled-skills/excalidraw/references/examples.md b/bundled-skills/excalidraw/references/examples.md new file mode 100644 index 0000000..1802d6c --- /dev/null +++ b/bundled-skills/excalidraw/references/examples.md @@ -0,0 +1,1365 @@ +# Excalidraw Diagram Examples + +Complete, working examples of common diagram types. + +## Simple Flowchart + +A basic yes/no decision flowchart: + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": [ + { + "type": "ellipse", + "id": "start", + "x": 200, + "y": 50, + "width": 100, + "height": 60, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "#b2f2bb", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1001, + "version": 1, + "versionNonce": 1001, + "isDeleted": false, + "groupIds": [], + "boundElements": [ + { "id": "text-start", "type": "text" }, + { "id": "arrow-1", "type": "arrow" } + ], + "link": null, + "locked": false + }, + { + "type": "text", + "id": "text-start", + "x": 225, + "y": 68, + "width": 50, + "height": 25, + "text": "Start", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1002, + "version": 1, + "versionNonce": 1002, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "start", + "originalText": "Start", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "diamond", + "id": "decision", + "x": 175, + "y": 180, + "width": 150, + "height": 120, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "#ffec99", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1003, + "version": 1, + "versionNonce": 1003, + "isDeleted": false, + "groupIds": [], + "boundElements": [ + { "id": "text-decision", "type": "text" }, + { "id": "arrow-1", "type": "arrow" }, + { "id": "arrow-yes", "type": "arrow" }, + { "id": "arrow-no", "type": "arrow" } + ], + "link": null, + "locked": false + }, + { + "type": "text", + "id": "text-decision", + "x": 210, + "y": 225, + "width": 80, + "height": 25, + "text": "Ready?", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1004, + "version": 1, + "versionNonce": 1004, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "decision", + "originalText": "Ready?", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "rectangle", + "id": "process-yes", + "x": 50, + "y": 380, + "width": 140, + "height": 80, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "#a5d8ff", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1005, + "version": 1, + "versionNonce": 1005, + "isDeleted": false, + "groupIds": [], + "boundElements": [ + { "id": "text-yes", "type": "text" }, + { "id": "arrow-yes", "type": "arrow" } + ], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "text-yes", + "x": 75, + "y": 407, + "width": 90, + "height": 25, + "text": "Do Thing", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1006, + "version": 1, + "versionNonce": 1006, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "process-yes", + "originalText": "Do Thing", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "rectangle", + "id": "process-no", + "x": 310, + "y": 380, + "width": 140, + "height": 80, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "#ffc9c9", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1007, + "version": 1, + "versionNonce": 1007, + "isDeleted": false, + "groupIds": [], + "boundElements": [ + { "id": "text-no", "type": "text" }, + { "id": "arrow-no", "type": "arrow" } + ], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "text-no", + "x": 355, + "y": 407, + "width": 50, + "height": 25, + "text": "Wait", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1008, + "version": 1, + "versionNonce": 1008, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "process-no", + "originalText": "Wait", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "arrow", + "id": "arrow-1", + "x": 250, + "y": 115, + "width": 0, + "height": 60, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1009, + "version": 1, + "versionNonce": 1009, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [0, 60]], + "startArrowhead": null, + "endArrowhead": "arrow", + "startBinding": { "elementId": "start", "focus": 0, "gap": 5 }, + "endBinding": { "elementId": "decision", "focus": 0, "gap": 5 } + }, + { + "type": "arrow", + "id": "arrow-yes", + "x": 200, + "y": 300, + "width": 80, + "height": 75, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1010, + "version": 1, + "versionNonce": 1010, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [-80, 75]], + "startArrowhead": null, + "endArrowhead": "arrow", + "startBinding": { "elementId": "decision", "focus": -0.5, "gap": 5 }, + "endBinding": { "elementId": "process-yes", "focus": 0, "gap": 5 } + }, + { + "type": "arrow", + "id": "arrow-no", + "x": 300, + "y": 300, + "width": 80, + "height": 75, + "angle": 0, + "strokeColor": "#e03131", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1011, + "version": 1, + "versionNonce": 1011, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [80, 75]], + "startArrowhead": null, + "endArrowhead": "arrow", + "startBinding": { "elementId": "decision", "focus": 0.5, "gap": 5 }, + "endBinding": { "elementId": "process-no", "focus": 0, "gap": 5 } + }, + { + "type": "text", + "id": "label-yes", + "x": 130, + "y": 320, + "width": 40, + "height": 25, + "text": "Yes", + "fontSize": 16, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1012, + "version": 1, + "versionNonce": 1012, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Yes", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "text", + "id": "label-no", + "x": 330, + "y": 320, + "width": 30, + "height": 25, + "text": "No", + "fontSize": 16, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#e03131", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 1013, + "version": 1, + "versionNonce": 1013, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "No", + "autoResize": true, + "lineHeight": 1.25 + } + ], + "appState": { + "viewBackgroundColor": "#ffffff", + "gridSize": null + }, + "files": {} +} +``` + +--- + +## Architecture Diagram (3-Tier) + +Client, Server, Database architecture: + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": [ + { + "type": "rectangle", + "id": "client", + "x": 50, + "y": 100, + "width": 160, + "height": 120, + "angle": 0, + "strokeColor": "#1971c2", + "backgroundColor": "#a5d8ff", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2001, + "version": 1, + "versionNonce": 2001, + "isDeleted": false, + "groupIds": ["client-group"], + "boundElements": [{ "id": "arrow-client-server", "type": "arrow" }], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "client-title", + "x": 85, + "y": 115, + "width": 90, + "height": 30, + "text": "Client", + "fontSize": 24, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#1971c2", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2002, + "version": 1, + "versionNonce": 2002, + "isDeleted": false, + "groupIds": ["client-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Client", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "text", + "id": "client-desc", + "x": 70, + "y": 155, + "width": 120, + "height": 50, + "text": "React App\nBrowser", + "fontSize": 16, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2003, + "version": 1, + "versionNonce": 2003, + "isDeleted": false, + "groupIds": ["client-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "React App\nBrowser", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "rectangle", + "id": "server", + "x": 320, + "y": 100, + "width": 160, + "height": 120, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "#b2f2bb", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2004, + "version": 1, + "versionNonce": 2004, + "isDeleted": false, + "groupIds": ["server-group"], + "boundElements": [ + { "id": "arrow-client-server", "type": "arrow" }, + { "id": "arrow-server-db", "type": "arrow" } + ], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "server-title", + "x": 355, + "y": 115, + "width": 90, + "height": 30, + "text": "Server", + "fontSize": 24, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2005, + "version": 1, + "versionNonce": 2005, + "isDeleted": false, + "groupIds": ["server-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Server", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "text", + "id": "server-desc", + "x": 340, + "y": 155, + "width": 120, + "height": 50, + "text": "Node.js\nREST API", + "fontSize": 16, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2006, + "version": 1, + "versionNonce": 2006, + "isDeleted": false, + "groupIds": ["server-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Node.js\nREST API", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "ellipse", + "id": "database", + "x": 590, + "y": 100, + "width": 140, + "height": 120, + "angle": 0, + "strokeColor": "#9c36b5", + "backgroundColor": "#d0bfff", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2007, + "version": 1, + "versionNonce": 2007, + "isDeleted": false, + "groupIds": ["db-group"], + "boundElements": [{ "id": "arrow-server-db", "type": "arrow" }], + "link": null, + "locked": false + }, + { + "type": "text", + "id": "db-title", + "x": 610, + "y": 130, + "width": 100, + "height": 30, + "text": "Database", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#9c36b5", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2008, + "version": 1, + "versionNonce": 2008, + "isDeleted": false, + "groupIds": ["db-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "Database", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "text", + "id": "db-desc", + "x": 620, + "y": 165, + "width": 80, + "height": 25, + "text": "PostgreSQL", + "fontSize": 14, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "top", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2009, + "version": 1, + "versionNonce": 2009, + "isDeleted": false, + "groupIds": ["db-group"], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "PostgreSQL", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "arrow", + "id": "arrow-client-server", + "x": 215, + "y": 160, + "width": 100, + "height": 0, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2010, + "version": 1, + "versionNonce": 2010, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [100, 0]], + "startArrowhead": "arrow", + "endArrowhead": "arrow", + "startBinding": { "elementId": "client", "focus": 0, "gap": 5 }, + "endBinding": { "elementId": "server", "focus": 0, "gap": 5 } + }, + { + "type": "arrow", + "id": "arrow-server-db", + "x": 485, + "y": 160, + "width": 100, + "height": 0, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2011, + "version": 1, + "versionNonce": 2011, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [100, 0]], + "startArrowhead": "arrow", + "endArrowhead": "arrow", + "startBinding": { "elementId": "server", "focus": 0, "gap": 5 }, + "endBinding": { "elementId": "database", "focus": 0, "gap": 5 } + }, + { + "type": "text", + "id": "arrow-label-1", + "x": 235, + "y": 130, + "width": 60, + "height": 20, + "text": "HTTP", + "fontSize": 14, + "fontFamily": 3, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#868e96", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2012, + "version": 1, + "versionNonce": 2012, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "HTTP", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "text", + "id": "arrow-label-2", + "x": 510, + "y": 130, + "width": 50, + "height": 20, + "text": "SQL", + "fontSize": 14, + "fontFamily": 3, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#868e96", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 2013, + "version": 1, + "versionNonce": 2013, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "SQL", + "autoResize": true, + "lineHeight": 1.25 + } + ], + "appState": { + "viewBackgroundColor": "#ffffff", + "gridSize": null + }, + "files": {} +} +``` + +--- + +## Sequence-Style Diagram + +User authentication flow: + +```json +{ + "type": "excalidraw", + "version": 2, + "source": "https://excalidraw.com", + "elements": [ + { + "type": "rectangle", + "id": "user-box", + "x": 50, + "y": 50, + "width": 100, + "height": 50, + "angle": 0, + "strokeColor": "#1971c2", + "backgroundColor": "#a5d8ff", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3001, + "version": 1, + "versionNonce": 3001, + "isDeleted": false, + "groupIds": [], + "boundElements": [{ "id": "user-label", "type": "text" }], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "user-label", + "x": 75, + "y": 62, + "width": 50, + "height": 25, + "text": "User", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1971c2", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3002, + "version": 1, + "versionNonce": 3002, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "user-box", + "originalText": "User", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "rectangle", + "id": "auth-box", + "x": 250, + "y": 50, + "width": 100, + "height": 50, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "#b2f2bb", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3003, + "version": 1, + "versionNonce": 3003, + "isDeleted": false, + "groupIds": [], + "boundElements": [{ "id": "auth-label", "type": "text" }], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "auth-label", + "x": 275, + "y": 62, + "width": 50, + "height": 25, + "text": "Auth", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3004, + "version": 1, + "versionNonce": 3004, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "auth-box", + "originalText": "Auth", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "rectangle", + "id": "db-box", + "x": 450, + "y": 50, + "width": 100, + "height": 50, + "angle": 0, + "strokeColor": "#9c36b5", + "backgroundColor": "#d0bfff", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3005, + "version": 1, + "versionNonce": 3005, + "isDeleted": false, + "groupIds": [], + "boundElements": [{ "id": "db-label", "type": "text" }], + "link": null, + "locked": false, + "roundness": { "type": 3 } + }, + { + "type": "text", + "id": "db-label", + "x": 485, + "y": 62, + "width": 30, + "height": 25, + "text": "DB", + "fontSize": 20, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#9c36b5", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3006, + "version": 1, + "versionNonce": 3006, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": "db-box", + "originalText": "DB", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "line", + "id": "user-lifeline", + "x": 100, + "y": 105, + "width": 0, + "height": 300, + "angle": 0, + "strokeColor": "#1971c2", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 0, + "opacity": 100, + "seed": 3007, + "version": 1, + "versionNonce": 3007, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [0, 300]], + "startArrowhead": null, + "endArrowhead": null + }, + { + "type": "line", + "id": "auth-lifeline", + "x": 300, + "y": 105, + "width": 0, + "height": 300, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 0, + "opacity": 100, + "seed": 3008, + "version": 1, + "versionNonce": 3008, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [0, 300]], + "startArrowhead": null, + "endArrowhead": null + }, + { + "type": "line", + "id": "db-lifeline", + "x": 500, + "y": 105, + "width": 0, + "height": 300, + "angle": 0, + "strokeColor": "#9c36b5", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 1, + "strokeStyle": "dashed", + "roughness": 0, + "opacity": 100, + "seed": 3009, + "version": 1, + "versionNonce": 3009, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [0, 300]], + "startArrowhead": null, + "endArrowhead": null + }, + { + "type": "arrow", + "id": "msg-1", + "x": 105, + "y": 150, + "width": 190, + "height": 0, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3010, + "version": 1, + "versionNonce": 3010, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [190, 0]], + "startArrowhead": null, + "endArrowhead": "arrow" + }, + { + "type": "text", + "id": "msg-1-label", + "x": 150, + "y": 125, + "width": 100, + "height": 20, + "text": "1. Login request", + "fontSize": 14, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3011, + "version": 1, + "versionNonce": 3011, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "1. Login request", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "arrow", + "id": "msg-2", + "x": 305, + "y": 200, + "width": 190, + "height": 0, + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3012, + "version": 1, + "versionNonce": 3012, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [190, 0]], + "startArrowhead": null, + "endArrowhead": "arrow" + }, + { + "type": "text", + "id": "msg-2-label", + "x": 350, + "y": 175, + "width": 100, + "height": 20, + "text": "2. Verify user", + "fontSize": 14, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#1e1e1e", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3013, + "version": 1, + "versionNonce": 3013, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "2. Verify user", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "arrow", + "id": "msg-3", + "x": 495, + "y": 250, + "width": 190, + "height": 0, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "dashed", + "roughness": 1, + "opacity": 100, + "seed": 3014, + "version": 1, + "versionNonce": 3014, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [-190, 0]], + "startArrowhead": null, + "endArrowhead": "arrow" + }, + { + "type": "text", + "id": "msg-3-label", + "x": 350, + "y": 225, + "width": 100, + "height": 20, + "text": "3. User found", + "fontSize": 14, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3015, + "version": 1, + "versionNonce": 3015, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "3. User found", + "autoResize": true, + "lineHeight": 1.25 + }, + { + "type": "arrow", + "id": "msg-4", + "x": 295, + "y": 300, + "width": 190, + "height": 0, + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "dashed", + "roughness": 1, + "opacity": 100, + "seed": 3016, + "version": 1, + "versionNonce": 3016, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "points": [[0, 0], [-190, 0]], + "startArrowhead": null, + "endArrowhead": "arrow" + }, + { + "type": "text", + "id": "msg-4-label", + "x": 150, + "y": 275, + "width": 100, + "height": 20, + "text": "4. JWT token", + "fontSize": 14, + "fontFamily": 1, + "textAlign": "center", + "verticalAlign": "middle", + "angle": 0, + "strokeColor": "#2f9e44", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "strokeStyle": "solid", + "roughness": 1, + "opacity": 100, + "seed": 3017, + "version": 1, + "versionNonce": 3017, + "isDeleted": false, + "groupIds": [], + "boundElements": null, + "link": null, + "locked": false, + "containerId": null, + "originalText": "4. JWT token", + "autoResize": true, + "lineHeight": 1.25 + } + ], + "appState": { + "viewBackgroundColor": "#ffffff", + "gridSize": null + }, + "files": {} +} +``` + +--- + +## Tips for Creating Your Own Diagrams + +1. **Start simple** - Create shapes first, then add text, then arrows +2. **Calculate positions** - Plan your layout on paper first +3. **Use consistent spacing** - 50-100px between elements works well +4. **Unique seeds** - Every element needs a unique seed number +5. **Test incrementally** - Paste into excalidraw.com to verify after each addition \ No newline at end of file diff --git a/bundled-skills/food-order/SKILL.md b/bundled-skills/food-order/SKILL.md deleted file mode 100644 index cc46c4d..0000000 --- a/bundled-skills/food-order/SKILL.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -name: food-order -description: Reorder Foodora orders + track ETA/status with ordercli. Never confirm without explicit user approval. Triggers: order food, reorder, track ETA. -homepage: https://ordercli.sh -metadata: {"eggent":{"emoji":"🥡","requires":{"bins":["ordercli"]},"install":[{"id":"go","kind":"go","module":"github.com/steipete/ordercli/cmd/ordercli@latest","bins":["ordercli"],"label":"Install ordercli (go)"}]}} ---- - -# Food order (Foodora via ordercli) - -Goal: reorder a previous Foodora order safely (preview first; confirm only on explicit user “yes/confirm/place the order”). - -Hard safety rules - -- Never run `ordercli foodora reorder ... --confirm` unless user explicitly confirms placing the order. -- Prefer preview-only steps first; show what will happen; ask for confirmation. -- If user is unsure: stop at preview and ask questions. - -Setup (once) - -- Country: `ordercli foodora countries` → `ordercli foodora config set --country AT` -- Login (password): `ordercli foodora login --email you@example.com --password-stdin` -- Login (no password, preferred): `ordercli foodora session chrome --url https://www.foodora.at/ --profile "Default"` - -Find what to reorder - -- Recent list: `ordercli foodora history --limit 10` -- Details: `ordercli foodora history show ` -- If needed (machine-readable): `ordercli foodora history show --json` - -Preview reorder (no cart changes) - -- `ordercli foodora reorder ` - -Place reorder (cart change; explicit confirmation required) - -- Confirm first, then run: `ordercli foodora reorder --confirm` -- Multiple addresses? Ask user for the right `--address-id` (take from their Foodora account / prior order data) and run: - - `ordercli foodora reorder --confirm --address-id ` - -Track the order - -- ETA/status (active list): `ordercli foodora orders` -- Live updates: `ordercli foodora orders --watch` -- Single order detail: `ordercli foodora order ` - -Debug / safe testing - -- Use a throwaway config: `ordercli --config /tmp/ordercli.json ...` diff --git a/bundled-skills/gog/SKILL.md b/bundled-skills/gog/SKILL.md deleted file mode 100644 index 15c6a8b..0000000 --- a/bundled-skills/gog/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: gog -description: Google Workspace CLI for Gmail, Calendar, Drive, Contacts, Sheets, and Docs. -homepage: https://gogcli.sh -metadata: - { - "eggent": - { - "emoji": "🎮", - "requires": { "bins": ["gog"] }, - "install": - [ - { - "id": "brew", - "kind": "brew", - "formula": "steipete/tap/gogcli", - "bins": ["gog"], - "label": "Install gog (brew)", - }, - ], - }, - } ---- - -# gog - -Use `gog` for Gmail/Calendar/Drive/Contacts/Sheets/Docs. Requires OAuth setup. - -Setup (once) - -- `gog auth credentials /path/to/client_secret.json` -- `gog auth add you@gmail.com --services gmail,calendar,drive,contacts,docs,sheets` -- `gog auth list` - -Common commands - -- Gmail search: `gog gmail search 'newer_than:7d' --max 10` -- Gmail messages search (per email, ignores threading): `gog gmail messages search "in:inbox from:ryanair.com" --max 20 --account you@example.com` -- Gmail send (plain): `gog gmail send --to a@b.com --subject "Hi" --body "Hello"` -- Gmail send (multi-line): `gog gmail send --to a@b.com --subject "Hi" --body-file ./message.txt` -- Gmail send (stdin): `gog gmail send --to a@b.com --subject "Hi" --body-file -` -- Gmail send (HTML): `gog gmail send --to a@b.com --subject "Hi" --body-html "

Hello

"` -- Gmail draft: `gog gmail drafts create --to a@b.com --subject "Hi" --body-file ./message.txt` -- Gmail send draft: `gog gmail drafts send ` -- Gmail reply: `gog gmail send --to a@b.com --subject "Re: Hi" --body "Reply" --reply-to-message-id ` -- Calendar list events: `gog calendar events --from --to ` -- Calendar create event: `gog calendar create --summary "Title" --from --to ` -- Calendar create with color: `gog calendar create --summary "Title" --from --to --event-color 7` -- Calendar update event: `gog calendar update --summary "New Title" --event-color 4` -- Calendar show colors: `gog calendar colors` -- Drive search: `gog drive search "query" --max 10` -- Contacts: `gog contacts list --max 20` -- Sheets get: `gog sheets get "Tab!A1:D10" --json` -- Sheets update: `gog sheets update "Tab!A1:B2" --values-json '[["A","B"],["1","2"]]' --input USER_ENTERED` -- Sheets append: `gog sheets append "Tab!A:C" --values-json '[["x","y","z"]]' --insert INSERT_ROWS` -- Sheets clear: `gog sheets clear "Tab!A2:Z"` -- Sheets metadata: `gog sheets metadata --json` -- Docs export: `gog docs export --format txt --out /tmp/doc.txt` -- Docs cat: `gog docs cat ` - -Calendar Colors - -- Use `gog calendar colors` to see all available event colors (IDs 1-11) -- Add colors to events with `--event-color ` flag -- Event color IDs (from `gog calendar colors` output): - - 1: #a4bdfc - - 2: #7ae7bf - - 3: #dbadff - - 4: #ff887c - - 5: #fbd75b - - 6: #ffb878 - - 7: #46d6db - - 8: #e1e1e1 - - 9: #5484ed - - 10: #51b749 - - 11: #dc2127 - -Email Formatting - -- Prefer plain text. Use `--body-file` for multi-paragraph messages (or `--body-file -` for stdin). -- Same `--body-file` pattern works for drafts and replies. -- `--body` does not unescape `\n`. If you need inline newlines, use a heredoc or `$'Line 1\n\nLine 2'`. -- Use `--body-html` only when you need rich formatting. -- HTML tags: `

` for paragraphs, `
` for line breaks, `` for bold, `` for italic, `` for links, `