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-componentnpx skills add tmj-90/gaffer --skill frontend-componentgit 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-component)<a href="https://agentmods.dev/skills/tmj-90/gaffer/frontend-component"><img src="https://agentmods.dev/badge/skills/tmj-90/gaffer/frontend-component.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.00079 | $0.00635 |
| Opus 5 | $0.00039 | $0.00318 |
| Sonnet 5 | $0.00016 | $0.00127 |
| Haiku 4.5 | $0.00008 | $0.00064 |
Grade A, and why
frontend-component 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 3d 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 — 47 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Add or change a UI component
Build a component that follows the repo's existing composition, styling, and state conventions, with the behaviour proven by tests and the markup kept accessible.
Steps
- Read the lore first. Call
search_lore(Memory MCP) for the repo's component conventions: framework idioms, styling system (CSS modules, tokens, utility classes), state management, and file organisation. Honour any ADRs. - Find a sibling component and copy its shape — props/typing, file layout, styling approach, and how it is exported and consumed.
- Keep it presentational where possible. Push data loading and side effects to a container/hook; let the component render from props so it stays pure and testable.
- Use semantic HTML and design tokens. Prefer real elements (
button,nav,header) over genericdivstacks, and reference the repo's spacing/colour/type tokens instead of hardcoded values. - Design the states. Cover hover/focus/active, loading, empty, and error states the ticket implies — not just the happy path.
- Test the behaviour with the repo's component test tooling (e.g. Testing Library): render, assert on roles/labels and interaction, not on brittle markup.
- Verify + evidence. Run the repo's tests and lint, then use the
record-evidenceskill to recordtest_outputagainst the AC and submit for review.
Rules
- Match the existing framework and styling system — never add a competing one.
- No hardcoded palette/spacing/type; use the project's tokens.
- Animate compositor-friendly properties (
transform,opacity) — avoid layout-bound ones. - Keep components focused; extract sub-components rather than growing one file past ~200 lines.
- Pair with the
frontend-a11yandfrontend-responsiveskills for non-trivial UI.
Capture lore
This skill is one of the places durable, reusable knowledge naturally surfaces:
A UI convention this repo enforces — the styling system, the token set, a component-structure rule, or a framework-specific gotcha. 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.
- 3d ago First seen · 47 lines · 79 tokens per session scan A 2a5f29e17252
frontend-component is a skill published in the GitHub repository tmj-90/gaffer (2 stars, last pushed 3d ago), licensed Apache-2.0. It adds 79 tokens to every session and 635 once invoked, about $0.0004 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.
ai-engineer
Expert knowledge in AI/ML development, model deployment, and MLOps practices.
gh-ci-analyzer
使用 gh CLI 分析 GitHub Actions CI 日志，提供结构化的故障诊断和报告.
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".