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 codebygarv/Ai-skills --skill responsive-checkergit clone --depth 1 https://github.com/codebygarv/Ai-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/codebygarv/ai-skills/responsive-checker)<a href="https://agentmods.dev/skills/codebygarv/ai-skills/responsive-checker"><img src="https://agentmods.dev/badge/skills/codebygarv/ai-skills/responsive-checker/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/codebygarv/ai-skills/responsive-checker"><img src="https://agentmods.dev/badge/skills/codebygarv/ai-skills/responsive-checker.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.00041 | $0.00517 |
| Opus 5.5 | $0.00016 | $0.00207 |
| Sonnet 5.5 | $0.00008 | $0.00103 |
| Haiku 4.5 | $0.00004 | $0.00052 |
Grade A, and why
responsive-checker 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 1mo 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 — 36 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Purpose
Determine whether a UI implementation will actually hold up across mobile, tablet, and desktop viewports — not just at whatever single width it was built and eyeballed at.
When to Use
- Reviewing layout code (CSS/Tailwind/styled-components/etc.) meant to be responsive.
- Before shipping any UI intended to be used on multiple device classes.
- Debugging a specific "looks broken on mobile/tablet" report.
What to Analyze
- Breakpoint coverage — are there defined behaviors at common breakpoints (mobile ~375–428px, tablet ~768–1024px, desktop 1280px+), or does the layout only really work at one width?
- Fixed vs. fluid sizing — hardcoded pixel widths/heights that won't adapt, versus relative units (%,
fr,rem,vw/vhused appropriately) that do. - Overflow handling — content that will overflow, get clipped, or force horizontal scroll at narrow widths (long text, wide tables, fixed-width images).
- Touch target sizing — interactive elements meeting a reasonable minimum touch target size (~44x44px) on mobile, not just sized for mouse precision.
- Layout reflow — does a multi-column desktop layout collapse sensibly on mobile (stacking, hiding secondary content, or reflowing), or does it just shrink until unreadable?
- Text scaling — font sizes and line lengths that stay readable at mobile widths, not desktop-sized text crammed into a narrow viewport.
Output Format
- Findings organized by viewport class (Mobile / Tablet / Desktop) where the issue manifests, or "All viewports" if it's breakpoint-independent.
- Each finding: what breaks, at roughly what width, and the fix (a specific CSS/layout change).
- If reviewing code without a live render, note explicitly which findings are code-inferred vs. would benefit from an actual visual check at that width.
Avoid
- Assuming a specific breakpoint strategy the codebase doesn't use — check existing breakpoint conventions first and match them.
- Flagging a deliberately mobile-hidden or desktop-only element as broken when it's an intentional responsive choice.
- Recommending a full layout rewrite when a targeted breakpoint fix solves the actual issue.
What ships with it
2 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.
- 1mo ago First seen · 36 lines · 41 tokens per session scan A 49c5b077368f
responsive-checker is a skill published in the GitHub repository codebygarv/Ai-skills (27 stars, last pushed 2mo ago), licensed MIT. It adds 41 tokens to every session and 517 once invoked, about $0.0002 per session on Opus 5.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
super-design
Use when the user asks you to build, style, theme, refine, audit, or recreate UI — or uploads a screenshot to rebuild. Reads DESIGN.md as a closed token layer, detects the project's framework (Tailwind v4/v3, ShadCN, MUI, Radix, Geist), and enforces production design rules (tokens only, full state matrix, WCAG 2.2 AA…
ds-frontend
Frontend design quality — design-system audit, token enforcement, component states, accessibility, responsive layout, theming. Use when building or reviewing UI for design consistency, a11y, or responsiveness.
premium-hero-builder
Build premium, dark-themed hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, editorial typography, and pixel-perfect specifications. Based on the Viktor Oddy methodology of detailed design prompts that produce agency-quality results from AI code generation. Use when building hero…
web-ui-ux
Web UI/UX specialist guidance for designing, reviewing, and polishing web product UI (layout, usability, microcopy, accessibility, responsive behavior, forms, navigation). Use when asked to improve UI/UX, audit a page, design a screen, create a component spec, or generate HTML head/manifest/icon guidance for a web…
web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system…
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.