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/tmj-90/gaffer/frontend-responsivenpx skills add tmj-90/gaffer --skill frontend-responsivegit clone --depth 1 https://github.com/tmj-90/gafferWrote 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/tmj-90/gaffer/frontend-responsive)<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-responsive"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-responsive.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 | $0.00062 | $0.00548 |
| Opus 5 | $0.00031 | $0.00274 |
| Sonnet 5 | $0.00012 | $0.00110 |
| Haiku 4.5 | $0.00006 | $0.00055 |
Grade A, and why
frontend-responsive 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 4d 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 — 44 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Make the layout responsive
Make the affected UI adapt cleanly from small to large viewports with no overflow, readable type at every size, and touch-friendly targets.
Steps
- Read the lore first. Call
search_lore(Memory MCP) for the repo's breakpoint scale, spacing tokens, and responsive conventions (container queries, grid system, mobile-first vs desktop-first). - Work mobile-first. Start from the smallest target and layer enhancements up through the repo's existing breakpoints — don't invent new ones.
- Prefer fluid layout primitives (flex/grid,
clamp()type and spacing, intrinsic sizing) over fixed pixel widths and one-off media queries. - Kill overflow. Constrain media and long text (
max-width,min-width: 0, wrapping); verify no horizontal scroll at any width. - Size for touch. Interactive targets ≥ 44×44px on touch; verify tap spacing.
- Verify across widths. Check the breakpoints the repo cares about (e.g. 320, 375, 768, 1024, 1440); confirm no overflow and that content reflows sensibly.
- Evidence. Record the verification (screenshots or assertions) via the
record-evidenceskill, run tests + lint, and submit for review.
Rules
- Mobile-first; reuse the repo's breakpoint scale and tokens — no magic pixel values.
- No horizontal overflow at any supported width.
- Fluid primitives over a thicket of fixed media queries.
- Pair with
frontend-a11yso responsive changes keep focus order and labels intact.
Capture lore
This skill is one of the places durable, reusable knowledge naturally surfaces:
A responsive convention this repo follows — its breakpoint scale, a layout primitive it prefers, or a fluid-sizing rule. That kind of fact is lore. Capture it via the lore-capture
protocol in your brief (CLAUDE.factory.md, step 11 "Memory contribution"):
call the Memory MCP suggest_lore once at the close of your work — reusable
conventions, gotchas, decisions, and boundaries only, never per-ticket trivia.
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.
- 4d ago First seen · 44 lines · 62 tokens per session scan A b14a9b66c9cc
frontend-responsive is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed 3d ago), licensed Apache-2.0. It adds 62 tokens to every session and 548 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
mobile-developer
Expert knowledge in mobile app development for iOS, Android, and cross-platform solutions.
apple-hig-designer
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design…
code-patterns-practices
React Native coding patterns, best practices, and common solutions for mobile development. Use when implementing features or refactoring code.
code-reviewer
Comprehensive code review skill for TypeScript, JavaScript, Python, Swift, Kotlin, Go. Includes automated code analysis, best practice checking, security scanning, and review checklist generation. Use when reviewing pull requests, providing code feedback, identifying issues, or ensuring code quality standards.
app-list-skill
Get list of installed Android applications with package names, versions, and metadata.
bluetooth-skill
Control Android Bluetooth - enable, disable, get status, and list paired devices.