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 sergeyizmailov/knowledge-delta-skills --skill responsive-adaptergit clone --depth 1 https://github.com/sergeyizmailov/knowledge-delta-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/sergeyizmailov/knowledge-delta-skills/responsive-adapter)<a href="https://agentmods.dev/skills/sergeyizmailov/knowledge-delta-skills/responsive-adapter"><img src="https://agentmods.dev/badge/skills/sergeyizmailov/knowledge-delta-skills/responsive-adapter/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/sergeyizmailov/knowledge-delta-skills/responsive-adapter"><img src="https://agentmods.dev/badge/skills/sergeyizmailov/knowledge-delta-skills/responsive-adapter.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.00109 | $0.02640 |
| Opus 5 | $0.00055 | $0.01320 |
| Sonnet 5 | $0.00022 | $0.00528 |
| Haiku 4.5 | $0.00011 | $0.00264 |
Grade A, and why
responsive-adapter 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 9d 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 — 156 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Responsive Adapter
$SKILL_DIR= this SKILL.md's directory; set once per session. All script paths are relative to it.
The desktop visual is the source of truth; every other width is a graceful adaptation — layout adapts, style does not. Fixing what wasn't broken on responsiveness grounds is scope creep — report it, don't touch it.
Allowed vs forbidden
| Allowed | Forbidden |
|---|---|
| Any CSS / Tailwind utility class | Color palette, brand colors |
Adding <meta name="viewport"> if missing |
Font families |
Wrapping elements (overflow-x-auto around a wide table) |
Iconography, illustrations, content, copy |
hidden md:block / md:hidden toggles for off-canvas menu |
New components or redesigns of existing ones |
A small hamburger toggle (≤15 lines, or native <dialog>) |
Swapping the established UI library |
Restructuring grid columns (grid-cols-3 → grid-cols-1 md:grid-cols-3) |
Removing sections that "don't fit" — adapt them |
Replacing fixed px widths with fluid units |
Refactor beyond what responsiveness demands |
aria-label where mobile UX needs it for an icon button |
Desktop screenshots before and after must be indistinguishable except where you intentionally stacked or collapsed.
Breakpoints (Material 3-aligned)
xs 320 — ultra-small, foldable cover
sm 390 — iPhone baseline (12–16)
md 600 — M3 Compact→Medium (iPad mini portrait, phone landscape)
lg 840 — M3 Medium→Expanded (iPad portrait, foldable inner)
xl 1200 — M3 Expanded→Large (laptop)
2xl 1600 — M3 Large→XL (desktop)
If the project already has a system (Tailwind 640/768/1024/1280/1536, Bootstrap), extend it, never run a second one in parallel.
Phase 1 — Discover
- Identify project root; ask once if unstated.
- Detect stack per file —
.html+.css→ vanilla (references/vanilla-css.md);tailwind.config.*/@tailwind/md:classes → Tailwind (references/tailwind.md);styled-components/@emotion/.styled.ts→ CSS-in-JS (references/css-in-js.md);*.module.css→ treat as vanilla. Mixes are common. - Enumerate pages/routes in scope.
- Note the existing breakpoint conventions.
- Open at 1440px via
agent-browserand capture the baseline screenshot — the visual contract.
What ships with it
13 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.
- references/admin-patterns.md 6.1 KB
- references/anti-patterns.md 7.8 KB
- references/css-in-js.md 4.4 KB
- references/design-systems.md 3.2 KB
- references/device-matrix.md 5.6 KB
- references/fluid-typography.md 5.1 KB
- references/menus-drawers.md 4.8 KB
- references/modern-primitives.md 6.6 KB
- references/platform-quirks.md 4.1 KB
- references/tailwind.md 4.2 KB
- references/touch-targets.md 1.9 KB
- references/vanilla-css.md 5.1 KB
- scripts/scan.sh 8.8 KB runs code
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.
- 9d ago First seen · 156 lines · 109 tokens per session scan A 97881040d92f
responsive-adapter is a skill published in the GitHub repository sergeyizmailov/knowledge-delta-skills (3 stars, last pushed yesterday), licensed MIT. It adds 109 tokens to every session and 2,640 once invoked, about $0.0005 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
flutter-use-column-row-first
Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.
building-ui
Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
use-dom
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
ii-app
Use this skill when you need to initialize or restart local web and mobile app projects through the bundled Rust ii-app CLI instead of calling MCP tools.
flutter-pre-caching
Use when preloading fonts, asset/network images, Lottie/Rive animations, local JSON/config, warming initial API data, or optimizing Flutter Web startup.
firebase-messaging
Use when setting up Firebase Cloud Messaging, managing permissions and tokens, handling background/foreground notification taps, or dispatching messages server-side (HTTP v1).