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 rules/julianoczkowski/create-trimble-app/modus-angular-utility-panel-usagegit clone --depth 1 https://github.com/julianoczkowski/create-trimble-appWhat 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.00000 | $0.00974 |
| Opus 5 | $0.00000 | $0.00487 |
| Sonnet 5 | $0.00000 | $0.00195 |
| Haiku 4.5 | $0.00000 | $0.00097 |
Grade A, and why
modus-angular-utility-panel-usage 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 2d 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 — 131 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Correct Implementation Pattern Utility Panel
Demo Page Structure
@Component({
selector: 'app-utility-panel-demo',
template: `
<!-- Main page content -->
<div class="p-6">
<modus-button (buttonClick)="togglePanel()">
{{ expanded() ? 'Close' : 'Open' }} Panel
</modus-button>
<div class="mt-4 bg-card p-4">Main workspace content here</div>
</div>
<!-- Panel OUTSIDE the content flow, at the end of the template -->
<modus-utility-panel
[expanded]="expanded()"
className="fixed-utility-panel"
position="right"
panelWidth="312px"
ariaLabel="Settings panel"
>
<div slot="header">
<div class="flex items-center justify-between w-full">
<div class="text-xl font-bold">Panel Title</div>
<modus-button
size="sm"
variant="borderless"
icon="close"
iconPosition="only"
ariaLabel="Close panel"
(buttonClick)="closePanel()"
/>
</div>
</div>
<div class="space-y-4">
<!-- Panel body content -->
</div>
<div slot="footer" class="flex gap-2 justify-end">
<modus-button color="secondary" (buttonClick)="closePanel()"> Cancel </modus-button>
<modus-button color="primary" (buttonClick)="save()"> Save </modus-button>
</div>
</modus-utility-panel>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UtilityPanelDemoComponent {
readonly expanded = signal<boolean>(false);
togglePanel(): void {
this.expanded.set(!this.expanded());
}
closePanel(): void {
this.expanded.set(false);
}
save(): void {
// Save logic
this.closePanel();
}
}
What NOT to Do
Don't Nest Panel Inside Relative Containers
<!-- WRONG: Causes layout issues -->
<div class="relative">
<modus-utility-panel [expanded]="expanded()"> ... </modus-utility-panel>
</div>
Don't Forget the fixed-utility-panel className
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.
- 2d ago First seen · 131 lines · 0 tokens per session scan A d704a98a8225
modus-angular-utility-panel-usage is a cursor rule published in the GitHub repository julianoczkowski/create-trimble-app (3 stars, last pushed 1mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 974 tokens. 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 cursor rules, from other repositories
angular-20
This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.
dev-standard
Apache Superset development standards and guidelines for Cursor IDE.
cli-error-handling
CLI command error handling patterns.
prefer-direct-imports-over-module-mocks
Prefer extracting a testable core over vi.mock / vi.resetModules when unit tests need to reach production logic entangled with config, env, or singletons.
control-plane-descriptors
Control plane descriptor and instance implementation patterns.
family-instance-domain-actions
Family instance domain action implementation patterns.