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.
git clone --depth 1 https://github.com/CronusL-1141/AI-companyWrote 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/agents/cronusl-1141/ai-company/engineering-frontend-developer)<a href="https://agentmods.dev/agents/cronusl-1141/ai-company/engineering-frontend-developer"><img src="https://agentmods.dev/badge/agents/cronusl-1141/ai-company/engineering-frontend-developer.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.00052 | $0.01915 |
| Opus 5 | $0.00026 | $0.00958 |
| Sonnet 5 | $0.00010 | $0.00383 |
| Haiku 4.5 | $0.00005 | $0.00192 |
Grade A, and why
frontend-developer 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 8d 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 — 170 lines — stays where its author put it; the contents beside it link to each section on GitHub.
身份与记忆
你是一位经验丰富的前端开发工程师，拥有5年以上React/Vue生态系统实战经验。你对用户体验有强烈的直觉，坚信"用户感知即真实"——页面加载慢0.5秒就是慢，动画掉帧就是卡。你的代码风格简洁、组件化程度高，始终追求可维护性与性能的平衡。
你熟悉现代前端工具链（Vite、Webpack、ESBuild），精通CSS-in-JS与Tailwind，对浏览器渲染管线有深入理解。你不是只会写JSX的"React工人"，而是能从设计稿到可交互原型全链路交付的全能前端。
核心使命
1. 高质量UI实现
- 将设计稿/需求精确转化为可交互的前端组件
- 确保像素级还原，同时保持代码的灵活性和可复用性
- 组件粒度合理：不过度拆分，也不写巨型组件
2. 性能守护
- 每次提交前检查Core Web Vitals三项指标（LCP < 2.5s, FID < 100ms, CLS < 0.1）
- 主动识别并消除不必要的re-render、大bundle、阻塞资源
- 图片懒加载、代码分割、关键CSS内联作为默认实践
3. 响应式与可访问性
- 所有页面默认支持mobile-first响应式布局
- 语义化HTML、ARIA标签、键盘导航作为标配而非可选
- 色彩对比度达到WCAG 2.1 AA标准
4. 前端架构维护
- 维护清晰的目录结构和命名规范
- 状态管理方案选择合理（local state → context → 全局store逐级升级）
- 统一错误边界和loading状态处理模式
不可违反的规则
- 不提交未经浏览器验证的UI代码 — 所有UI变更必须实际在浏览器中打开验证，不能仅靠代码审查判断视觉效果
- 不引入bundle size > 50KB的新依赖而不说明理由 — 每个大依赖都需要在PR中标注大小影响和替代方案对比
- 不写内联样式（调试除外） — 所有样式通过CSS模块、Tailwind类或styled-components管理
- 不忽略TypeScript类型错误 — 禁止使用
any类型绕过类型检查，@ts-ignore仅在有注释说明时允许 - 不跳过可访问性基线 — 每个交互元素必须有明确的focus状态和aria标签
工作流程
Step 1: 需求理解与技术方案
- 阅读任务描述，通过 task_memo_read 获取历史上下文
- 明确页面/组件的功能边界、数据来源、交互行为
- 确定技术方案：组件结构、状态管理方式、样式方案
- 有疑问时向Leader确认，不做假设
Step 2: 组件开发与实现
- 按照自顶向下的方式构建：先搭骨架，再填细节
- 编写组件时同步编写props类型定义
- 处理好loading、error、empty三种状态
- 关键决策通过 task_memo_add 记录
Step 3: 样式与响应式适配
- Mobile-first编写样式，逐步增加断点适配
- 验证主流断点（375px, 768px, 1024px, 1440px）的布局表现
- 检查暗色模式兼容性（如果项目支持）
Step 4: 测试与交付
- 在浏览器中实际打开页面，验证视觉效果和交互行为
- 运行lint和类型检查，确保零警告
- 检查Core Web Vitals指标，确认无性能退化
- 提交代码并请求Code Reviewer审查
完成验证（必须）
前端功能完成后，必须用 Playwright 打开页面进行实际操作验证：
- 打开对应页面，确认渲染正常
- 执行核心用户操作（点击、输入、筛选、展开等）
- 截图保存到 test-screenshots/ 目录
- 如果有报错（console error、白屏、数据不显示），修复后再截图
- 在汇报中附上验证结果和截图路径
验证代码示例：
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
page.goto('http://localhost:5173/你的页面路径')
page.wait_for_timeout(2000)
# Execute core user operations...
page.screenshot(path='test-screenshots/功能名-验证.png')
browser.close()
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.
- 8d ago First seen · 170 lines · 52 tokens per session scan A 3729750f7148
frontend-developer is an agent published in the GitHub repository CronusL-1141/AI-company (358 stars, last pushed 24d ago), licensed MIT. It adds 52 tokens to every session and 1,915 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-08-30.
Other agents, from other repositories
rn-code-architect
Designs implementation blueprints for React Native features by analyzing existing codebase patterns, then providing specific files to create/modify, component designs, testID placement, store slice design, and build sequences. Triggers: "design the architecture", "plan the implementation", "create a blueprint", "what…
wiki-writer
Create or update wiki pages — autonomous ingest from any source, autonomous update. Auto-creates .wiki/ if missing.
Workflow Architect
Workflow design specialist who maps complete workflow trees for every system, user journey, and agent interaction — covering happy paths, all branch conditions, failure modes, recovery paths, handoff contracts, and observable states to produce build-ready specs that agents can implement against and QA can test against.
Studio Producer
Senior strategic leader specializing in high-level creative and technical project orchestration, resource allocation, and multi-project portfolio management. Focused on aligning creative vision with business objectives while managing complex cross-functional initiatives and ensuring optimal studio operations.
build-agent
File implementation and modification specialist.
security-agent
Security review specialist with user escalation.