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 AsyrafHussin/agent-skills --skill tailwind-best-practicesgit clone --depth 1 https://github.com/AsyrafHussin/agent-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/asyrafhussin/agent-skills/tailwind-best-practices)<a href="https://agentmods.dev/skills/asyrafhussin/agent-skills/tailwind-best-practices"><img src="https://agentmods.dev/badge/skills/asyrafhussin/agent-skills/tailwind-best-practices/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/asyrafhussin/agent-skills/tailwind-best-practices"><img src="https://agentmods.dev/badge/skills/asyrafhussin/agent-skills/tailwind-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
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.00070 | $0.03162 |
| Opus 5 | $0.00035 | $0.01581 |
| Sonnet 5 | $0.00014 | $0.00632 |
| Haiku 4.5 | $0.00007 | $0.00316 |
Grade A, and why
tailwind-best-practices 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 11d 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 — 420 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tailwind CSS Best Practices
Comprehensive patterns for building consistent, maintainable interfaces with Tailwind CSS v3.4+ and v4. Contains 29 rules covering responsive design, dark mode, component patterns, configuration, and v4 migration.
Metadata
- Version: 1.0.0
- Framework: Tailwind CSS v3.4+ / v4.0+
- Rule Count: 29 rules across 8 categories
- License: MIT
- Documentation: tailwindcss.com/docs
Step 1: Detect Tailwind Version
Always check the version before giving any advice. v3 and v4 are fundamentally different.
Check package.json for the installed version:
{ "tailwindcss": "^3.x" } // → v3 rules apply
{ "tailwindcss": "^4.x" } // → v4 rules apply
Also check for these signals:
| Signal | Version |
|---|---|
tailwind.config.js exists |
v3 |
@import "tailwindcss" in CSS |
v4 |
@tailwindcss/vite in dependencies |
v4 |
@tailwindcss/postcss in dependencies |
v4 |
@theme {} block in CSS |
v4 |
If v3: Apply resp-, dark-, comp-, config- rules. Note that v4 is available.
If v4: Apply v4- rules. tailwind.config.js patterns do NOT apply — use @theme {} instead.
If migrating v3 → v4: Follow v4-migration rules directly.
When to Apply
Reference these guidelines when:
- Writing responsive layouts
- Implementing dark mode
- Creating reusable component styles
- Configuring Tailwind (v3 or v4)
- Migrating a project from v3 to v4
- Setting up a new project with v4
Rule Categories by Priority
| Priority | Category | Impact | Prefix | Version |
|---|---|---|---|---|
| 1 | Responsive Design | CRITICAL | resp- |
v3 / v4 |
| 2 | Dark Mode | CRITICAL | dark- |
v3 / v4 |
| 3 | Component Patterns | HIGH | comp- |
v3 / v4 |
| 4 | Custom Configuration | HIGH | config- |
v3 |
| 5 | V4 & Migration | HIGH | v4- |
v4 only |
| 6 | Spacing & Typography | MEDIUM | space- |
v3 / v4 |
| 7 | Animation | MEDIUM | anim- |
v3 / v4 |
| 8 | Performance | LOW | perf- |
v3 / v4 |
What ships with it
34 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.
- AGENTS.md 13 KB
- metadata.json 8.7 KB
- README.md 1.8 KB
- rules/_sections.md 4.0 KB
- rules/_template.md 4.1 KB
- rules/comp-clsx-cn.md 5.1 KB
- rules/component-btn-variants.md 6.1 KB
- rules/component-card-patterns.md 6.4 KB
- rules/component-form-elements.md 8.3 KB
- rules/component-modals.md 7.7 KB
- rules/component-navigation.md 8.9 KB
- rules/component-tables.md 8.5 KB
- rules/config-custom-colors.md 5.7 KB
- rules/config-custom-fonts.md 6.4 KB
- rules/config-custom-spacing.md 4.7 KB
- rules/config-extend-theme.md 5.5 KB
- rules/config-plugins.md 7.2 KB
- rules/config-presets.md 5.7 KB
- rules/dark-class-strategy.md 4.2 KB
- rules/dark-color-scheme.md 5.0 KB
- rules/dark-custom-colors.md 5.5 KB
- rules/dark-media-strategy.md 4.4 KB
- rules/dark-setup.md 5.6 KB
- rules/dark-transitions.md 4.7 KB
- rules/resp-mobile-first.md 3.4 KB
- rules/responsive-aspect-ratio.md 3.1 KB
- rules/responsive-breakpoint-order.md 2.0 KB
- rules/responsive-container-queries.md 3.5 KB
- rules/responsive-fluid-typography.md 3.2 KB
- rules/responsive-grid-system.md 3.7 KB
- rules/v4-custom-utilities.md 3.9 KB
- rules/v4-installation.md 2.5 KB
- rules/v4-migration.md 5.7 KB
- rules/v4-theme-configuration.md 2.4 KB
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.
- 11d ago First seen · 420 lines · 70 tokens per session scan A 34d742e6f19f
tailwind-best-practices is a skill published in the GitHub repository AsyrafHussin/agent-skills (75 stars, last pushed 14d ago), licensed MIT. It adds 70 tokens to every session and 3,162 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
ring:validating-ux-completeness
Validating that UX specifications are complete before technical design: a read-only checklist over wireframes, states, responsive behavior, accessibility, and component-library alignment, emitting a DESIGN VALIDATED / NEEDS REVISION verdict to design-validation.md. Standalone utility — run after a product-designer…
fidelity-gate
Build a UI against a frozen visual reference without drift - an inventory extracted before any code, a relics list, and a gate that MEASURES computed styles on a fixture carrying the reference's own data. Use when a mockup, design spec or screenshot is the contract.
design-expert
UI/UX design expertise — component design, design system selection, responsive layout. Includes auto-detection from package.json and Context7 integration for library docs.
design-tokens
Generate a cohesive color-token system from ONE OKLCH brand hue — primary/secondary/background/foreground/muted/border with semantic light + dark, emitted as a Tailwind v4 @theme block or a CSS-variables fallback. Use when starting a design system, defining brand colors, setting up theming/dark-mode, or replacing…
motion-design
Restrained, accessible web motion — Framer Motion declarative patterns and CSS-only staggered reveals for high-impact moments, always bundle-aware and reduced-motion-safe. Use when adding animation/transitions to a UI (entrance reveals, list stagger, page/route transitions, micro-interactions) or when motion feels…
ux-ui
Use this agent when you need to design, audit, migrate, rewire, or rewrite UX/UI.