AI agent skills
Teach any coding agent to write, style and check spinagram diagrams.
spinagram ships agent skills: instructions, recipes and worked examples that a coding agent loads
when you ask it for a diagram. They use the common skill format (a folder with a SKILL.md), so the
same files work in any tool that reads skills. Tools that don't can read the same text as plain
instructions.
| Skill | Teaches |
|---|---|
spinagram | Writing diagrams in Python or YAML, layout, icons, facts, checks and delivery to PowerPoint and Figma |
spinagram-css | Styling with CSS, recipes for cards, dark canvases, tiers and edge semantics, fitting dense cloud diagrams on one slide, and five worked examples (AWS, Kubernetes, Google Cloud) |
Install
spinagram skills install copies the skills into the folder your agent reads:
spinagram skills install --agent claude # .claude/skills/ in this project
spinagram skills install --agent codex --user # ~/.agents/skills/ for every project
spinagram skills install spinagram-css --agent cursor --agent gemini
spinagram skills install --dest path/to/skills # any other tool--agent | Project folder | With --user |
|---|---|---|
agents (default) | .agents/skills | ~/.agents/skills |
claude | .claude/skills | ~/.claude/skills |
codex | .agents/skills | ~/.agents/skills |
copilot | .github/skills | ~/.copilot/skills |
cursor | .cursor/skills | ~/.cursor/skills |
gemini | .gemini/skills | ~/.gemini/skills |
opencode | .opencode/skills | ~/.config/opencode/skills |
These are the folders each tool documented at the time of writing. If yours reads another folder,
pass it with --dest. --agent can be repeated, and tools that share a folder get one copy.
| Option | Effect |
|---|---|
names | Skills to install; all of them when left out |
--user | The user's folder instead of the project's |
--link | Symlink instead of copying, so upgrading spinagram updates the skills |
--force | Replace skills that are already installed |
Commit a project install to share it with your team. A user install with --link stays current
across upgrades.
Agents without skill support
Print a skill and put it where your agent reads instructions (AGENTS.md, a rules file or a system
prompt):
spinagram skills show spinagram-css >> AGENTS.md
spinagram skills path spinagram-css # the folder, with references/ and examples/
spinagram skills listWhat the CSS skill covers
- Attaching stylesheets, the selector and property subset, and how the cascade resolves values.
- Recipes in
references/recipes.css: base cards, layout-only groups, a dark cluster canvas, a glowing hero element, network tiers, edge semantics and AWS, Google Cloud and Kubernetes accents. - Fitting dense diagrams on the fixed 1920×1080 canvas: sized cards, the space text gets next to an
icon, compact type, group gaps and
layout.area. - Edge routing habits that keep arrows off boxes with the
flexengine, and when to tryelk. - The debugging loop:
spinagram check,check --styles --selectand the live inspector.
The worked examples are the ones in
examples/showcase.