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/developersglobal/ai-agent-skills/frontend-engineeringnpx skills add DevelopersGlobal/ai-agent-skills --skill frontend-engineeringgit clone --depth 1 https://github.com/DevelopersGlobal/ai-agent-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/developersglobal/ai-agent-skills/frontend-engineering)<a href="https://agentmods.dev/skills/developersglobal/ai-agent-skills/frontend-engineering"><img src="https://agentmods.dev/badge/skills/developersglobal/ai-agent-skills/frontend-engineering.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.00026 | $0.00661 |
| Opus 5 | $0.00013 | $0.00331 |
| Sonnet 5 | $0.00005 | $0.00132 |
| Haiku 4.5 | $0.00003 | $0.00066 |
Grade A, and why
frontend-engineering 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 6d 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 — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Overview
Frontend code touches every user. Poor UI engineering causes accessibility barriers, performance degradation, and broken experiences on non-standard devices. This skill enforces the discipline of building UI that works for everyone.
When to Use
- Building any user-facing UI component
- Reviewing frontend PRs
- Before any UI ships to production
Process
Step 1: Accessibility First
- Every interactive element has a visible focus state.
- All images have meaningful alt text (or
alt=""for decorative). - Color contrast ratio ≥ 4.5:1 for normal text.
- All functionality operable by keyboard alone.
- Use semantic HTML:
<button>not<div onclick>,<nav>not<div class="nav">.
Verify: Run axe DevTools or Lighthouse accessibility audit. Score ≥ 90.
Step 2: Performance (Core Web Vitals)
- LCP (Largest Contentful Paint) < 2.5s: Optimize images, preload critical resources.
- FID/INP < 100ms: Avoid long tasks on the main thread.
- CLS (Cumulative Layout Shift) < 0.1: Reserve space for dynamic content.
- Lazy load below-the-fold images and non-critical JS.
- Bundle size: measure before and after. No unneeded dependencies.
Verify: Lighthouse performance score ≥ 80. CWV within targets.
Step 3: Responsive Design
- Test at 320px, 768px, 1024px, 1440px viewports.
- No horizontal scrolling at any standard viewport.
- Touch targets ≥ 44px × 44px.
Step 4: State Management Discipline
- Server state vs. client state are separate concerns — don't mix.
- No prop drilling more than 2 levels — use context or state management.
- Loading, error, and empty states handled for every async operation.
Verify: Loading, error, and empty states all visible in Storybook/dev environment.
Common Rationalizations (and Rebuttals)
| Excuse | Rebuttal |
|---|---|
| "Accessibility is for edge cases" | 1 in 4 adults has a disability. It's not an edge case. |
| "We'll optimize performance later" | Users leave after 3 seconds. "Later" is too late. |
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.
- 6d ago First seen · 74 lines · 26 tokens per session scan A 2fe480553736
frontend-engineering is a skill published in the GitHub repository DevelopersGlobal/ai-agent-skills (65 stars, last pushed 4mo ago), licensed MIT. It adds 26 tokens to every session and 661 once invoked, about $0.0001 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-30.
Other skills, from other repositories
code-review-and-quality
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch.
constraint-driven-development
Establishes a project's quality bar as a written contract and stops agents quietly lowering it. Interviews the user on which dimensions matter, supplies sane default thresholds when they have no number in mind, records everything in CONSTRAINTS.md, and watches the diff for a weakened bar — new @ts-ignore or…
performance-optimization
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
doubt-driven-development
Subjects every non-trivial decision to a fresh-context adversarial review before it stands. Use when correctness matters more than speed, when working in unfamiliar code, when stakes are high (production, security-sensitive logic, irreversible operations), or any time a confident output would be cheaper to verify now…
test-driven-development
Drives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.
api-and-interface-design
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.