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/dds-solutions/ai-tadpole-os/tailwind-patternsnpx skills add DDS-Solutions/AI-TadPole-OS --skill tailwind-patternsgit clone --depth 1 https://github.com/DDS-Solutions/AI-TadPole-OSWrote 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/dds-solutions/ai-tadpole-os/tailwind-patterns)<a href="https://agentmods.dev/skills/dds-solutions/ai-tadpole-os/tailwind-patterns"><img src="https://agentmods.dev/badge/skills/dds-solutions/ai-tadpole-os/tailwind-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.00026 | $0.00676 |
| Opus 5 | $0.00013 | $0.00338 |
| Sonnet 5 | $0.00005 | $0.00135 |
| Haiku 4.5 | $0.00003 | $0.00068 |
Grade A, and why
tailwind-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 2d 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
[!IMPORTANT] AI Context & Knowledge Heritage
- Subsystem: Agent Skills Registry / tailwind-patterns
- Architecture:
@docs ARCHITECTURE:Documentation- Failure Path: Information drift, legacy terminology, or documentation mismatch.
- Observability: Traceability via
execution/parity_guard.py([SKILL])
Tailwind CSS v4 Engineering Patterns
Standard: Tailwind CSS v4 (Oxide engine, CSS-first
@themeconfiguration). Core Principle: Configure in CSS variables; write mobile-first responsive utilities; design with semantic tokens.
🎯 Progressive Disclosure & L3 Reference Index
Read REQUIRED core utility rules below; consult deep L3 Reference Guides on demand:
| L3 Reference Guide | Purpose | Trigger / When to Load |
|---|---|---|
references/v4_theme_and_tokens.md |
Full @theme CSS syntax, container query classes, OKLCH scales |
Theme setup & custom design tokens |
1. Key v4 Structural Shifts
| v3 Legacy (Avoid) | v4 Standard (Use) |
|---|---|
tailwind.config.js |
@import "tailwindcss"; + @theme { ... } in CSS |
| PostCSS plugins | Rust-based Oxide compiler (native nesting) |
| Arbitrary JS tokens | CSS custom properties (--color-*, --font-*) |
2. Responsive & Layout Rules
📱 Mobile-First Breakpoints
Base (Mobile) ➔ sm (640px) ➔ md (768px) ➔ lg (1024px) ➔ xl (1280px)
- Write base classes for mobile without prefixes:
class="w-full md:w-1/2 lg:w-1/3". - Use container queries (
@container,@md:...) for modular UI components embedded in flexible layouts.
🎨 Dark Mode Obsidian Standard
- Never use
#000000or raw untinted grays. - Use tinted obsidian surfaces:
bg-slate-950,bg-zinc-900,border-slate-800. - Ensure high WCAG contrast on interactive badges and text.
🚫 3. Anti-Patterns to Avoid
- No Overused
@apply: Do not use@applyto recreate CSS classes; compose utilities directly in components. - No JS Config Files in v4: Do not create
tailwind.config.jswhen running on v4. - No Hardcoded Hex Values: Use semantic design tokens from
@themerather than arbitrary hex (bg-[#123456]).
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.
- 2d ago First seen · 62 lines · 26 tokens per session scan A ce48fa563dad
tailwind-patterns is a skill published in the GitHub repository DDS-Solutions/AI-TadPole-OS (8 stars, last pushed yesterday), licensed MIT. It adds 26 tokens to every session and 676 once invoked, about $0.0001 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
exploring-autocapture-events
Guides exploration of $autocapture events captured by posthog-js to understand user interactions, find CSS selectors (especially data-attr attributes), evaluate selector uniqueness, query matching clicks ad-hoc, and create actions. Use when the user asks about autocapture data, wants to find what users are clicking…
building-html-canvases
Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components add no useful structure. Use after building-canvases has routed a canvas request to a plain-HTML/browser-API…
quill-code
Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. Use when changing quill components/primitives/tokens, when a quill change must be tested inside the Code app, or when the user mentions quill, the design system, the .local-quill tarball, or the…
react
React patterns with destructured props, compiler optimization, Effects, and Tailwind v4 syntax. ALWAYS use when using React.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…
guidance-webgpu-performance
Diagnose and improve browser WebGPU rendering performance, including frame pacing, draw and state-submission overhead, buffer uploads, shaders, and JavaScript work on the render critical path. Use for slow or stuttering GPU-backed interfaces, rendering regressions, CPU/GPU bottleneck analysis, or renderer performance…