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/jondarza/loadout/loadout-system-designnpx skills add JOndarza/loadout --skill loadout-system-designgit clone --depth 1 https://github.com/JOndarza/loadoutWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/jondarza/loadout/loadout-system-design)<a href="https://agentmods.dev/skills/jondarza/loadout/loadout-system-design"><img src="https://agentmods.dev/badge/skills/jondarza/loadout/loadout-system-design.svg" alt="Measured on agentmods" height="20"></a>What 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.1 | $0.00132 | $0.01022 |
| Opus 5 | $0.00066 | $0.00511 |
| Sonnet 5 | $0.00026 | $0.00204 |
| Haiku 4.5 | $0.00013 | $0.00102 |
Grade A, and why
loadout-system-design 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 6d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 60 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Loadout — System Design Reference
Quick Navigation
| What you need | Load |
|---|---|
| Two-process overview, file map, state flow, build pipeline | references/architecture.md |
| Extension entry, src/ modules, data.js API, security model | references/extension-host.md |
| Angular 21, state services, DataSyncService, shared primitives | references/webview-angular.md |
| Full message catalogue (WebviewMessage + ExtensionMessage types) | references/messaging-protocol.md |
| Domain types, storage paths, profiles, hash/sync mechanics | references/domain-storage.md |
| File size limits, CommonJS rules, Angular rules, git, formatting | references/coding-rules.md |
| Design tokens, color palettes, SCSS mixins, animations, a11y | references/ui-design-system.md |
Non-negotiable invariants
These apply everywhere, always — no exceptions.
- No VSCode API in webview — never
import vscodeor usefs/path/osfrom any file underwebview/. - All filesystem mutations go through
data.js— no ad-hocfs.writeFileSyncinsrc/modules. - Every Angular component:
standalone: true+ChangeDetectionStrategy.OnPush— no exceptions. - State in
core/state/*.state.tssignal services only — components are dumb views; no component-local mutable state for domain data. - Signals for state, RxJS only for the bridge stream — no
BehaviorSubject/ReplaySubjectfor state. - File size cap ~400 lines — split into a new
src/module or Angular subcomponent when approaching this. - Profiles store filenames only — never copy file content into
profiles.json. - Icons:
lucide-angularonly — no SVG file imports, no inline<svg>. - CommonJS in extension host —
require()/module.exportsin all.jsroot files;update-claude.mjsis the sole ESM exception. - Build
webview-dist/before committing UI changes — runcd webview && npm run build.
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 6d ago First seen · 60 lines · 132 tokens per session scan A 6d1bf3ecbd52
loadout-system-design is a skill published in the GitHub repository JOndarza/loadout (2 stars, last pushed 4mo ago), licensed MIT. It adds 132 tokens to every session and 1,022 once invoked, about $0.0007 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-31.
Other skills, from other repositories
032-architecture-adr-non-functional-requirements
Facilitates conversational discovery to create Architectural Decision Records (ADRs) for non-functional requirements using the ISO/IEC 25010:2023 quality model. Use when the user wants to document quality attributes, NFR decisions, security/performance/scalability architecture, or design systems with measurable…
component-family-consistency
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library…
modular-scale-typography
Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.
extract-design
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual…
data-display-and-selection
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use large hit areas (the whole row or card, not just a checkbox). Selected state is communicated through a subtle background colour shift. Mass actions appear when items are selected.…
generate-ui-from-brand
Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made. Extracts live design tokens, normalizes them into a semantic system, applies UX principles, and outputs an actionable UI spec. Use when building UI for an existing brand from scratch, auditing a design system, or…