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/bovinphang/frontend-craft/fec-debug-frameworknpx skills add bovinphang/frontend-craft --skill fec-debug-frameworkgit clone --depth 1 https://github.com/bovinphang/frontend-craftWrote 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/bovinphang/frontend-craft/fec-debug-framework)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-debug-framework"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-debug-framework.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.00066 | $0.01372 |
| Opus 5 | $0.00033 | $0.00686 |
| Sonnet 5 | $0.00013 | $0.00274 |
| Haiku 4.5 | $0.00007 | $0.00137 |
Grade A, and why
fec-debug-framework scanned grade A with 1 finding 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 4d 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
- curl 独立复现（排除前端干扰） How it starts
The opening of the file, as written. The whole thing — 158 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端诊断框架
用途
用证据驱动的分类、收集、假设、验证和修复流程定位前端故障，避免凭直觉扩大改动范围。
流程
所有前端问题诊断遵循统一流程：
Step 1: 分类（Classify）
识别问题类型和影响范围：
| 类型 | 判断依据 | 诊断入口 |
|---|---|---|
| build | 命令退出非零、stderr 有错误 | → Build 模块 |
| runtime | 控制台异常、白屏、功能不可用 | → Runtime 模块 |
| ui | 视觉偏差、交互不符预期 | → UI 模块 |
| api | 请求状态码异常、数据不一致 | → API 模块 |
跨类型问题（如 API 失败导致 UI 异常）从最表层症状入手，逐层深入。
Step 2: 收集（Collect）
按类型收集证据（各模块有具体策略，见下方）。
Step 3: 假设（Hypothesize）
基于证据提出可能根因，按可能性排序：
- 每个假设必须可测试（有明确的验证方法）
- 最多保留 3 个假设，避免发散
- 格式：「因为 X，导致 Y，可通过 Z 验证」
Step 4: 验证（Verify）
逐一测试假设：
- 从最可能的假设开始
- 每次只改一个变量
- 验证结果记录：证实 / 证伪 / 待定
- 假设全部证伪时回到 Step 2 重新收集
Step 5: 修复与确认（Fix & Validate）
- 应用最小修复
- 运行受影响验证命令
- 确认无回归
- 输出修复报告
诊断模块
Build 模块
收集：运行最小失败命令，捕获完整 stderr/stdout 假设：按错误类型分组（类型错误、导入失败、配置解析、依赖缺失），匹配已知模式 验证：修一类根因 → 重跑命令 → 确认错误减少 特殊处理：
- 依赖版本、peer dependency、ESM/CJS、lockfile 相关失败先作为 build 兼容性问题收集证据
- 记录 package manager、Node 版本、lockfile diff、相关包版本和完整错误日志
- 不在缺少证据时升级依赖、手工编辑 lockfile，或把依赖迁移与普通调试修复混在同一批改动
- 若任务目标本身是版本升级、CVE 修复或 lockfile 风险评审，应转入依赖升级工作流
- CI 专属失败检查 Node 版本、包管理器、环境变量差异
Runtime 模块
收集：
- 复现路径（用户操作序列）
- 控制台错误和堆栈
- 组件渲染树状态（检查关键组件是否正确挂载）
- 相关 store/state 快照
假设：
- 堆栈反向追踪：从异常位置回溯到触发源
- 状态流分析：检查 state 变化是否符合预期
- 生命周期分析：是否在错误的时机访问了未初始化的数据
验证：
- 添加临时日志确认状态值
- 在可疑路径添加断言
- 复现路径验证修复
UI 模块
收集：
- 当前截图 vs 期望效果
- DOM 结构检查（元素是否存在、层级是否正确）
- 计算样式检查（实际应用的 CSS 值）
- 响应式断点测试
假设：
- CSS 特异性冲突（选择器权重不够被覆盖）
- 组件状态不匹配（props/state 未正确传递）
- 布局模型问题（flex/grid 配置错误）
- 响应式断点遗漏
验证：
- 浏览器 DevTools 实时调整验证
- 隔离组件测试（排除外部样式干扰）
- 多断点逐一验证
API 模块
收集：
- 请求 URL、method、headers、body
- 响应 status、headers、body
- 网络瀑布时序
- 相关 store/state 中的缓存数据
假设：
- 请求链路逐跳检查（URL → 中间件 → 拦截器 → 服务端）
- 数据转换检查（响应解析、类型映射）
- 缓存策略检查（过期、失效、竞态）
- 并发请求竞态（race condition）
验证：
- curl 独立复现（排除前端干扰）
- 逐层 mock 定位问题层级
- 端到端请求验证修复
详细参考
撰写诊断报告时，加载 references/report-template.md。
What ships with it
1 file 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.
- 4d ago First seen · 158 lines · 66 tokens per session scan A 06c6df90eca8
fec-debug-framework is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 2d ago), licensed MIT. It adds 66 tokens to every session and 1,372 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
brand-design
Brand-aware design system generator that acts as Head of Brand. Translates abstract brand language into a mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in a project, and optionally compiles it to framework tokens (Tailwind v4 @theme, v3…
deslop
去除中文网文里的 AI 味。当用户说正文"太像AI写的/有翻译腔/太工整/没人味/排比堆砌/读起来假"、嫌"无缘无故的修辞""引用奇怪跨度大/语域不一致"、嫌"重复的修辞句式""同义反复(他非常生气他怒了)""极端词太多(非常/极大)""莫名其妙的陈述句""句号当顿号""段落太对仗工整行数雷同"，或要把 AI 稿改得像真人时使用。产出更口语、更有网感、风格统一的网文文字。.
english
英文网文出海写作（Wattpad / Royal Road / Webnovel / Radish / KDP）。当用户要写英文小说、出海英文平台、把中文故事改写成英文原生（不是翻译腔）、问英文平台怎么写/选哪个、或要去掉英文里的"中国网文翻译腔/AI腔"时使用。按英文网文规则产出像当地作者写的英文。.
official-article-ingest
Use when Sam wants to collect, save, translate, or reformat official source articles/blog posts/research/product announcements into the Obsidian vault, especially requests mentioning 官方文章, 官网排版, 原始排版, 美观, 收录, 1:1, 原文1:1, or 英文中文对照1:1. Preserve the source site's information architecture and visual hierarchy rather than…
ai-translating-content
Translate text between languages with AI while preserving brand voice and terminology. Use when translating app copy to Spanish, localizing marketing content, multilingual support tickets, i18n with AI, machine translation with brand voice, translating product descriptions, localizing help docs, batch translating i18n…
problem-formulation
When the user wants to translate a word problem or real-world planning situation into a formal optimization model — identifying decision variables, objective function, and constraints, choosing the model type (LP, MIP, CP, or heuristic), estimating model size, and auditing the data before any solver code is written.…