From 77f8ec962e21c95585e9e924d58c9d149268b996 Mon Sep 17 00:00:00 2001 From: Eric Gregory Date: Wed, 18 Feb 2026 10:38:05 -0500 Subject: [PATCH 1/4] feat: add scripts and docs for diagram generation Signed-off-by: Eric Gregory --- .claude/skills/excalidraw-diagrams | 1 + .gitmodules | 3 +++ 2 files changed, 4 insertions(+) create mode 160000 .claude/skills/excalidraw-diagrams create mode 100644 .gitmodules diff --git a/.claude/skills/excalidraw-diagrams b/.claude/skills/excalidraw-diagrams new file mode 160000 index 000000000..cd421f0c0 --- /dev/null +++ b/.claude/skills/excalidraw-diagrams @@ -0,0 +1 @@ +Subproject commit cd421f0c0efe097a6ce757725822c8ebb4920085 diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..0e239a2e6 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule ".claude/skills/excalidraw-diagrams"] + path = .claude/skills/excalidraw-diagrams + url = https://github.com/robtaylor/excalidraw-diagrams From b1aac9d6ed35c05b04e1b09a9e22957924c5745a Mon Sep 17 00:00:00 2001 From: Eric Gregory Date: Wed, 18 Feb 2026 10:38:31 -0500 Subject: [PATCH 2/4] update Signed-off-by: Eric Gregory --- .gitignore | 8 +- CLAUDE.md | 33 ++++++ README.md | 69 ++++++++++++ scripts/export-excalidraw-png.js | 181 +++++++++++++++++++++++++++++++ scripts/package.json | 7 ++ 5 files changed, 297 insertions(+), 1 deletion(-) create mode 100644 CLAUDE.md create mode 100644 scripts/export-excalidraw-png.js create mode 100644 scripts/package.json diff --git a/.gitignore b/.gitignore index 813d57737..a3e15ed63 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,10 @@ yarn-debug.log* yarn-error.log* host_config.json -plan.md \ No newline at end of file +plan.md + +# Scripts tooling +scripts/node_modules/ + +# Claude Code local settings +.claude/settings.local.json diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..f65ccace9 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,33 @@ +# CLAUDE.md + +## Diagrams + +This project uses [Excalidraw](https://excalidraw.com/) for diagrams. Source files (`.excalidraw`) are stored alongside docs in `versioned_docs/version-next/images/` and exported as transparent PNGs at 3x scale. + +### wasmCloud Brand Color Palette + +Use these colors for diagram elements (stroke / background): + +| Color | Stroke | Background | +|--------|-----------|------------| +| Green | `#00bc8e` | `#e6f9f3` | +| Blue | `#005799` | `#e6f0f7` | +| Navy | `#002e5d` | `#e6ecf3` | +| Purple | `#6741d9` | `#f0ecff` | +| Gold | `#d4a017` | `#fff8e6` | +| Red | `#e03131` | `#ffe6e6` | +| Gray | `#788591` | `#f3f4f6` | +| Teal | `#099268` | `#e0f5f0` | + +### Creating Diagrams with Claude Code + +Use the `excalidraw-diagrams` skill (`/excalidraw-diagrams`) to generate diagrams programmatically with the brand palette above. + +### Exporting to PNG + +```bash +cd scripts && npm install && npx playwright install chromium +node export-excalidraw-png.js [output.png] +``` + +See [docs/diagrams.md](docs/diagrams.md) for the full contributor workflow. diff --git a/README.md b/README.md index f91700da7..7126dbedf 100644 --- a/README.md +++ b/README.md @@ -28,3 +28,72 @@ To serve the generated static content: ```bash npm run serve ``` + +### Diagram workflow + +The wasmCloud docs use [Excalidraw](https://excalidraw.com/) for diagrams. Source `.excalidraw` files live in `versioned_docs/version-next/images/` alongside the exported PNGs. + +#### wasmCloud brand colors + +All diagrams should use the wasmCloud brand palette for consistency. + +| Color | Stroke | Background | +|--------|-----------|------------| +| Green | `#00bc8e` | `#e6f9f3` | +| Blue | `#005799` | `#e6f0f7` | +| Navy | `#002e5d` | `#e6ecf3` | +| Purple | `#6741d9` | `#f0ecff` | +| Gold | `#d4a017` | `#fff8e6` | +| Red | `#e03131` | `#ffe6e6` | +| Gray | `#788591` | `#f3f4f6` | +| Teal | `#099268` | `#e0f5f0` | + +#### Editing existing diagrams + +Two options: + +1. **VS Code Excalidraw extension** - Install the [Excalidraw extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor) and open `.excalidraw` files directly in VS Code. +2. **excalidraw.com** - Open [excalidraw.com](https://excalidraw.com/) and drag-and-drop the `.excalidraw` file onto the canvas. Save by downloading the file back (hamburger menu > Save to disk). + +#### Creating new diagrams with Claude Code + +Use the `excalidraw-diagrams` skill to generate diagrams programmatically: + +``` +/excalidraw-diagrams Create a flowchart showing the component deployment pipeline +``` + +The skill uses the `excalidraw_generator.py` library (in `.claude/skills/excalidraw-diagrams/`) which provides `Diagram`, `Flowchart`, and `ArchitectureDiagram` classes. Reference the brand colors from `CLAUDE.md` when specifying colors in your prompt. + +#### Exporting to PNG + +Diagrams must be exported as **transparent PNGs at 3x scale** before committing. + +#### Automated export (Playwright) + +One-time setup: + +```bash +cd scripts +npm install +npx playwright install chromium +``` + +Export a diagram: + +```bash +node export-excalidraw-png.js [output.png] +``` + +If no output path is given, the PNG is written next to the `.excalidraw` file with the same name. + +### Manual export (No Playwright) + +If you don't want to install Playwright: + +1. Open the `.excalidraw` file at [excalidraw.com](https://excalidraw.com/) +2. Select all elements (Ctrl+A / Cmd+A) +3. Open the export dialog (hamburger menu > Export image) +4. Toggle **Background** off +5. Set **Scale** to **3x** +6. Click **Copy to clipboard** or **Save as PNG** diff --git a/scripts/export-excalidraw-png.js b/scripts/export-excalidraw-png.js new file mode 100644 index 000000000..4233559e1 --- /dev/null +++ b/scripts/export-excalidraw-png.js @@ -0,0 +1,181 @@ +#!/usr/bin/env node +/** + * Export Excalidraw diagrams to high-quality transparent PNGs using Playwright. + * + * - Disables background for transparency + * - Sets export scale to 3x for high quality + * - Uses clipboard copy for native rendering with Excalidraw fonts + * + * Setup: + * cd scripts && npm install && npx playwright install chromium + * + * Usage: + * node export-excalidraw-png.js [output.png] + */ + +const { chromium } = require('playwright'); +const fs = require('fs'); +const path = require('path'); + +async function exportDiagram(inputPath, outputPath) { + const absoluteInput = path.resolve(inputPath); + if (!fs.existsSync(absoluteInput)) { + console.error(`Input file not found: ${absoluteInput}`); + process.exit(1); + } + + const diagramData = fs.readFileSync(absoluteInput, 'utf-8'); + const absoluteOutput = path.resolve( + outputPath || inputPath.replace(/\.excalidraw$/, '.png') + ); + + console.log(`Exporting: ${path.basename(absoluteInput)}`); + + const browser = await chromium.launch({ headless: true }); + const context = await browser.newContext({ + viewport: { width: 1920, height: 1200 }, + permissions: ['clipboard-read', 'clipboard-write'], + }); + const page = await context.newPage(); + page.on('dialog', (dialog) => dialog.accept()); + + try { + await page.goto('https://excalidraw.com/', { waitUntil: 'networkidle' }); + await page.waitForSelector('.excalidraw', { timeout: 30000 }); + await page.waitForTimeout(2000); + + // Load diagram via file drop + await page.evaluate(async (content) => { + const blob = new Blob([content], { type: 'application/json' }); + const file = new File([blob], 'diagram.excalidraw', { + type: 'application/json', + }); + const dt = new DataTransfer(); + dt.items.add(file); + document.querySelector('.excalidraw')?.dispatchEvent( + new DragEvent('drop', { + bubbles: true, + cancelable: true, + dataTransfer: dt, + }) + ); + }, diagramData); + + await page.waitForTimeout(2000); + + // Select all elements + await page.keyboard.press('Control+a'); + await page.waitForTimeout(500); + + // Open export dialog via menu + const menuButton = + (await page.$('button[aria-label="Main menu"]')) || + (await page.$('.App-menu button')); + if (menuButton) await menuButton.click(); + await page.waitForTimeout(500); + + const exportOption = + (await page.$('text="Export image..."')) || + (await page.$('text="Export image"')) || + (await page.$('[data-testid="dropdown-menu-export"]')); + if (exportOption) { + await exportOption.click(); + } else { + await page.keyboard.press('Meta+Shift+e'); + } + await page.waitForTimeout(1500); + + // Toggle OFF background for transparency + const bgToggle = await page.$('label:has-text("Background")'); + if (bgToggle) { + await bgToggle.click(); + await page.waitForTimeout(300); + console.log(' Background: off'); + } + + // Set scale to 3x by clicking the third radio input in the Scale group + await page.evaluate(() => { + const labels = document.querySelectorAll('label'); + for (const label of labels) { + if (label.textContent.trim() === 'Scale') { + const parent = label.closest('div') || label.parentElement; + if (parent) { + const inputs = parent.querySelectorAll( + 'input[type="radio"], input' + ); + if (inputs.length >= 3) inputs[2].click(); + } + break; + } + } + }); + await page.waitForTimeout(1000); + console.log(' Scale: 3x'); + + // Copy to clipboard (respects current scale and background settings) + const copyBtn = + (await page.$('button[aria-label="Copy PNG to clipboard"]')) || + (await page.$('button:has-text("Copy to clipboard")')); + if (!copyBtn) throw new Error('Could not find "Copy to clipboard" button'); + + await copyBtn.click(); + await page.waitForTimeout(3000); + + // Read PNG from clipboard + const pngData = await page.evaluate(async () => { + try { + const items = await navigator.clipboard.read(); + for (const item of items) { + if (item.types.includes('image/png')) { + const blob = await item.getType('image/png'); + const arrayBuffer = await blob.arrayBuffer(); + const bytes = new Uint8Array(arrayBuffer); + let binary = ''; + for (let i = 0; i < bytes.length; i++) { + binary += String.fromCharCode(bytes[i]); + } + return btoa(binary); + } + } + return null; + } catch (e) { + return null; + } + }); + + if (pngData && pngData.length > 100) { + const buffer = Buffer.from(pngData, 'base64'); + if (buffer[0] === 0x89 && buffer[1] === 0x50) { + fs.writeFileSync(absoluteOutput, buffer); + console.log( + ` -> ${path.basename(absoluteOutput)} (${(buffer.length / 1024).toFixed(0)} KB)` + ); + } else { + throw new Error('Clipboard data is not a valid PNG'); + } + } else { + throw new Error('No PNG data in clipboard'); + } + } catch (error) { + console.error(` Error: ${error.message}`); + await browser.close(); + process.exit(1); + } + + await browser.close(); +} + +const args = process.argv.slice(2); +if (args.length < 1) { + console.log( + 'Usage: node export-excalidraw-png.js [output.png]' + ); + process.exit(1); +} + +exportDiagram(args[0], args[1]) + .then(() => process.exit(0)) + .catch((err) => { + console.error(err); + process.exit(1); + }); diff --git a/scripts/package.json b/scripts/package.json new file mode 100644 index 000000000..f29fd11a3 --- /dev/null +++ b/scripts/package.json @@ -0,0 +1,7 @@ +{ + "private": true, + "description": "Tooling scripts for wasmcloud.com docs", + "dependencies": { + "playwright": "^1.52.0" + } +} From 767417eb10d16056c015fe0cf6c1ec3a7ae12df2 Mon Sep 17 00:00:00 2001 From: Eric Gregory Date: Tue, 19 May 2026 15:11:36 -0400 Subject: [PATCH 3/4] chore(diagrams): center brand-guidelines skill, install via skills CLI Replaces the git-submodule excalidraw-diagrams skill with the brand-guidelines skill from cosmonic-labs/skills, installed via the skills CLI lockfile (skills-lock.json). Removes .gitmodules and the submodule pointer. Adds .agents/skills/ to .gitignore so other agents' install paths are also ignored (.claude/ was already covered). The brand-guidelines skill bundles both Cosmonic and wasmCloud materials; CLAUDE.md and the README point readers at the wasmCloud sections and keep a short palette inline as quick reference, with the skill called out as the canonical source. Addresses review feedback from @vados-cosmonic and @lachieh. Signed-off-by: Eric Gregory --- .claude/skills/excalidraw-diagrams | 1 - .gitignore | 4 +-- .gitmodules | 3 -- CLAUDE.md | 32 +++++++++-------- README.md | 58 +++++++++++++++++++----------- skills-lock.json | 11 ++++++ 6 files changed, 68 insertions(+), 41 deletions(-) delete mode 160000 .claude/skills/excalidraw-diagrams delete mode 100644 .gitmodules create mode 100644 skills-lock.json diff --git a/.claude/skills/excalidraw-diagrams b/.claude/skills/excalidraw-diagrams deleted file mode 160000 index cd421f0c0..000000000 --- a/.claude/skills/excalidraw-diagrams +++ /dev/null @@ -1 +0,0 @@ -Subproject commit cd421f0c0efe097a6ce757725822c8ebb4920085 diff --git a/.gitignore b/.gitignore index a3e15ed63..ab67af374 100644 --- a/.gitignore +++ b/.gitignore @@ -30,5 +30,5 @@ plan.md # Scripts tooling scripts/node_modules/ -# Claude Code local settings -.claude/settings.local.json +# Agent skills (managed via skills-lock.json + `npx skills experimental_install`) +.agents/skills/ diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 0e239a2e6..000000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule ".claude/skills/excalidraw-diagrams"] - path = .claude/skills/excalidraw-diagrams - url = https://github.com/robtaylor/excalidraw-diagrams diff --git a/CLAUDE.md b/CLAUDE.md index f65ccace9..5407c14ad 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -4,24 +4,26 @@ This project uses [Excalidraw](https://excalidraw.com/) for diagrams. Source files (`.excalidraw`) are stored alongside docs in `versioned_docs/version-next/images/` and exported as transparent PNGs at 3x scale. -### wasmCloud Brand Color Palette +### Brand guidelines skill -Use these colors for diagram elements (stroke / background): +Colors, typography, and the official wasmCloud Excalidraw library are defined in the `brand-guidelines` skill (managed via `skills-lock.json`; see [README.md](README.md#diagram-workflow) for setup). The skill covers both Cosmonic and wasmCloud brands — for this repository, follow the **wasmCloud** sections. -| Color | Stroke | Background | -|--------|-----------|------------| -| Green | `#00bc8e` | `#e6f9f3` | -| Blue | `#005799` | `#e6f0f7` | -| Navy | `#002e5d` | `#e6ecf3` | -| Purple | `#6741d9` | `#f0ecff` | -| Gold | `#d4a017` | `#fff8e6` | -| Red | `#e03131` | `#ffe6e6` | -| Gray | `#788591` | `#f3f4f6` | -| Teal | `#099268` | `#e0f5f0` | +The wasmCloud palette in brief: -### Creating Diagrams with Claude Code +| Color | Hex | Use | +|-------------|-----------|-------------------------------------| +| Green Aqua | `#00C389` | Primary brand color, main elements | +| Space Blue | `#002E5D` | Dark backgrounds, outlines | +| Gunmetal | `#253746` | Text, secondary backgrounds | +| Light Gray | `#768692` | Secondary text | +| Gainsboro | `#D9E1E2` | Light backgrounds, borders | +| Yellow | `#FFB600` | Highlights, CTAs | -Use the `excalidraw-diagrams` skill (`/excalidraw-diagrams`) to generate diagrams programmatically with the brand palette above. +The `brand-guidelines` skill is the canonical source; defer to it when the palette here conflicts with the skill content. + +### Creating diagrams + +Load the [wasmCloud and Wasm Excalidraw library](https://excalidraw.com/?addLibrary=https%3A%2F%2Fraw.githubusercontent.com%2Fexcalidraw%2Fexcalidraw-libraries%2Fricochet-wasmcloud-and-wasm-1770917744834%2Flibraries%2Fricochet%2Fwasmcloud-and-wasm.excalidrawlib%3Fraw%3Dtrue) and apply the wasmCloud palette. The `brand-guidelines` skill has more detailed guidance for diagrams created with the Excalidraw MCP server. ### Exporting to PNG @@ -30,4 +32,4 @@ cd scripts && npm install && npx playwright install chromium node export-excalidraw-png.js [output.png] ``` -See [docs/diagrams.md](docs/diagrams.md) for the full contributor workflow. +See [README.md](README.md#diagram-workflow) for the full contributor workflow. diff --git a/README.md b/README.md index 7126dbedf..1fc20cda0 100644 --- a/README.md +++ b/README.md @@ -33,43 +33,61 @@ npm run serve The wasmCloud docs use [Excalidraw](https://excalidraw.com/) for diagrams. Source `.excalidraw` files live in `versioned_docs/version-next/images/` alongside the exported PNGs. -#### wasmCloud brand colors +#### Brand colors and the wasmCloud Excalidraw library -All diagrams should use the wasmCloud brand palette for consistency. +Colors, typography, and the official wasmCloud Excalidraw library are defined in the [`brand-guidelines` skill](https://github.com/cosmonic-labs/skills/tree/main/brand-guidelines). The skill covers both Cosmonic and wasmCloud brands — for this repository, use the **wasmCloud** sections. -| Color | Stroke | Background | -|--------|-----------|------------| -| Green | `#00bc8e` | `#e6f9f3` | -| Blue | `#005799` | `#e6f0f7` | -| Navy | `#002e5d` | `#e6ecf3` | -| Purple | `#6741d9` | `#f0ecff` | -| Gold | `#d4a017` | `#fff8e6` | -| Red | `#e03131` | `#ffe6e6` | -| Gray | `#788591` | `#f3f4f6` | -| Teal | `#099268` | `#e0f5f0` | +The wasmCloud palette in brief: + +| Color | Hex | Use | +|-------------|-----------|-------------------------------------| +| Green Aqua | `#00C389` | Primary brand color, main elements | +| Space Blue | `#002E5D` | Dark backgrounds, outlines | +| Gunmetal | `#253746` | Text, secondary backgrounds | +| Light Gray | `#768692` | Secondary text | +| Gainsboro | `#D9E1E2` | Light backgrounds, borders | +| Yellow | `#FFB600` | Highlights, CTAs | + +The `brand-guidelines` skill is the canonical source; defer to it when the palette here conflicts with the skill content. + +To load the [wasmCloud and Wasm Excalidraw library](https://excalidraw.com/?addLibrary=https%3A%2F%2Fraw.githubusercontent.com%2Fexcalidraw%2Fexcalidraw-libraries%2Fricochet-wasmcloud-and-wasm-1770917744834%2Flibraries%2Fricochet%2Fwasmcloud-and-wasm.excalidrawlib%3Fraw%3Dtrue) in the Excalidraw web UI, click the link and confirm the library install. + +#### Installing the brand-guidelines skill locally + +The skill ships as a project-level Claude Code skill, pinned in `skills-lock.json`. To install or restore it on a fresh checkout: + +```bash +npx skills experimental_install +``` + +If you prefer to add the skill manually (or to a different agent): + +```bash +npx skills add cosmonic-labs/skills --skill brand-guidelines --agent claude-code +``` + +The installed skill content is gitignored; only `skills-lock.json` is committed. #### Editing existing diagrams Two options: -1. **VS Code Excalidraw extension** - Install the [Excalidraw extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor) and open `.excalidraw` files directly in VS Code. -2. **excalidraw.com** - Open [excalidraw.com](https://excalidraw.com/) and drag-and-drop the `.excalidraw` file onto the canvas. Save by downloading the file back (hamburger menu > Save to disk). +1. **VS Code Excalidraw extension** — install the [Excalidraw extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor) and open `.excalidraw` files directly in VS Code. +2. **excalidraw.com** — open [excalidraw.com](https://excalidraw.com/) and drag-and-drop the `.excalidraw` file onto the canvas. Save by downloading the file back (hamburger menu > Save to disk). #### Creating new diagrams with Claude Code -Use the `excalidraw-diagrams` skill to generate diagrams programmatically: +With the `brand-guidelines` skill installed, ask Claude Code to create a diagram and the skill will surface the wasmCloud palette, typography, and Excalidraw library to use. For example: ``` -/excalidraw-diagrams Create a flowchart showing the component deployment pipeline +Create an Excalidraw flowchart showing the component deployment pipeline, using the brand-guidelines skill. ``` -The skill uses the `excalidraw_generator.py` library (in `.claude/skills/excalidraw-diagrams/`) which provides `Diagram`, `Flowchart`, and `ArchitectureDiagram` classes. Reference the brand colors from `CLAUDE.md` when specifying colors in your prompt. - #### Exporting to PNG Diagrams must be exported as **transparent PNGs at 3x scale** before committing. -#### Automated export (Playwright) +##### Automated export (Playwright) One-time setup: @@ -87,7 +105,7 @@ node export-excalidraw-png.js [output.png] If no output path is given, the PNG is written next to the `.excalidraw` file with the same name. -### Manual export (No Playwright) +##### Manual export (no Playwright) If you don't want to install Playwright: diff --git a/skills-lock.json b/skills-lock.json new file mode 100644 index 000000000..27e345d29 --- /dev/null +++ b/skills-lock.json @@ -0,0 +1,11 @@ +{ + "version": 1, + "skills": { + "brand-guidelines": { + "source": "cosmonic-labs/skills", + "sourceType": "github", + "skillPath": "brand-guidelines/SKILL.md", + "computedHash": "0dc065af28b0081de7be1a5d1f299676126339664b3071d1e17270326cae91a7" + } + } +} From ec3486c0983bbc202f1e9c0c46d13c445b04cd71 Mon Sep 17 00:00:00 2001 From: Eric Gregory Date: Tue, 19 May 2026 15:17:46 -0400 Subject: [PATCH 4/4] Update brand guidelines skill description Clarify the ownership of the brand guidelines skill. Mirrors the same phrasing change to README.md so the two references stay in sync. Signed-off-by: Eric Gregory --- CLAUDE.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 5407c14ad..d246f760c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -6,7 +6,7 @@ This project uses [Excalidraw](https://excalidraw.com/) for diagrams. Source fil ### Brand guidelines skill -Colors, typography, and the official wasmCloud Excalidraw library are defined in the `brand-guidelines` skill (managed via `skills-lock.json`; see [README.md](README.md#diagram-workflow) for setup). The skill covers both Cosmonic and wasmCloud brands — for this repository, follow the **wasmCloud** sections. +Colors, typography, and the official wasmCloud Excalidraw library are defined in the `brand-guidelines` skill (managed via `skills-lock.json`; see [README.md](README.md#diagram-workflow) for setup). The skill is open source and donated by Cosmonic — for this repository, follow the **wasmCloud** sections. The wasmCloud palette in brief: diff --git a/README.md b/README.md index 1fc20cda0..e885a7eee 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ The wasmCloud docs use [Excalidraw](https://excalidraw.com/) for diagrams. Sourc #### Brand colors and the wasmCloud Excalidraw library -Colors, typography, and the official wasmCloud Excalidraw library are defined in the [`brand-guidelines` skill](https://github.com/cosmonic-labs/skills/tree/main/brand-guidelines). The skill covers both Cosmonic and wasmCloud brands — for this repository, use the **wasmCloud** sections. +Colors, typography, and the official wasmCloud Excalidraw library are defined in the [`brand-guidelines` skill](https://github.com/cosmonic-labs/skills/tree/main/brand-guidelines). The skill is open source and donated by Cosmonic — for this repository, use the **wasmCloud** sections. The wasmCloud palette in brief: