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 iliaal/whetstone --skill ia-tailwind-cssgit clone --depth 1 https://github.com/iliaal/whetstoneWrote 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/iliaal/whetstone/ia-tailwind-css)<a href="https://agentmods.dev/skills/iliaal/whetstone/ia-tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/whetstone/ia-tailwind-css/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/iliaal/whetstone/ia-tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/whetstone/ia-tailwind-css.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.00062 | $0.01018 |
| Opus 5 | $0.00031 | $0.00509 |
| Sonnet 5 | $0.00012 | $0.00204 |
| Haiku 4.5 | $0.00006 | $0.00102 |
Grade A, and why
ia-tailwind-css 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 today.
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 — 59 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tailwind CSS v4
Verify before implementing: For v4-specific syntax (@theme, @variant, CSS-first config), look up current docs via Context7 (query-docs) before writing code. Tailwind v4 changed significantly from v3 and training data may be stale.
Working rules
- Keep utility names as complete source literals and confirm their files are scanned.
- Use shared design tokens and one consistent visibility mechanism.
- Inspect generated CSS after source/configuration changes; JSX strings alone do not prove utilities exist.
- Test scrolling, overlays, and focus behavior in a browser when layout containment changes.
Coding Rules
gapoverspace-x/space-y-- gap handles wrapping; space-* breaks on wrapsize-*overw-* h-*-- for equal dimensionsmin-h-dvhovermin-h-screen-- dvh accounts for mobile browser chrome- Opacity modifier (
bg-black/50) --*-opacity-*utilities are removed in v4 - Design tokens over arbitrary values -- check
@themebefore using[#hex] - Never construct classes dynamically --
text-${color}-500won't be detected; use complete class names @utilityover@applywith@layer--@applyon@layerclasses fails in v4- Parent padding over last-child margin -- use padding on containers instead of bottom margins on the last child
overflow-x-automakes a scroll container on BOTH axes -- the utility emits onlyoverflow-x: auto, but CSS Overflow 3 computes avisiblevalue on the other axis toautoonce either axis is scrollable, so a wrapper added purely to allow horizontal panning silently clips or scrolls whatever overflows it vertically: a non-portalled dropdown, popover, tooltip, custom select, or focus ring. jsdom does no layout, so no unit test catches it -- enumerate every component rendered inside the new wrapper and confirm each overlay-ish one escapes it. Portaling is opt-in, not automatic: Radix exposes it as a separate*.Portalpart wrapping*.Content, so read the component rather than assuming a library handles it. Same computed-value rule read backwards: before blaming a page-level scrollbar, walk every ancestor'soverflowand name the element that actually scrolls- Never express visibility as the native
hiddenattribute plus a display utility -- the two resolve in opposite directions across versions. v4's Preflight ships[hidden]:where(:not([hidden="until-found"])) { display: none !important }, so the attribute wins and an element expected to be visible stays hidden; on v3, or wherever Preflight is disabled or not loaded, the author-origin utility (block,flex,grid) beats the UA-origin[hidden]rule regardless of specificity and the element stays on screen withhiddenset. Toggle one mechanism:clsx(base, open ? 'block' : 'hidden'). Neither direction is visible to jsdom'stoBeInTheDocument-- onlytoBeVisibleor a real browser engine catches it
What ships with it
6 files 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.
- today Changed · -105 lines 80cb48dc6e88
- yesterday First seen · 164 lines · 62 tokens per session scan A 12fc06356a0e
ia-tailwind-css is a skill published in the GitHub repository iliaal/whetstone (33 stars, last pushed yesterday), licensed MIT. It adds 62 tokens to every session and 1,018 once invoked, about $0.0003 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-07.
Other skills, from other repositories
generic-static-code-reviewer
Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.
frontend-design
Use when user asks to build a web component, page, or application, or when the task involves frontend design, HTML/CSS generation, or UI layout. Applies specific rules for typography, OKLCH color, layout, motion, interaction, and UX writing to produce distinctive, production-grade interfaces that avoid generic AI…
Component Variants / States Documentation コンポーネント状態の文書化
A code review check for new reusable interface components and the variations and states they support, such as hover, focus, disabled, loading, and error states.
Design Source-of-Truth Conformance デザイン定義準拠
A code review check that compares new interface values—such as colors, spacing, font sizes, rounded corners, and shadows—with the project's documented design rules or token files. It only runs when those design definitions exist.
a11y-review
Static analysis pass over JSX/HTML/CSS source for WCAG 2.2 AA failure patterns. Does NOT run axe-core, does NOT measure real contrast, does NOT test runtime behavior — pair with a11y-testing for that. Use when the user asks for an accessibility review, a11y check, WCAG review, "is this accessible?", "does my site meet…
frontend-code-reviewer
Use when reviewing a frontend diff, pull request, or code snippet for correctness, React patterns, TypeScript strictness, accessibility violations, performance regressions, CSS architecture, and test quality. Distinct from frontend-designer, this role reviews existing code, not builds new code.