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-foundationsnpx skills add tmj-90/gaffer --skill frontend-foundationsgit 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-foundations)<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-foundations"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-foundations.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.00122 | $0.00978 |
| Opus 5 | $0.00061 | $0.00489 |
| Sonnet 5 | $0.00024 | $0.00196 |
| Haiku 4.5 | $0.00012 | $0.00098 |
Grade A, and why
frontend-foundations 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 — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend foundations — the UI quality floor
The frontend companion to engineering-craft. Craft holds the code bar (structure,
errors, tests); this holds the surface bar — the things that separate a real product UI
from a working-but-generic one. It is a floor and a lens, not the full treatment: for
depth, invoke the deep packs it points to. Apply it on any change that touches UI, and
confirm it in self-review.
Composes with minimalism the same way craft does: this is never a licence to add
chrome or animation the ticket didn't ask for — it's the quality bar for whatever UI you
are building.
The floor (hold all of these on UI work)
- Hierarchy over template defaults. The surface should look intentional — clear
scale/weight contrast so the eye lands on the right thing first, not uniform cards in a
uniform grid. If it looks like an unmodified starter template, it isn't done. Depth →
frontend-design. - Accessible by default, not as a retrofit. Semantic elements (
button,nav,main,label) beforedivsoup; every interactive element reachable and operable by keyboard with a visible focus state; images/icons have text alternatives; colour is never the only signal. Depth →frontend-a11y. - Tokens, not magic values. Use the repo's design tokens / theme variables for
colour, spacing, type, and radius. Do not hardcode hex codes or
pxfont sizes when a token exists — that's the frontend form of the DRY rule. - Reusable components, the repo's way. Build a component that composes and takes
props for its variants/states — but match the existing component conventions and do
NOT introduce a new UI framework or styling system. Reuse the repo's primitives before
adding one. Depth →
frontend-component. - Every meaningful state is designed. Handle and style loading, empty, and error states, plus hover / focus / active / disabled — not just the happy, populated view. A missing empty or error state is an unfinished component.
- Motion clarifies, on the compositor. Animate
transform/opacity(andclip-path/filtersparingly), not layout-bound properties (width,top,margin,font-size). Respectprefers-reduced-motion. Motion should explain a change, never decorate for its own sake. - Responsive and overflow-safe. Verify the real breakpoints (e.g. 320 / 768 / 1024 /
1440); no horizontal overflow, touch targets large enough to hit. Depth →
frontend-responsive.
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 · 65 lines · 122 tokens per session scan A 41e563f5cda1
frontend-foundations is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed 5d ago), licensed Apache-2.0. It adds 122 tokens to every session and 978 once invoked, about $0.0006 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
frontend-aesthetics
Use when creating UI designs to avoid generic "AI slop" aesthetics. Enforces distinctive typography, cohesive color systems, purposeful motion, and atmospheric backgrounds. Critical for landing pages, dashboards, and branded interfaces.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
color-contrast-checker
Validate color contrast checker operations. Auto-activating skill for Frontend Development. Triggers on: color contrast checker, color contrast checker Part of the Frontend Development skill category. Use when working with color contrast checker functionality. Trigger with phrases like "color contrast checker", "color…
css-module-generator
Generate css module generator operations. Auto-activating skill for Frontend Development. Triggers on: css module generator, css module generator Part of the Frontend Development skill category. Use when working with css module generator functionality. Trigger with phrases like "css module generator", "css generator"…
dashboard-creator
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
css-colors
Instructions on how to add new colors for CSS rules.