fec-debug-framework

fec-debug-framework is a skill for Claude Code from bovinphang/frontend-craft. It costs 66 tokens per session (1,372 once invoked), scanned A, original, MIT.

A step-by-step method for finding the cause of front-end build failures, browser errors, broken screens, failed requests, or incorrect data. It separates build, runtime, visual, and API problems and uses evidence to test possible causes.

In plain words
What is it for?
Use it to investigate compiler and dependency errors, blank pages, console exceptions, visual problems, failed API calls, and issues that appear only in continuous integration (automated build and test systems).
Why use it?
It prevents guesswork, unnecessary dependency changes, and broad edits before the actual problem is understood. Each proposed cause must have a way to verify it.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the frontend-craft plugin — 56 skills, 11 commands, 14 agents, 5 hooks shipped together

Good fit Use it to investigate compiler and dependency errors, blank pages, console exceptions, visual problems, failed API calls, and issues that appear only in continuous integration (automated build and test systems).

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/bovinphang/frontend-craft/fec-debug-framework
Install

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.

Any agent
npx skills add bovinphang/frontend-craft --skill fec-debug-framework
Clone the repo
git clone --depth 1 https://github.com/bovinphang/frontend-craft

Made for: Claude Code.

Or install frontend-craft, the plugin that ships this one along with the rest of its 56 skills, 11 commands, 14 agents, 5 hooks.

Wrote 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.

agentmods badge for fec-debug-framework

README.md
[![agentmods](https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-debug-framework/github.svg)](https://agentmods.dev/skills/bovinphang/frontend-craft/fec-debug-framework)
Your own site
<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/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.

agentmods 80×15 button for fec-debug-framework

Your own site · 80×15
<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="Reviewed on agentmods" width="80" height="20"></a>
Per session 66 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,372 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00066 $0.01372
Opus 5.5 $0.00026 $0.00549
Sonnet 5.5 $0.00013 $0.00274
Haiku 4.5 $0.00007 $0.00137

Measured 1mo ago against content hash 06c6df90eca8, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 1mo 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 独立复现(排除前端干扰)
localized/zh-CN/skills/fec-debug-framework/SKILL.md · 158 lines

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。

Read the full file on GitHub · 158 lines

Files

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.

Changes

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.

  1. 1mo ago First seen · 158 lines · 66 tokens per session scan A 06c6df90eca8

Subscribe to this mod's changes

fec-debug-framework is a skill published in the GitHub repository bovinphang/frontend-craft (22 stars, last pushed 23d ago), licensed MIT. It adds 66 tokens to every session and 1,372 once invoked, about $0.0003 per session on Opus 5.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.

Related

Other skills, from other repositories

audit

Project health audit and health check — architecture, performance, tests, dependencies, code quality. Use when assessing overall project health, before releases, or after refactors.

oliver-kriska/claude-elixir-phoenix · 35 tokens

skeptical-triage

Reusable 3-round self-challenge + arbiter pattern for filtering false positives from findings/verdicts. Use when the cost of a false-positive gate block exceeds the cost of 4 extra LLM turns.

avelikiy/great_cto · 49 tokens

anti-patterns

Catalogue of known SDLC anti-patterns that greatcto agents must actively reject when reviewing architecture, plans, code, or post-mortems. Used by architect (pre-impl), pm (planning), senior-dev (impl), l3-support (post-incident).

avelikiy/great_cto · 59 tokens

review-all

Multi-agent code review for diffs (project-agnostic). Covers standards, bugs, security, DRY, smells, perf, tests, API contracts, a11y/i18n. Verifies each finding to eliminate false positives. Use for /review-all, pre-PR/pre-commit review, or auditing uncommitted/staged changes.

ncoevoet/claude-review-all · 74 tokens

observability-baseline

Scaffold-time observability so a shipped product is not blind in prod from day one — error capture (Sentry), request-id structured logging, and /healthz + /readyz endpoints. stack-baseline pins Sentry but nothing wires it; this is the wiring. Loaded by app-scaffolder (bake into the scaffold), infra-provisioner (prod…

avelikiy/great_cto · 100 tokens

cypress-debugger

Use when a Cypress end-to-end test has already run and failed and the user wants the root cause and a concrete fix. Trigger on a failing Cypress spec, Timed-out-retrying command, unresolved selector, cy.intercept alias or request race, suite-breaking hook, retry-only flake, hydration or timing race, or a…

voidmatcha/e2e-skills · 158 tokens