메뉴
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