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 skills add hashgraph-online/awesome-codex-plugins --skill frontend-engineeringgit 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-engineering)<a href="https://agentmods.dev/skills/hashgraph-online/awesome-codex-plugins/frontend-engineering"><img src="https://agentmods.dev/badge/skills/hashgraph-online/awesome-codex-plugins/frontend-engineering/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hashgraph-online/awesome-codex-plugins/frontend-engineering"><img src="https://agentmods.dev/badge/skills/hashgraph-online/awesome-codex-plugins/frontend-engineering.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00059 | $0.00646 |
| Opus 5 | $0.00030 | $0.00323 |
| Sonnet 5 | $0.00012 | $0.00129 |
| Haiku 4.5 | $0.00006 | $0.00065 |
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 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.
What it actually says
Frontend Engineering
用途
- 在前端需求开始前统一工程边界，避免实现阶段临时发明组件模式和代码规范。
- 把 React/Next/Tailwind 的默认做法沉淀为可迁移的工程规则，供角色协作复用。
默认做法
-
若项目根目录存在
DESIGN.md，实现前必须读取，所有 token 值（色值、字号、间距、圆角、阴影）以 DESIGN.md 为基准。代码中不允许出现与 DESIGN.md 不一致的硬编码原始值（如color: #5e6ad2），必须通过 CSS 变量或 Tailwind token 引用。参考：DESIGN.md 使用工作流 -
先阅读 frontend-engineering-standards.md 锁定技术基线和质量红线。
-
企业内部应用补看 enterprise-architecture-governance.md 与 enterprise-component-baseline.md，确认是否受统一框架、组件和兼容性约束。
-
若目标项目明确采用自定义前端样式 profile，再补看 frontend-enterprise-style-profile.md，确认是否需要附加样式与 Figma 映射约束。
-
使用 react-next-baseline.md 和 component-patterns.md 决定页面、组件、hooks、状态与数据流分层。
-
若是新界面或大改版，先补齐 ui-implementation-plan.md 再进入编码。
-
若启用了公司前端样式 profile，把附加样式约束同步回写到
ui-implementation-plan.md、/team-execute和/handoff。 -
提交给 QA 前，结合 quality-checklist.md 与 ui-review-checklist.md 留下可追溯证据。
何时优先调用
frontend-engineer需要确定组件结构、状态分层、Next 边界与样式约束。architect需要把前端实现约束沉淀进方案，而不是只给页面草图。tech-lead需要判断某个 UI 需求是否具备进入执行阶段的工程条件。
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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 · 32 lines · 59 tokens per session scan A 13c6bbb76b99
frontend-engineering is a skill published in the GitHub repository hashgraph-online/awesome-codex-plugins (956 stars, last pushed today), licensed Apache-2.0. It adds 59 tokens to every session and 646 once invoked, about $0.0003 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-09-05.
Other skills, from other repositories
frontend-ux-engineer
Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.
nextjs-fullstack
Use for Next.js App Router, React Server Components, server actions, API routes, auth, database integration, caching, deployment, or full-stack product features.
ss-lint
Quick automated lint — detects common design system violations in seconds.
ss-component
Generate a new UI component following the StyleSeed design conventions.
remotion-video
Current Remotion video production pack for React-based product videos, previews, and renderer handoff.
new-feature-nextjs
Pre-flight checklist for adding a new feature to a Next.js 15 + TypeScript app. Load when creating a new page, route, server action, or feature module. Forces feature-driven colocation, RSC-first thinking, and the typed cache-tag pattern from line one — prevents the most common AI failures (1500-line page.tsx, 'use…