Home / Skills / diagram-design

cathrynlavery/diagram-design

cathrynlavery / diagram-design

Agent SkillsHTMLMIT

Editorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 42 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.

43.1kstars
2.8kforks
27open issues
2026-10-01last pushed
MITlicense

What it is, and how people use it

Editorial diagram design for Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi. 42 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop. It sits on the Agent Skills shelf of the catalog, maintained by @cathrynlavery.

✓Drop-in for Claude Code, Codex CLI and Cursor - install and it just runs.
✓Read the SKILL.md / README first; most setups are one command from the docs.
✓Teams use it to standardise how agents behave across every repo in the org.
agent-skillsclaude-codecodexdata-visualizationdiagrams
cathrynlavery.github.io/diagram-design/

Why builders keep it installedAgent Skills benefits

Your agent stops guessing the workflow

A skill packages the exact steps, file conventions and checklists an expert would follow. The model spends its context on your feature instead of figuring out how the tool works.

One install, every repo behaves the same

Commit the skill to your project and every teammate's Claude Code, Codex or Cursor run inherits the same quality bar - including the new teammate on day one.

Cheaper runs, fewer retries

Tuned instructions cut failed attempts and half-baked output. Fewer retries means fewer tokens burned and noticeably shorter sessions on paid model plans.

Survives the next model release

Skills are plain markdown and scripts the community versions together. A model upgrade changes behaviour, not your workflow - unlike a bespoke prompt that breaks silently.

Contributorsloading from GitHub…

Languagesestimated from snapshot

  • HTML 72.0%
  • TypeScript 16.0%
  • Shell 12.0%

Community pulsesnapshot ratios, normalized

starsforksissues ×3watchers