agentsclimarketplace

Loadout system design

Skill JOndarza/loadout/.claude/skills/loadout-system-design

A VSCode extension that lets you switch agent, skill, and command configurations as if they were loadouts in a game. Save profiles, swap between them with one click, sync items across projects through a global catalog, and configure Claude Code behavior — all from a single panel.

Install
npx -y skills add JOndarza/loadout --skill loadout-system-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Complete system design reference for the Loadout VSCode extension — a GUI panel for managing Claude Code agents, skills, and commands as swappable equipment loadouts. Use at the start of ANY implementation task to ensure design consistency. Covers: two-process architecture (Extension Host Node.js + Angular 21 Webview), postMessage protocol, data.js filesystem layer, signal-based state services, storage layout, and non-negotiable coding rules. Invoke when implementing stories, adding features, reviewing code, making ANY UI/styling change (design tokens, SCSS, components, animations), or when any system design question arises in Loadout.

SKILL.md

4.2 KB, as published. Nobody here has run it

Loadout — System Design Reference

Quick Navigation

What you needLoad
Two-process overview, file map, state flow, build pipelinereferences/architecture.md
Extension entry, src/ modules, data.js API, security modelreferences/extension-host.md
Angular 21, state services, DataSyncService, shared primitivesreferences/webview-angular.md
Full message catalogue (WebviewMessage + ExtensionMessage types)references/messaging-protocol.md
Domain types, storage paths, profiles, hash/sync mechanicsreferences/domain-storage.md
File size limits, CommonJS rules, Angular rules, git, formattingreferences/coding-rules.md
Design tokens, color palettes, SCSS mixins, animations, a11yreferences/ui-design-system.md

Non-negotiable invariants

These apply everywhere, always — no exceptions.

  1. No VSCode API in webview — never import vscode or use fs/path/os from any file under webview/.
  2. All filesystem mutations go through data.js — no ad-hoc fs.writeFileSync in src/ modules.
  3. Every Angular component: standalone: true + ChangeDetectionStrategy.OnPush — no exceptions.
  4. State in core/state/*.state.ts signal services only — components are dumb views; no component-local mutable state for domain data.
  5. Signals for state, RxJS only for the bridge stream — no BehaviorSubject / ReplaySubject for state.
  6. File size cap ~400 lines — split into a new src/ module or Angular subcomponent when approaching this.
  7. Profiles store filenames only — never copy file content into profiles.json.
  8. Icons: lucide-angular only — no SVG file imports, no inline <svg>.
  9. CommonJS in extension host — require() / module.exports in all .js root files; update-claude.mjs is the sole ESM exception.
  10. Build webview-dist/ before committing UI changes — run cd webview && npm run build.

Feature implementation checklist

When adding a new feature end-to-end, follow this order:

  1. Domain — add or extend types in webview/src/app/core/messages.ts (single source of truth for all shared types).
  2. Storage — decide persistence: profiles.json, ui-state.json, or a new data.js function. Update data.js and src/snapshot.js::buildInitialData if InitialData changes.
  3. Extension messages — add the WebviewMessage union variant and/or ExtensionMessage variant to messages.ts; handle the new case in src/message-handler.js.
  4. data.js — implement the filesystem operation (pure I/O, no VSCode API, no side effects beyond fs).
  5. State service — update the relevant core/state/*.state.ts to expose new signals or a setter; update DataSyncService.applyData() if InitialData fields changed.
  6. Component — create a standalone OnPush component or extend an existing feature. Inject the state service; never own domain state locally. Send actions via bridge.send() in methods, not templates.
  7. Validators — if new user-supplied input crosses the bridge, add a guard in src/validators.js and call it in message-handler.js before acting.
  8. Build — run cd webview && npm run build, verify webview-dist/ is updated.
  9. Git — stage specific files by name; conventional commit in imperative mood.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.