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 agentmods add skills/anilcancakir/my-claude-code/tailwindcss-designnpx skills add anilcancakir/my-claude-code --skill tailwindcss-designgit clone --depth 1 https://github.com/anilcancakir/my-claude-codeWrote 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/anilcancakir/my-claude-code/tailwindcss-design)<a href="https://agentmods.dev/skills/anilcancakir/my-claude-code/tailwindcss-design"><img src="https://agentmods.dev/badge/skills/anilcancakir/my-claude-code/tailwindcss-design.svg" alt="Measured on agentmods" 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.00121 | $0.02448 |
| Opus 5 | $0.00060 | $0.01224 |
| Sonnet 5 | $0.00024 | $0.00490 |
| Haiku 4.5 | $0.00012 | $0.00245 |
Grade A, and why
tailwindcss-design 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 5d 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 — 300 lines — stays where its author put it; the contents beside it link to each section on GitHub.
TailwindCSS Design Patterns
TailwindCSS implementation companion for web-design-mastery skill. Translates Refactoring UI principles into Tailwind utility classes.
Prerequisite: This skill provides Tailwind-specific syntax. For design theory and decision-making, reference
web-design-masteryskill.
⚠️ CRITICAL: Project Brand Colors First
ALWAYS check tailwind.config.js for custom colors before using generic colors.
If the project defines primary, secondary, brand, or similar custom colors, USE THEM:
// tailwind.config.js
colors: {
primary: { 50: '...', 500: '...', 900: '...' },
secondary: { ... },
brand: { ... }
}
Priority order:
- Project-defined colors (
primary,secondary,brand,accent) - Generic Tailwind colors (
zinc,gray,slate) as fallback only
Usage examples with project colors:
<!-- ✅ CORRECT: Use project colors -->
<button class="bg-primary-600 hover:bg-primary-700 text-white">
<a class="text-primary-600 hover:text-primary-700">
<div class="border-primary-500 bg-primary-50">
<input class="focus:border-primary-500 focus:ring-primary-500">
<!-- Active/selected states -->
<nav class="bg-primary-50 text-primary-700">
<!-- ❌ AVOID when project colors exist -->
<button class="bg-blue-600"> <!-- Generic, ignores brand -->
<button class="bg-zinc-900"> <!-- Only if no primary defined -->
Rules:
- Primary = main CTAs, active states, links, focus rings
- Secondary = alternative actions, supporting elements
- Brand/Accent = highlights, decorative elements
- Neutral (zinc/gray) = structure, text, borders only
Spacing Classes (4px Grid)
| Token | Size | Classes | Use Case |
|---|---|---|---|
| 1 | 4px | gap-1, p-1, m-1 |
Micro gaps |
| 2 | 8px | gap-2, p-2, m-2 |
Tight, within components |
| 3 | 12px | gap-3, p-3, m-3 |
Related elements |
| 4 | 16px | gap-4, p-4, m-4 |
Standard padding |
| 6 | 24px | gap-6, p-6, m-6 |
Between sections |
| 8 | 32px | gap-8, p-8, m-8 |
Major separation |
| 12 | 48px | gap-12, p-12 |
Large gaps |
| 16 | 64px | gap-16, py-16 |
Hero spacing |
What ships with it
3 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.
- 5d ago First seen · 300 lines · 121 tokens per session scan A 929cc70f19b9
tailwindcss-design is a skill published in the GitHub repository anilcancakir/my-claude-code (5 stars, last pushed 7mo ago), licensed MIT. It adds 121 tokens to every session and 2,448 once invoked, about $0.0006 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-31.
Other skills, from other repositories
tailwindcss-development
Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections…
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
memstack-security-csp-headers
Use this skill when the user says 'CSP', 'Content-Security-Policy', 'security headers', 'HSTS', 'X-Frame-Options', 'clickjacking', 'unsafe-inline', 'unsafe-eval', or needs to audit, generate, or fix HTTP security headers for a web application. Do NOT use for API route audits or dependency scanning.
moai-ref-ui-polish
UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies…
jaspr-styling
Write type-safe CSS-in-Dart to style Jaspr components. Use this skill when styling components, implementing themes, or using CSS properties.
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.