Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/agentera/agently/architecture-diagramnpx skills add AgentEra/Agently --skill architecture-diagramgit clone --depth 1 https://github.com/AgentEra/AgentlyWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00047 | $0.00517 |
| Opus 5 | $0.00023 | $0.00259 |
| Sonnet 5 | $0.00009 | $0.00103 |
| Haiku 4.5 | $0.00005 | $0.00052 |
Grade A, and why
architecture-diagram scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Architecture Diagram
Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.
Visual design system
- Background
#020617with a subtle 40px grid pattern. - Font: JetBrains Mono (monospace) via Google Fonts.
- Component boxes: rounded rects (
rx="6"), 1.5px stroke, semi-transparent fills. Colour components by role:- facade / developer surface: fill
rgba(8,51,68,0.4), stroke#22d3ee - core contracts: fill
rgba(6,78,59,0.4), stroke#34d399 - plugins / providers: fill
rgba(120,53,15,0.3), stroke#fbbf24 - execution environment / capabilities: fill
rgba(76,29,149,0.4), stroke#a78bfa - observation / event bus: fill
rgba(251,146,60,0.3), stroke#fb923c - external / generic: fill
rgba(30,41,59,0.5), stroke#94a3b8
- facade / developer surface: fill
- Component name at 11px white bold; sublabel at 8-9px
#94a3b8. - Arrows via an SVG
markerarrowhead; draw connecting arrows before boxes so they sit behind them.
Layout rules
- Lay the system out as labelled horizontal bands stacked top-to-bottom, one band per architectural layer, with each layer's components inside its band.
- Keep ≥40px vertical gaps between stacked rows; never overlap boxes.
- Add a short header (title + subtitle) and a small legend mapping each colour to a layer. Place the legend outside every band.
Output
Return the complete HTML document as a single string. Do not include commentary outside the HTML.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- yesterday First seen · 41 lines · 47 tokens per session scan A c99afdcb1352
architecture-diagram is a skill published in the GitHub repository AgentEra/Agently (1,644 stars, last pushed 3d ago), licensed Apache-2.0. It adds 47 tokens to every session and 517 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
architecture-diagram
Generate dark-themed SVG architecture diagrams as self-contained HTML.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
pr-to-video
Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR…
slideshow
Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't…
general-video
Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…