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 bovinphang/frontend-craft --skill fec-tailwind-design-systemgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote 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/bovinphang/frontend-craft/fec-tailwind-design-system)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-tailwind-design-system"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-tailwind-design-system/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/bovinphang/frontend-craft/fec-tailwind-design-system"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-tailwind-design-system.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.00079 | $0.00661 |
| Opus 5 | $0.00039 | $0.00331 |
| Sonnet 5 | $0.00016 | $0.00132 |
| Haiku 4.5 | $0.00008 | $0.00066 |
Grade A, and why
fec-tailwind-design-system 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 6d 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.
What it actually says
Tailwind 设计系统
适用于用 Tailwind CSS 承载产品设计系统、组件变体和主题规则的前端任务。需要具体配置、variant、class 组织和迁移细节时加载 references/tailwind-system-patterns.md。
用途
让 Tailwind 项目中的 token、主题、组件变体和响应式样式可维护，而不是把一次性 utility class 散落到业务代码里。
流程
- 识别现状：确认 Tailwind 版本、配置位置、暗色模式策略、组件库、CSS 变量、设计 token 和 class 合并工具。
- 建立 token 边界：颜色、间距、圆角、阴影、字体、z-index 和断点优先从项目 token 或
theme.extend派生。 - 设计组件变体：按钮、输入框、卡片、弹窗、表格等基础组件用集中 variant API 表达尺寸、语义、状态和密度。
- 控制 class 复杂度：重复组合沉淀为组件、slot、variant 或局部 helper；不要把长 class 字符串复制到多个页面。
- 处理主题和暗色模式：明确
class、data-theme或 CSS 变量方案，避免首次渲染闪烁和对比度回归。 - 接入响应式：移动优先组织 utility；复杂布局交给响应式布局工作流，不要只靠堆叠断点前缀碰运气。
- 验证样式结果：检查 hover、active、focus-visible、disabled、loading、selected、invalid、dark 和不同断点。
约束
- 不把 Tailwind class 当作设计系统本身；真正的系统是 token、组件 API、状态矩阵和使用约束。
- 不为单个页面随意扩展全局 token；新增 token 必须有语义名称和复用场景。
- 不使用拼接的动态 class 破坏构建扫描；必要时使用 safelist、映射表或 variant 工具。
- 不在组件外部覆盖基础组件内部结构来实现变体。
- 不让暗色模式只靠反色；状态色、边框、阴影、图表和图片都要重新检查。
预期输出
输出 Tailwind token 映射、主题配置边界、组件 variant 设计、class 复用策略、暗色模式和响应式验证结果。完成后样式应能被项目组件复用、可搜索、可测试，并与设计系统规则一致。
What ships with it
1 file 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.
- 6d ago First seen · 35 lines · 79 tokens per session scan A 4603d33a894a
fec-tailwind-design-system is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 9d ago), licensed MIT. It adds 79 tokens to every session and 661 once invoked, about $0.0004 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-03.
Other skills, from other repositories
design-lint
A repeatable checker for design problems in rendered HTML and CSS, standalone prototype pages, or live URLs. It compares them with a DESIGN-TOKENS.md file, a document defining approved colors, fonts, spacing, and other visual rules, and reports pass or fail results.
design-tokens
This skill should be used when a user wants to scaffold or refactor a design token system — e.g. "set up design tokens", "create a design system foundation", "extract these hardcoded colors into tokens", "add a type scale", "theming setup", or "dark mode tokens". It produces a single source of truth for color, type…
interaction-feedback
This skill should be used when the user wants clear visual feedback for async actions and state changes — triggers like "add loading and error states", "show a success message", "add a toast/notification", "inline form validation", "optimistic UI", "empty state for this list", "this button gives no feedback", or "add…
design-system
Use when establishing visual foundations for a new product, when defining design tokens, when building or auditing a component library, before any UI work begins on a fresh codebase, or when the existing UI has drifted into hex codes and magic numbers.
gsap
A reference-guided workflow for building and reviewing web animations with GSAP, a JavaScript animation library. It covers animations in React, Next.js, Vue, and Svelte, including scroll-triggered effects.
interaction-patterns
Use when deciding how users interact with UI elements — expand vs navigate, modal vs bottom sheet, swipe gestures, tap targets, optimistic UI, loading patterns, or undo for destructive actions. Use before features get built so every screen inherits the same rules.