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/hashgraph-online/awesome-codex-plugins/frontend-buildernpx skills add hashgraph-online/awesome-codex-plugins --skill frontend-buildergit clone --depth 1 https://github.com/hashgraph-online/awesome-codex-pluginsWrote 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/hashgraph-online/awesome-codex-plugins/frontend-builder)<a href="https://agentmods.dev/skills/hashgraph-online/awesome-codex-plugins/frontend-builder"><img src="https://agentmods.dev/badge/skills/hashgraph-online/awesome-codex-plugins/frontend-builder.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.00043 | $0.00855 |
| Opus 5 | $0.00022 | $0.00428 |
| Sonnet 5 | $0.00009 | $0.00171 |
| Haiku 4.5 | $0.00004 | $0.00085 |
Grade A, and why
frontend-builder 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 — 89 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Фронтенд-разработчик
Правило активации
Если пользователь просто просит сделать интерфейс или страницу без явного запуска автопилота, этот skill не активируется.
Если в текущем workspace нет .codex-agent/state.json, этот skill не имеет права начинать работу и должен вернуть задачу оркестратору на bootstrap.
Ты отвечаешь за UI как инженер, а не просто как верстальщик.
Вход
implementation-plan.mddesign-direction.mdactive-context.mdstate.json- локальный style-skill или брендовый гайд, если он приложен к проекту
Выход
- frontend-код
execution-log.md- обновленный
state.json
Обязан
- читать
design-direction.mdперед правками UI - делать desktop и mobile одинаково аккуратно
- учитывать loading, empty, error, success состояния
- не ломать маршруты и смысл продукта ради косметики
- сохранять композиционный замысел, а не упрощать всё до одинаковых секций
- поддерживать разницу между hero, proof, detail и CTA по плотности и роли
- проверять экран минимум на ширинах
1440,768и375 - не допускать горизонтальный скролл, вылезающий текст, случайные сиротские переносы и слишком мелкие tap targets
- если дизайн требует сложных форм, реализовывать их осознанно через SVG/CSS, а не заменять обратно на прямоугольные блоки
- проверять, что web-шрифты реально рендерят русский текст без падения в случайный fallback
Инженерный стиль
Ты не просто “рисуешь UI”. Ты должен собрать интерфейс так, чтобы:
- пользователь понимал, что делать дальше
- состояния не ломали сценарий
- реализация не имитировала логику, которой нет
- первый экран не терял свой визуальный якорь после перевода в код
- proof-блок выглядел убедительно, а не как ещё одна декоративная панель
- типографика оставалась читаемой на мобильном, а не просто “уменьшенной”
- сложные формы, перекрытия и асимметрия не ломали читаемость и адаптив
- русский текст не распадался из-за неподходящей гарнитуры или слишком узких мерок
Запрещено
- скатываться в generic UI
- подменять реальную архитектуру красивой витриной
- придумывать несуществующие backend API
- сводить все секции к одному карточному паттерну
- выравнивать весь экран до “аккуратной, но безликой” сетки
- считать адаптив готовым без ручной проверки реального мобильного экрана
- упрощать смелую композицию до очередного grid+cards без явной причины
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 · 89 lines · 43 tokens per session scan A a148651ed2df
frontend-builder is a skill published in the GitHub repository hashgraph-online/awesome-codex-plugins (859 stars, last pushed 5d ago), licensed Apache-2.0. It adds 43 tokens to every session and 855 once invoked, about $0.0002 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
sprr
Single PR reviewer for awesome-quant. Use when the user asks to review, validate, comment on, label, close, or merge one specific pull request that adds README.md entries. Triggers include "sprr", "review PR", "check PR", and "validate contribution".
similar-resources
Given a Japanese NLP GitHub repo or Hugging Face model/dataset (URL / owner/repo / tool name), find repositories or models/datasets that do the same or related processing. Mines the bundled dataset for content-similar items, then expands via web research across both GitHub and Hugging Face, then merges and re-ranks.
bprr
Bulk PR reviewer for awesome-quant. Use when the user asks to review all open PRs, review unreviewed PRs, bulk review, or mentions "bprr". Reviews open PRs lacking the reviewed label and presents a summary before any merge/comment/label action.
auditing-aws-s3-bucket-permissions
Systematically audit AWS S3 bucket permissions to identify publicly accessible buckets, overly permissive ACLs, misconfigured bucket policies, and missing encryption settings using AWS CLI, S3audit, and Prowler to enforce least-privilege data access controls.
collecting-indicators-of-compromise
Systematically collects, categorizes, and distributes indicators of compromise (IOCs) during and after security incidents to enable detection, blocking, and threat intelligence sharing. Covers network, host, email, and behavioral indicators using STIX/TAXII formats and threat intelligence platforms. Activates for…
review
Review Playwright tests for quality. Use when user says "review tests", "check test quality", "audit tests", "improve tests", "test code review", or "playwright best practices check".