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/figueroaignacio/ignaciofigueroa.dev/tailwind-css-patternsnpx skills add figueroaignacio/ignaciofigueroa.dev --skill tailwind-css-patternsgit clone --depth 1 https://github.com/figueroaignacio/ignaciofigueroa.devWrote 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/figueroaignacio/ignaciofigueroa.dev/tailwind-css-patterns)<a href="https://agentmods.dev/skills/figueroaignacio/ignaciofigueroa.dev/tailwind-css-patterns"><img src="https://agentmods.dev/badge/skills/figueroaignacio/ignaciofigueroa.dev/tailwind-css-patterns.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.00062 | $0.01504 |
| Opus 5 | $0.00031 | $0.00752 |
| Sonnet 5 | $0.00012 | $0.00301 |
| Haiku 4.5 | $0.00006 | $0.00150 |
Grade A, and why
tailwind-css-patterns 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 — 154 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Overview
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
When to Use
- Styling React/Vue/Svelte components
- Building responsive layouts and grids
- Implementing design systems
- Adding dark mode support
- Optimizing CSS workflow
Quick Reference
Responsive Breakpoints
| Prefix | Min Width | Description |
|---|---|---|
sm: |
640px | Small screens |
md: |
768px | Tablets |
lg: |
1024px | Desktops |
xl: |
1280px | Large screens |
2xl: |
1536px | Extra large |
Common Patterns
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">Content</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
Instructions
- Start Mobile-First: Write base styles for mobile, add responsive prefixes (
sm:,md:,lg:) for larger screens - Use Design Tokens: Leverage Tailwind's spacing, color, and typography scales
- Compose Utilities: Combine multiple utilities for complex styles
- Extract Components: Create reusable component classes for repeated patterns
- Configure Theme: Customize design tokens in
tailwind.config.jsor using@theme - Verify Changes: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing.
Examples
Responsive Card Component
What ships with it
8 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 · 154 lines · 62 tokens per session scan A 77492644ccf5
tailwind-css-patterns is a skill published in the GitHub repository figueroaignacio/ignaciofigueroa.dev (5 stars, last pushed yesterday), licensed MIT. It adds 62 tokens to every session and 1,504 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-31.
Other skills, from other repositories
setup-slack-channel
Use for the PROVIDER half of getting a locally running CopilotKit Channels agent to answer in Slack, when no Slack app exists yet — setting up a Channels bot in Slack for the first time, creating the Slack app and its tokens, attaching it to a managed Intelligence Channel, or when a Channel reports setuprequired, sits…
copilotkit-channels
Use for the CODE half of a managed Intelligence Channel with Slack or Microsoft Teams: customising the Channel a CLI-scaffolded project already ships, or — for a project the CLI did not generate — writing the Channel declaration, the long-running host, and the awaited activation call. Teams provider setup is in scope…
notion-to-blog
Transfer a blog post from Notion to the Wasp blog. Fetches content, downloads and optimizes images, and creates a properly formatted MDX file.
channels-setup
Use when a developer wants to build their first CopilotKit Channels agent and get it answering in Slack or Microsoft Teams — "set up a channel", "connect my agent to Slack", "get my agent into Teams", or starting from nothing and wanting a working channel end to end. Covers the whole path: inspecting or scaffolding…
welcome
Introduce yourself to a newly connected channel. Triggered automatically when a channel is first wired. Send a friendly greeting and brief overview of what you can do.
add-teams
Add Microsoft Teams channel integration via Chat SDK.