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/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.00000 | $0.01162 |
| Opus 5 | $0.00000 | $0.00581 |
| Sonnet 5 | $0.00000 | $0.00232 |
| Haiku 4.5 | $0.00000 | $0.00116 |
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 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 — 36 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.
- 2d ago First seen · 36 lines · 0 tokens per session scan A 0f7d0470c090
css-postcss is a cursor rule published in the GitHub repository Ocean-Industries-Concept-Lab/openbridge-webcomponents (91 stars, last pushed 3d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 1,162 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-30.
Other cursor rules, from other repositories
general
Wonder Blocks design system conventions, component patterns, and coding standards.
components
CTA: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-primary-500 text-white rounded-lg hover:bg-primary-700 cursor-pointer Sub: inline-flex items-center justify-center gap-2 h-10 px-4 text-[1rem] font-medium bg-white text-slate-700 border border-slate-200 rounded-lg hover:bg-gray-50…
cursorrules
Read and follow AGENTS.md for all development conventions.
sigil-design-system
Every custom preset MUST populate ALL 33 token categories and ALL 519 fields.
taste-enforcement
These dials drive all downstream decisions. Adjust per-prompt when the user specifies a different mood.
css-ui-enforcement
Cursor rule "css-ui-enforcement" from Kevin-Liu-01/Sigil-UI, covering css ui enforcement, enforce: no style + classname soup (react), enforce: scrollbars (thin + neutral), enforce: hit area expansion (tailwind-first) and pattern: @property for animatable gradients.