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 roedyrustam/vibes-plug --skill modern-css-native-expertgit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote 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/roedyrustam/vibes-plug/modern-css-native-expert)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/modern-css-native-expert"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/modern-css-native-expert/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/modern-css-native-expert"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/modern-css-native-expert.svg" alt="Reviewed on agentmods" width="80" 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.00057 | $0.02828 |
| Opus 5.5 | $0.00023 | $0.01131 |
| Sonnet 5.5 | $0.00011 | $0.00566 |
| Haiku 4.5 | $0.00006 | $0.00283 |
Grade A, and why
modern-css-native-expert 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 4d 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 — 255 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Modern Native CSS Expert (2026 Standard & Primitives)
English
Orchestration & Integration
Integrates tightly with the following domain skills:
modern-web-guidance: Primary companion tool to look up standardized native CSS best practices (npx -y modern-web-guidance@latest search "<query>").design-system-architect: Supplies headless token definitions and surface container hierarchies.tailwind-expert: Bridges native CSS primitives with Tailwind v4@themeand dynamic utility classes.visual-ui-auditor: Validates smooth top-layer transitions, focus rings, and layout stability.anti-slop: Eliminates unnecessary JS polyfills and div-soup wrappers.senior-frontend: Integrates native CSS features into React 19 / Next.js 15 architectures.
Purpose & Overview
Production-grade engineering guide for modern Native CSS features (2026 Edition) that replace cumbersome JavaScript libraries with pure browser-native primitives. Covers the CSS Anchor Positioning API for tooltips/popovers, @starting-style for smooth entry/exit animations on top-layer elements (<dialog>, popover), View Transitions API Level 2, Container Queries (@container), and the :has() relational selector.
Key Capabilities
- CSS Anchor Positioning: Eliminating Floating UI / Popper.js dependencies. Tether tooltips, menus, and popovers to trigger elements natively with auto-flip fallbacks (
position-try-fallbacks). - Smooth Top-Layer Transitions: Animating
<dialog>and[popover]elements fromdisplay: noneto visible with@starting-styleandtransition-behavior: allow-discrete. - Container Queries (
@container): Component-level responsive design based on parent container dimensions rather than viewport width. - Relational
:has()Selector: Styling parent containers or sibling trees based on nested child states without React/JS state overhead. - Native CSS Nesting &
@layer: Structuring clean, zero-build styles with cascade priority layers.
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.
- 4d ago Changed · +11 lines · +3 tokens per session acadd67a1c4b
- 5d ago Changed · +1 lines 4e65122298db
- 8d ago Changed 24186ee1957b
- 17d ago Changed c1a18352dd1d
- 22d ago Changed 8031cb68d4b3
- 23d ago Changed · +53 lines 15c134e5052b
- 25d ago Changed · -6 lines · +41 tokens per session b77220fcbcc2
- 27d ago Changed · +6 lines · -41 tokens per session d33156198c99
- 1mo ago Changed c6b966185e5d
- 1mo ago First seen · 190 lines · 54 tokens per session scan A 1b2d8cab73e4
modern-css-native-expert is a skill published in the GitHub repository roedyrustam/vibes-plug (113 stars, last pushed yesterday), licensed MIT. It adds 57 tokens to every session and 2,828 once invoked, about $0.0002 per session on Opus 5.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-12.
Other skills, from other repositories
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
ai-prompt-regression-testing
Use when comparing prompt changes against a fixed evaluation set: record actual model settings, required checks, missing results, judge limitations and case-level regression evidence.
ui-design
Unify product UI design, frontend implementation, and verification. Use when asked to design, redesign, build, or fix a web, desktop, or mobile interface; a page, dashboard, form, component, design system, responsive layout, accessibility, interface animation, or editable hero/banner/infographic within a product…
frontend-design
A design guide for building polished web interfaces such as pages, dashboards, forms, navigation, and reusable UI components. It covers HTML, CSS, JavaScript, and common frontend frameworks.
funnel
Constructing landing pages from a focused section to a premium multi-stage studio pipeline: structure, copy, conversion, responsive build, craft gates, and launch handoffs. Use when building or optimizing an LP, CTA, conversion flow, or premium launch surface.
muse
Defining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.