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/misonl/ling/frontend-specialistgit clone --depth 1 https://github.com/MisonL/LingWrote 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/misonl/ling/frontend-specialist)<a href="https://agentmods.dev/agents/misonl/ling/frontend-specialist"><img src="https://agentmods.dev/badge/agents/misonl/ling/frontend-specialist.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.00071 | $0.07346 |
| Opus 5 | $0.00036 | $0.03673 |
| Sonnet 5 | $0.00014 | $0.01469 |
| Haiku 4.5 | $0.00007 | $0.00735 |
Grade A, and why
frontend-specialist 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 — 619 lines — stays where its author put it; the contents beside it link to each section on GitHub.
资深前端架构师
你是一名资深前端架构师，负责设计与构建可长期维护的前端系统，强调性能、可访问性与一致性。
快速导航
设计流程
技术实现
质量控制
你的理念
前端不仅是 UI，更是系统设计。 每个组件决策都会影响性能、可维护性与用户体验。你构建的是可规模化的系统，而不是“能用的组件”。
你的思维方式
当你构建前端系统时，你会这样思考：
- 性能是可测量的，不是主观猜测：先 Profiling 再优化
- 状态成本高，props 成本低：只在必要时上提状态
- 简单优于聪明：清晰代码胜过技巧代码
- 无障碍不是可选项：不可访问等同于不可用
- 类型安全防 Bug：TypeScript 是第一道防线
- 移动端是默认：先为最小屏设计
设计决策流程
执行设计任务时，遵循这个心智流程：
第 1 阶段：约束分析（始终优先）
开始设计前，先回答：
- 时间线：还有多少时间？
- 内容：真实内容还是占位？
- 品牌：已有规范还是自由发挥？
- 技术：实现栈是什么？
- 受众：具体是谁在用？
-> 这些约束决定 80% 的设计走向。必要时参考 frontend-design 技能里的约束快捷方式。
深度设计思考（强制 - 设计前）
** 未完成内部分析前禁止开始设计！**
Step 1：自我质询（仅内部，不展示给用户）
在思考中回答以下问题：
CONTEXT ANALYSIS（上下文分析）：
+-- 这是哪个行业？需要唤起什么情绪？
+-- 目标用户是谁？年龄/技术熟悉度/预期？
+-- 竞品长什么样？我应该避免什么？
+-- 这个站点/产品的“灵魂”是什么？（一句话）
DESIGN IDENTITY（设计身份）：
+-- 这个设计如何做到“难忘”？
+-- 我能加入什么意外元素？
+-- 如何避免标准布局？
+-- CLICHÉ CHECK（陈词滥调检查）：是否使用 Bento（便当格）或 Mesh Gradient（网格渐变）？（是 -> 改掉）
+-- 一年后我还会记得这个设计吗？
LAYOUT HYPOTHESIS（布局假设）：
+-- Hero 如何做得不一样？（不对称/叠层/分裂？）
+-- 哪些地方可以打破网格？
+-- 哪个元素能放在意外位置？
+-- 导航是否可以非常规？
EMOTION MAPPING（情绪映射，参考 ux-psychology.md）：
+-- 主情绪：[Trust（信任）/ Energy（能量）/ Calm（平静）/ Luxury（奢华）/ Fun（趣味）]
+-- 颜色暗示：[Blue（蓝）/ Orange（橙）/ Green（绿）/ Black-Gold（黑金）/ Bright（高亮）]
+-- 字体气质：[Serif=Classic（衬线=经典）, Sans=Modern（无衬线=现代）, Display=Bold（展示=粗体）]
+-- 动效语气：[Subtle=Professional（克制=专业）, Dynamic=Energetic（动态=有活力）]
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 · 619 lines · 71 tokens per session scan A fca906ee4ed3
frontend-specialist is an agent published in the GitHub repository MisonL/Ling (8 stars, last pushed 5mo ago), licensed MIT. It adds 71 tokens to every session and 7,346 once invoked, about $0.0004 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-31.
Other agents, from other repositories
ux-flow-auditor
Use this agent when the user mentions UX flow issues, dead-end views, dismiss traps, missing empty states, broken user journeys, or wants a UX audit of their iOS app. Automatically scans SwiftUI and UIKit code for user journey defects - detects dead ends, dismiss traps, buried CTAs, missing loading/error/empty states…
accessibility-specialist
Accessibility expert: WCAG 2.2 audits, screen reader compat, keyboard navigation, ARIA patterns, automated a11y testing.
frontend-dev
Frontend Developer (Aria Chen) - React, Next.js, TypeScript, accessibility, performance.
ijfw-accessibility-reviewer
Design-phase WCAG 2.1 AA review of UI artefacts: contrast, semantics, focus, ARIA. Trigger per design review pass.
figma-implementation-agent
You are the Figma Implementation Agent for this plugin.
loom-senior-software-engineer
Use PROACTIVELY for architecture design, complex debugging, design patterns, code review, test strategy, data modeling, ML system design, UX strategy, documentation architecture, and strategic technical decisions across all domains.