hermes-agent/skills/creative/excalidraw/references/dark-mode.md
teknium1 732c66b0f3 refactor: reorganize skills into sub-categories
The skills directory was getting disorganized — mlops alone had 40
skills in a flat list, and 12 categories were singletons with just
one skill each.

Code change:
- prompt_builder.py: Support sub-categories in skill scanner.
  skills/mlops/training/axolotl/SKILL.md now shows as category
  'mlops/training' instead of just 'mlops'. Backwards-compatible
  with existing flat structure.

Split mlops (40 skills) into 7 sub-categories:
- mlops/training (12): accelerate, axolotl, flash-attention,
  grpo-rl-training, peft, pytorch-fsdp, pytorch-lightning,
  simpo, slime, torchtitan, trl-fine-tuning, unsloth
- mlops/inference (8): gguf, guidance, instructor, llama-cpp,
  obliteratus, outlines, tensorrt-llm, vllm
- mlops/models (6): audiocraft, clip, llava, segment-anything,
  stable-diffusion, whisper
- mlops/vector-databases (4): chroma, faiss, pinecone, qdrant
- mlops/evaluation (5): huggingface-tokenizers,
  lm-evaluation-harness, nemo-curator, saelens, weights-and-biases
- mlops/cloud (2): lambda-labs, modal
- mlops/research (1): dspy

Merged singleton categories:
- gifs → media (gif-search joins youtube-content)
- music-creation → media (heartmula, songsee)
- diagramming → creative (excalidraw joins ascii-art)
- ocr-and-documents → productivity
- domain → research (domain-intel)
- feeds → research (blogwatcher)
- market-data → research (polymarket)

Fixed misplaced skills:
- mlops/code-review → software-development (not ML-specific)
- mlops/ml-paper-writing → research (academic writing)

Added DESCRIPTION.md files for all new/updated categories.
2026-03-09 03:35:53 -07:00

2.2 KiB

Excalidraw Dark Mode Diagrams

To create a dark-themed diagram, use a massive dark background rectangle as the first element in the array. Make it large enough to cover any viewport:

{
  "type": "rectangle", "id": "darkbg",
  "x": -4000, "y": -3000, "width": 10000, "height": 7500,
  "backgroundColor": "#1e1e2e", "fillStyle": "solid",
  "strokeColor": "transparent", "strokeWidth": 0
}

Then use the following color palettes for elements on the dark background.

Text Colors (on dark)

Color Hex Use
White #e5e5e5 Primary text, titles
Muted #a0a0a0 Secondary text, annotations
NEVER #555 or darker Invisible on dark bg!

Shape Fills (on dark)

Color Hex Good For
Dark Blue #1e3a5f Primary nodes
Dark Green #1a4d2e Success, output
Dark Purple #2d1b69 Processing, special
Dark Orange #5c3d1a Warning, pending
Dark Red #5c1a1a Error, critical
Dark Teal #1a4d4d Storage, data

Stroke and Arrow Colors (on dark)

Use the standard Primary Colors from the main color palette -- they're bright enough on dark backgrounds:

  • Blue #4a9eed, Amber #f59e0b, Green #22c55e, Red #ef4444, Purple #8b5cf6

For subtle shape borders, use #555555.

Example: Dark mode labeled rectangle

Use container binding (NOT the "label" property, which doesn't work). On dark backgrounds, set text strokeColor to "#e5e5e5" so it's visible:

[
  {
    "type": "rectangle", "id": "r1",
    "x": 100, "y": 100, "width": 200, "height": 80,
    "backgroundColor": "#1e3a5f", "fillStyle": "solid",
    "strokeColor": "#4a9eed", "strokeWidth": 2,
    "roundness": { "type": 3 },
    "boundElements": [{ "id": "t_r1", "type": "text" }]
  },
  {
    "type": "text", "id": "t_r1",
    "x": 105, "y": 120, "width": 190, "height": 25,
    "text": "Dark Node", "fontSize": 20, "fontFamily": 1,
    "strokeColor": "#e5e5e5",
    "textAlign": "center", "verticalAlign": "middle",
    "containerId": "r1", "originalText": "Dark Node", "autoResize": true
  }
]

Note: For standalone text elements on dark backgrounds, always set "strokeColor": "#e5e5e5" explicitly. The default #1e1e1e is invisible on dark.