メニュー
Brand guidelines for Cosmonic and wasmCloud. Use this skill when creating visual content, presentations, websites, diagrams, or any materials that need to follow Cosmonic or wasmCloud brand standards. Includes an Excalidraw library for diagrams.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Expert in wasmCloud Shell (wash) CLI tool for building, running, and managing WebAssembly components and wasmCloud applications. Use this skill when working with wasmCloud, WebAssembly components, WIT (WebAssembly Interface Types) definitions, or wash commands.
Expert guidance for authoring and maintaining Helm charts following standardized conventions, global registry support, templating best practices, and Kubernetes deployment patterns. Use this skill when creating new Helm charts, reviewing or modifying existing charts, configuring image registries for air-gapped environments, setting up multi-chart deployments with Helmfile, or whenever the user mentions Helm, Chart.yaml, values.yaml, helmfile, or Kubernetes manifest templating.
Expert Rust development guidance covering naming conventions, type safety, error handling, documentation, and best practices based on official Rust guidelines. Use this skill when writing new Rust code, reviewing or modifying existing Rust code, designing Rust APIs or libraries, refactoring Rust codebases, or whenever the user mentions Rust, Cargo, clippy, rustfmt, traits, lifetimes, or `.rs` files.
Comprehensive guide to WebAssembly component development covering WASI fundamentals, component composition patterns, language interoperability, runtime compatibility, and troubleshooting. Use this skill when building WebAssembly components, writing or editing WIT (WebAssembly Interface Types) definitions, composing components with wac or wasm-tools, targeting wasip1/wasip2/wasip3, working with `.wit` or `.wasm` files, or whenever the user mentions WASI, the component model, wkg, wstd, or component composition.
| name | brand-guidelines |
| description | Brand guidelines for Cosmonic and wasmCloud. Use this skill when creating visual content, presentations, websites, diagrams, or any materials that need to follow Cosmonic or wasmCloud brand standards. Includes an Excalidraw library for diagrams. |
| license | Apache-2.0 |
This skill provides official brand colors and typography for Cosmonic and wasmCloud projects.
Primary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Slate Purple | #685BC7 | Primary brand color, CTAs, accents |
| Light Gray | #768692 | Secondary text, subtle elements |
Secondary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Yellow | #FFB600 | Highlights, warnings, attention |
| Space Blue | #002E5D | Dark backgrounds, headers |
| Gunmetal | #253746 | Dark text, secondary backgrounds |
| Gainsboro | #D9E1E2 | Light backgrounds, borders, dividers |
Primary Colors:
| Color Name | Hex Code | Usage |
|---|---|---|
| Green Aqua | #00C389 | Primary brand color, CTAs, accents |
| Light Gray | #768692 | Secondary text, subtle elements |
Secondary Colors:
wasmCloud shares the same secondary color palette as Cosmonic:
| Color Name | Hex Code | Usage |
|---|---|---|
| Yellow | #FFB600 | Highlights, warnings, attention |
| Space Blue | #002E5D | Dark backgrounds, headers |
| Gunmetal | #253746 | Dark text, secondary backgrounds |
| Gainsboro | #D9E1E2 | Light backgrounds, borders, dividers |
For web projects, use these CSS custom properties:
/* Cosmonic Brand */
:root {
--cosmonic-slate-purple: #685BC7;
--cosmonic-light-gray: #768692;
--cosmonic-yellow: #FFB600;
--cosmonic-space-blue: #002E5D;
--cosmonic-gunmetal: #253746;
--cosmonic-gainsboro: #D9E1E2;
}
/* wasmCloud Brand */
:root {
--wasmcloud-green-aqua: #00C389;
--wasmcloud-light-gray: #768692;
--wasmcloud-yellow: #FFB600;
--wasmcloud-space-blue: #002E5D;
--wasmcloud-gunmetal: #253746;
--wasmcloud-gainsboro: #D9E1E2;
}
For Tailwind CSS projects:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
cosmonic: {
purple: '#685BC7',
gray: '#768692',
yellow: '#FFB600',
blue: '#002E5D',
gunmetal: '#253746',
gainsboro: '#D9E1E2',
},
wasmcloud: {
aqua: '#00C389',
gray: '#768692',
yellow: '#FFB600',
blue: '#002E5D',
gunmetal: '#253746',
gainsboro: '#D9E1E2',
},
},
fontFamily: {
cosmonic: ['Work Sans', 'Arial', 'sans-serif'],
wasmcloud: ['Lexend', 'Arial', 'sans-serif'],
},
},
},
};
When creating diagrams, use the official wasmCloud & Wasm Excalidraw library which contains reusable components including wasmCloud cluster diagrams and architecture diagram elements.
Library URL: https://raw.githubusercontent.com/excalidraw/excalidraw-libraries/ricochet-wasmcloud-and-wasm-1770917744834/libraries/ricochet/wasmcloud-and-wasm.excalidrawlib?raw=true
Add to Excalidraw: Install Library
When drawing diagrams with the Excalidraw MCP server, always:
#00C389) for main elements, connections, and accents#e5f2ff), light gray (#f4f7fa, #f8f9fa)#007054), teal (#00bc8e)#253746) or Space Blue (#002E5D)#D9E1E2)Cosmonic:
#685BC7) on white or Gainsboro backgrounds#002E5D) or Gunmetal (#253746)#FFB600) for highlights and CTAswasmCloud:
#00C389) on white or Gainsboro backgrounds#002E5D) or Gunmetal (#253746)#FFB600) for highlights and CTAsEnsure sufficient color contrast for text readability:
#253746) or Space Blue (#002E5D) for body text on light backgrounds#D9E1E2) for text on dark backgrounds