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 ginkida/rustyhand --skill css-expertgit clone --depth 1 https://github.com/ginkida/rustyhandWrote 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/ginkida/rustyhand/css-expert)<a href="https://agentmods.dev/skills/ginkida/rustyhand/css-expert"><img src="https://agentmods.dev/badge/skills/ginkida/rustyhand/css-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/ginkida/rustyhand/css-expert"><img src="https://agentmods.dev/badge/skills/ginkida/rustyhand/css-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.00021 | $0.00624 |
| Opus 5.5 | $0.00008 | $0.00250 |
| Sonnet 5.5 | $0.00004 | $0.00125 |
| Haiku 4.5 | $0.00002 | $0.00062 |
Grade A, and why
css-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 1mo 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.
This is a copy
100% identical to css-expert — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 40 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS Expert
A front-end layout specialist with deep command of modern CSS, from flexbox and grid to container queries and cascade layers. This skill provides precise, standards-compliant guidance for building responsive, accessible, and maintainable user interfaces using the latest CSS specifications and best practices.
Key Principles
- Use flexbox for one-dimensional layouts (rows or columns) and CSS Grid for two-dimensional layouts (rows and columns simultaneously)
- Embrace custom properties (CSS variables) for theming, spacing scales, and any value that repeats or needs runtime adjustment
- Design mobile-first with min-width media queries, layering complexity as viewport size increases
- Prefer logical properties (inline-start, block-end) over physical ones (left, bottom) for internationalization-ready layouts
- Leverage the cascade intentionally with @layer declarations to control specificity without resorting to !important
Techniques
- Use flexbox justify-content and align-items for main-axis and cross-axis alignment; flex-wrap with gap for fluid card layouts
- Define CSS Grid layouts with grid-template-areas for named regions, and auto-fit/auto-fill with minmax() for responsive grids without media queries
- Create design tokens as custom properties on :root (--color-primary, --space-md) and override them in scoped selectors or media queries
- Use @container queries to style components based on their parent container size rather than the viewport
- Build animations with @keyframes and animation shorthand; prefer transform and opacity for GPU-accelerated, jank-free motion
- Apply transitions on interactive states (hover, focus-visible) with appropriate duration (150-300ms) and easing functions
- Use the :has() selector for parent-aware styling, :is()/:where() for grouping selectors with controlled specificity
Common Patterns
- Holy Grail Layout: CSS Grid with grid-template-rows (auto 1fr auto) and grid-template-columns (sidebar content sidebar) for header/footer/sidebar page structures
- Fluid Typography: clamp(1rem, 2.5vw, 2rem) for font sizes that scale smoothly between minimum and maximum values without breakpoints
- Aspect Ratio Boxes: Use the aspect-ratio property directly instead of the legacy padding-bottom hack for responsive media containers
- Dark Mode Toggle: Define color tokens as custom properties, swap them inside a prefers-color-scheme media query or a data-theme attribute selector
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.
- 1mo ago First seen · 40 lines · 21 tokens per session scan A ca02c989abda
css-expert is a skill published in the GitHub repository ginkida/rustyhand (20 stars, last pushed 1mo ago), licensed MIT. It adds 21 tokens to every session and 624 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to css-expert, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
maintaining-dev-playground
Keeps the Dev Playground current with the application. Use when editing UI components in apps/client/src/ — assesses playground candidacy, checks existing playground coverage, and guides adding or updating showcases. Also use when directly editing files in apps/client/src/dev/, building new widgets or features, or…
design-system
Use when a ticket needs a systematic token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), W3C DTCG design-token files, theming and dark mode, component specs with full state coverage, or a recommendation for which design system a product should have.…
frontend-foundations
Use on any frontend delivery to hold the surface-specific quality floor that engineering-craft doesn't cover — intentional visual hierarchy over template defaults, accessible-by-default markup, design tokens instead of hardcoded values, reusable components matching the repo, every state designed, and…
web-artifacts-builder
Modern web development patterns using React + Tailwind CSS + shadcn/ui for building production-quality, accessible, and performant web applications.
frontend-aesthetics
Distinctive frontend design principles for avoiding generic AI defaults, implementing thoughtful typography/color/animations, and creating polished user experiences based on Claude Code design research.
hive.browser-automation
Required before any hive-browser CLI command. The browser is driven from the terminal by running hive-browser ... --json via terminalexec — not via MCP tools. Teaches the browser lifecycle rules (the bridge attaches to the USER'S running Chrome — never kill or launch browser processes; timeouts are transport issues…