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 agents/ocean-industries-concept-lab/openbridge-webcomponents/css-postcssgit clone --depth 1 https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponentsWhat 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.00021 | $0.01144 |
| Opus 5 | $0.00010 | $0.00572 |
| Sonnet 5 | $0.00004 | $0.00229 |
| Haiku 4.5 | $0.00002 | $0.00114 |
Grade A, and why
css-postcss 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 3d 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 — 34 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS / PostCSS Reference
Full reference with diagrams, code examples, and complete mixin inventories lives in IMPLEMENTATION_GUIDELINES.md § PostCSS. This file summarises the key concepts so agents have immediate context.
Key concepts
variables.cssis generated by the obc-figma-plugin (Figma community plugin1448419213272098259) — do not hand-edit. Token additions, renames, or value changes happen in Figma (or in the plugin'srename()function), then the whole file is replaced with the plugin'scssvariablescodegen output. See IMPLEMENTATION_GUIDELINES.md § PostCSS for the full caution.- Global palette:
src/palettes/variables.css— four themes (day,dusk,night,bright) viadata-obc-themeattribute on:root. - Two-layer color model: Raw primitives (
--base-blue-*,--base-gray-*,--base-cyan-*, …, plus-tintvariants) are redefined per theme. Semantic tokens (e.g.--instrument-enhanced-primary-color,--element-active-color,--automation-medium-base-blue-*) are layered on top and consumed by components. Semantic tokens are stored as literalrgb(...)values per theme — not asvar(--base-…)references — so overriding only the primitives is not enough to fully repaint the UI; override both layers (or only the semantic tokens) when re-skinning. Thenighttheme already uses a teal/green (rgb(88, 200, 162)) for--instrument-enhanced-primary-color, proving the architecture supports non-blue accents. A few hot spots reference raw primitives directly:charthelpers/constants.ts(CHART_SECTOR_ENHANCED_COLORS, used by line/area/donut/pie charts),ar/building-blocks/poi-line/*.css, and the--automation-medium-base-blue-*tokens. Consumers can re-theme without forking by shipping a stylesheet aftervariables.cssthat redeclares the relevant tokens under each:root[data-obc-theme="…"]selector; Chart.js components read CSS vars at render-time viagetCssVariableValue(), so overrides must be present on an ancestor before the chart mounts. - Touch target / Visual target: Interactive components use a two-layer DOM — an outer invisible touch target (default 48 px) and an inner visible wrapper (default 32 px). The
@mixin stylebridges them via thevisibleWrapperClassparameter. @mixin style: PostCSS build-time mixin generating six interaction states (enabled, activated, hover, pressed, focus-visible, disabled). Parameters:style=<flat|normal|raised|amplified|indent|selected>, optionalvisibleWrapperClass=.class, optionalnoClickflag for display-only sub-parts.- Color token convention: Surface colors follow
--{variant}-{state}-background-color/--{variant}-{state}-border-color. Text/icon colors follow--on-{variant}-{role}-color(roles:active,neutral,disabled). - Size variants:
.obc-component-size-regular(default) /-medium/-large/-xlclasses on an ancestor scale all--ui-components-*sizing tokens via CSS variable inheritance. - Font mixins: Three families — UI (
font-button,font-label,font-body, etc.), Instrument (font-instrument-value-*,font-instrument-label, etc.), Automation (font-automation-value-*). Full list inIMPLEMENTATION_GUIDELINES.md. - Alert mixins:
alert-alarm,alert-critical,alert-cautioninsrc/mixins/alert.css. Blink animation drives the CSS@propertyregistered--alarm-blink-on/offand--warning-blink-on/off, but is driven from TypeScript via the Web Animations API insrc/palettes/blinking.ts(blinkingInstall()), not by a CSS@keyframes— seealert-frame,alert-iconandalert-buttonfor the call sites. Components bind opacity to those custom properties; the periods live inblinking.ts. --obc-can-hover: CSS variable kill-switch for hover feedback (defined insrc/main.css, consumed by@mixin styleviacolor-mix()).- Icon slots: use
<obi-placeholder></obi-placeholder>or other<obi-*>icons (1000+ available).
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.
- 3d ago First seen · 34 lines · 21 tokens per session scan A 100bd5f96ff7
css-postcss is an agent published in the GitHub repository Ocean-Industries-Concept-Lab/openbridge-webcomponents (91 stars, last pushed 4d ago), licensed Apache-2.0. It adds 21 tokens to every session and 1,144 once invoked, about $0.0001 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 agents, from other repositories
fundamental-styles
Agent "fundamental-styles" from SAP/fundamental-ngx, covering fundamental-styles css integration, architecture, bem naming convention, scss import pattern and css class building.
angular-patterns
// Optional with default value readonly name = input ('').
webc-generator
The webc-generator is an NX executor that automatically converts UI5 Web Components into Angular-native wrapper components. It eliminates manual maintenance of 100+ component wrappers by reading a Custom Elements Manifest (CEM) and generating the full library from it.
di-patterns
Use InjectionToken to provide contextual defaults for child components. This pattern allows parent components to influence default values without directly manipulating child component inputs.
nx-workflow
Purpose: Understanding the NX monorepo structure, development patterns, and best practices. For commands, see docs/internal/commands.md.
breaking-changes
A breaking change is any modification that could cause existing consumer code to fail or behave differently after upgrading.