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 skills add Cratis/AI --skill cratis-components-toolbargit clone --depth 1 https://github.com/Cratis/AIWrote 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/cratis/ai/cratis-components-toolbar)<a href="https://agentmods.dev/skills/cratis/ai/cratis-components-toolbar"><img src="https://agentmods.dev/badge/skills/cratis/ai/cratis-components-toolbar.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.00108 | $0.02668 |
| Opus 5 | $0.00054 | $0.01334 |
| Sonnet 5 | $0.00022 | $0.00534 |
| Haiku 4.5 | $0.00011 | $0.00267 |
Grade A, and why
cratis-components-toolbar 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.
How it starts
The opening of the file, as written. The whole thing — 260 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Cratis Components toolbars
The Toolbar family builds canvas-style tool palettes — the pill-shaped bar
of icon buttons you find in a drawing or diagram editor. For a page action menu
over a list, use DataPage.MenuItems instead (see the
cratis-arc-react-page skill).
Verified product sources
| Package | Version | Verified from |
|---|---|---|
@cratis/components |
3.0.0 |
its package manifest and Toolbar component sources |
primeicons |
^8.0.0 |
peer of @cratis/[email protected] |
react |
^19.0.0 |
peer of @cratis/[email protected] |
Import from the subpath
Every toolbar export is a flat sibling — there are no compound members. It
is <ToolbarGroup>, never <Toolbar.Group>.
import {
Toolbar, ToolbarButton, ToolbarSeparator, ToolbarGroup,
ToolbarSection, ToolbarContext, ToolbarFanOutItem, ToolbarFolder,
ToolbarSlot, ToolbarSlotProvider, ToolbarLayout, useToolbarSlot,
} from '@cratis/components/Toolbar';
The pieces
| Component | Purpose |
|---|---|
Toolbar |
the pill-shaped container |
ToolbarButton |
icon or text button with a tooltip and optional active state |
ToolbarSeparator |
divider between groups |
ToolbarGroup |
a sub-group inside a toolbar, optionally filled from a slot |
ToolbarSection |
animated section that morphs between named contexts |
ToolbarContext |
a named set of buttons inside a ToolbarSection |
ToolbarFanOutItem |
button that slides out a sub-panel of buttons |
ToolbarFolder |
button that opens a grid or list of buttons |
ToolbarSlotProvider / ToolbarSlot / useToolbarSlot |
contribute buttons from elsewhere in the tree |
ToolbarLayout |
a named region rendered from slot content |
Step 1 — A basic toolbar
Buttons default to a vertical layout. title is the required prop and it is
what appears in the tooltip — there is no tooltip prop on ToolbarButton.
import { Toolbar, ToolbarButton } from '@cratis/components/Toolbar';
export const DrawingToolbar = () => (
<Toolbar>
<ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
<ToolbarButton icon='pi pi-pencil' title='Draw' />
<ToolbarButton icon='pi pi-stop' title='Rectangle' />
</Toolbar>
);
What ships with it
1 file 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.
- yesterday First seen · 260 lines · 108 tokens per session scan A 2b897952e76c
cratis-components-toolbar is a skill published in the GitHub repository Cratis/AI (2 stars, last pushed yesterday), licensed MIT. It adds 108 tokens to every session and 2,668 once invoked, about $0.0005 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-09-06.
Other skills, from other repositories
wpf
Build and modernize WPF applications on .NET with correct XAML, data binding, commands, threading, styling, and Windows desktop migration decisions. USE FOR: working on WPF UI, MVVM, binding, commands, or desktop modernization; migrating WPF from .NET Framework to .NET; integrating newer Windows capabilities into a…
sharpconsoleui
Use SharpConsoleUI to build full terminal (TUI) applications in .NET — equally suited to full-screen single-window apps and multi-window desktops with overlapping draggable windows — using a compositor, a DOM layout engine, and 40+ reactive controls (data tables, tree views, forms, an embedded PTY terminal, markdown…
mvvm
Implement the Model-View-ViewModel pattern in .NET applications with proper separation of concerns, data binding, commands, and testable ViewModels using MVVM Toolkit. USE FOR: implementing UI separation with Model-View-ViewModel; using MVVM Toolkit (CommunityToolkit.Mvvm) for ViewModels; designing testable UI…
astro-developer
Comprehensive guide for developing in the Astro monorepo. Covers architecture, debugging, testing, and critical constraints. Use when working on features, fixes, tests, or understanding the codebase structure.
winui
Build or review WinUI 3 applications with the Windows App SDK, including MVVM patterns, packaging decisions, navigation, theming, windowing, and interop boundaries with other .NET stacks. USE FOR: building native modern Windows desktop UI on WinUI 3; integrating Windows App SDK features into a .NET app; deciding…
sonarjs
Use SonarJS-derived rules in .NET repositories that ship JavaScript or TypeScript frontends and need deeper bug-risk, code-smell, or cognitive-complexity checks than a minimal ESLint baseline. USE FOR: SonarQube, SonarCloud, or eslint-plugin-sonarjs setups; frontend code smells; cognitive complexity and deeper…