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-designnpx skills add tmj-90/gaffer --skill frontend-designgit 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-design)<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-design"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-design.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.00096 | $0.02375 |
| Opus 5 | $0.00048 | $0.01188 |
| Sonnet 5 | $0.00019 | $0.00475 |
| Haiku 4.5 | $0.00010 | $0.00237 |
Grade A, and why
frontend-design 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 — 154 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design distinctive, production-grade frontend
Build frontend that looks intentional, opinionated, and specific to the product — not
a default template. The bar is: would this look believable in a real product screenshot?
This pack is about visual quality and design judgement; pair it with frontend-component,
frontend-a11y, and frontend-responsive for structure, semantics, and breakpoints, and
with design-system for the structural layer beneath the aesthetic — the three-tier
token architecture (primitive → semantic → component) and full component state specs. This
pack decides how it should look; design-system decides how that look is structured so it
scales. Don't re-derive tokens or component-state matrices here — consume them from there.
Before you write any code — pick a direction
Generic defaults ("clean minimal") are not a direction. Commit to a specific one and let it drive every decision:
- Editorial / magazine, Swiss / International, Neo-brutalism, Bento layouts, Glassmorphism with real depth, dark or light luxury (disciplined contrast), Scrollytelling, retro-futurism, 3D integration.
- Do not default to dark mode. Choose the direction the product wants.
- Define the palette deliberately (semantic roles, not one accent on grey-on-white) and a real typography pairing strategy — pick fonts with character, with a reason.
- Read the repo's existing tokens/brand first. If a brand exists, extend it in its idiom; do not re-pitch the aesthetic.
Required qualities
Every meaningful surface must demonstrate at least four:
- Hierarchy through scale contrast — a real type scale, not uniform sizes.
- Intentional rhythm in spacing — not the same padding on everything.
- Depth / layering — overlap, shadows, surfaces, or motion; not a flat stack.
- Typography with character and a deliberate pairing.
- Colour used semantically, not just decoratively.
- Designed hover / focus / active states — interaction feels considered.
- Grid-breaking editorial or bento composition where it fits.
- Texture, grain, or atmosphere when the direction calls for it.
- Motion that clarifies flow, never distracts.
- Data visualisation treated as part of the design system, not an afterthought.
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 · 154 lines · 96 tokens per session scan A 90d485f31cad
frontend-design is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed 5d ago), licensed Apache-2.0. It adds 96 tokens to every session and 2,375 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
skill-creator
Create or update AnkaLoop skills. Use when designing, structuring, or packaging skills with scripts, references, and assets. This skill should be used when users want to create a new skill (or update an existing skill) that extends AnkaLoop's capabilities with specialized knowledge, workflows, or tool integrations.
gh-ci-analyzer
使用 gh CLI 分析 GitHub Actions CI 日志，提供结构化的故障诊断和报告.
ai-engineer
Expert knowledge in AI/ML development, model deployment, and MLOps practices.
security-best-practices
Security best practices and vulnerability prevention guidelines.
react-developer
Expert knowledge in React development, hooks, state management, and modern React patterns.
gh-pr-review
Review GitHub Pull Requests using the gh CLI. Use when a user asks to review a PR, perform code review, check a pull request, or provide feedback on proposed changes. Triggers on phrases like "review PR", "review pull request", "check PR", "code review".