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/ai-skills --skill tailwind-cssgit clone --depth 1 https://github.com/iliaal/ai-skillsWrote 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/ai-skills/tailwind-css)<a href="https://agentmods.dev/skills/iliaal/ai-skills/tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/ai-skills/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/ai-skills/tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/ai-skills/tailwind-css.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high Anti-Refusal · line 93 Skill instructs the agent to omit warnings, disclaimers, or ethical commentary. Stripping safety caveats hides risk from the user and is a common jailbreak preamble.Fix: Remove instructions that suppress warnings, disclaimers, or ethical commentary. Let the agent surface safety-relevant caveats to the user.
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.00061 | $0.01017 |
| Opus 5 | $0.00030 | $0.00508 |
| Sonnet 5 | $0.00012 | $0.00203 |
| Haiku 4.5 | $0.00006 | $0.00102 |
Grade A, and why
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 · -103 lines 9b1dbd3db0d8
- 9d ago First seen · 162 lines · 61 tokens per session scan A 5fad32b39efb
tailwind-css is a skill published in the GitHub repository iliaal/ai-skills (41 stars, last pushed yesterday), licensed MIT. It adds 61 tokens to every session and 1,017 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-08-30.
Other skills, from other repositories
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
web-design-expert
Web design and UX guidance for visual systems, accessibility, interaction patterns, and performance-aware interfaces. Use when designing a website's look and feel, improving UX/accessibility, or reviewing a UI for polish and performance.
animation-vocabulary
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and…
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter…
review-animations
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.