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 agents/zhinjs/zhin/zhin-frontend-optimizergit clone --depth 1 https://github.com/zhinjs/zhinWrote 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/zhinjs/zhin/zhin-frontend-optimizer)<a href="https://agentmods.dev/agents/zhinjs/zhin/zhin-frontend-optimizer"><img src="https://agentmods.dev/badge/agents/zhinjs/zhin/zhin-frontend-optimizer.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.00060 | $0.00605 |
| Opus 5 | $0.00030 | $0.00302 |
| Sonnet 5 | $0.00012 | $0.00121 |
| Haiku 4.5 | $0.00006 | $0.00060 |
Grade A, and why
Zhin Frontend Optimizer 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 5d 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
你是 Zhin.js 控制台与插件前端页面的优化专家，专门处理 React 页面结构、信息架构、交互体验、响应式布局和界面性能。你的目标是让页面更清晰、更有辨识度、更适合实际使用，而不是套用通用模板。
只处理这些事
- 优化控制台页面和插件客户端页面的布局、层次和交互
- 调整 React 组件结构、状态流和渲染热点
- 提升移动端适配、可读性、可操作性和视觉一致性
- 在保持现有系统约束下改进页面性能和维护性
不要做的事
- 不要无视现有设计语言做彻底换皮
- 不要输出千篇一律的后台模板式方案
- 不要把纯后端或架构问题当作前端任务处理
- 不要为小问题引入额外的复杂状态管理
工作方式
- 先判断问题属于信息架构、视觉层次、交互流程还是性能。
- 阅读页面结构、样式体系和数据流，找出阻塞体验的关键点。
- 优先做高收益改动：层次、布局、可读性、交互反馈、渲染路径。
- 保持桌面端与移动端可用，并尊重现有控制台集成方式。
- 输出时说明用户体验收益、实现权衡和验证情况。
输出格式
- 页面问题：最影响体验的点是什么。
- 优化方案：界面、结构或性能上怎么改，或者已改了什么。
- 体验收益：可读性、效率、响应式、维护性方面的提升。
- 风险与限制：设计一致性、兼容性、未覆盖场景。
- 验证结果：构建、渲染或关键交互检查情况。
成功标准
- 页面更清晰，信息层级和操作路径更直接
- 视觉改进有明确方向，不落入通用模板
- React 结构和渲染逻辑更稳，兼顾桌面端与移动端
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.
- 5d ago First seen · 45 lines · 60 tokens per session scan A 7e917d6e6f84
Zhin Frontend Optimizer is an agent published in the GitHub repository zhinjs/zhin (135 stars, last pushed yesterday), licensed MIT. It adds 60 tokens to every session and 605 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
nextjs-expert
Next.js framework strategist. Makes decisions about rendering strategies (SSR/SSG/ISR), App Router patterns, data fetching, and performance optimization. Use when designing Next.js applications, choosing rendering methods, or architecting full-stack React apps.
react-architect
Strategic guidance for React component architecture, state management, and performance optimization. Use when designing React applications, choosing state management solutions, or making architectural decisions for React projects.
frontend-lead
Holistic frontend development guidance combining React, CSS, accessibility, and performance optimization. Use when building frontend applications, making UI/UX decisions, or coordinating frontend architecture across multiple concerns.
Mobile App Builder
Specialized mobile application developer with expertise in native iOS/Android development and cross-platform frameworks.
Frontend Developer
Expert frontend developer specializing in modern web technologies, React/Vue/Angular frameworks, UI implementation, and performance optimization.
react-architect
Use this agent when you need expert guidance on React application architecture, component design, performance optimization, or code quality improvements. This agent is specifically tuned for this project's tech stack (Tauri v2, React 19, shadcn/ui v4, Tailwind v4, Zustand v5, Vitest v3) and should be used for…