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 skills add bovinphang/frontend-craft --skill fec-code-reviewgit 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-code-review)<a href="https://agentmods.dev/skills/bovinphang/frontend-craft/fec-code-review"><img src="https://agentmods.dev/badge/skills/bovinphang/frontend-craft/fec-code-review.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00098 | $0.01850 |
| Opus 5 | $0.00049 | $0.00925 |
| Sonnet 5 | $0.00020 | $0.00370 |
| Haiku 4.5 | $0.00010 | $0.00185 |
Grade A, and why
fec-code-review 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 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.
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 — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端代码评审
用途
从架构、类型安全、可访问性、样式一致性、性能和可测试性等 8 个维度审查前端代码质量，输出分级评审报告。
流程
- 先读项目事实：package scripts、框架、目录约定、最近 diff、现有测试和相关规则。
- 按风险找问题，而不是按个人偏好挑风格；每个发现都要能指向具体文件、行号和用户影响。
- 用五轴收敛结论：正确性、可维护性、类型/接口、用户体验、验证覆盖。
- 对安全、无障碍、E2E、性能等深水区只做初筛；需要专项调查时明确分流。
- 多维评审时先按职责拆分，再合并同类发现；同一文件同一根因只保留一条主发现，避免重复噪声。
- 报告先列阻塞问题，再列建议项；没有证据的问题不要写成确定结论。
多维评审编排
当改动跨越多个质量维度时，按“主评审 + 专项分流”组织，而不是让所有维度重复检查同一处代码。
| 维度 | 触发条件 | 分流边界 |
|---|---|---|
| TypeScript 工程与类型契约 | DTO、泛型、公共类型、类型守卫、any、断言、tsconfig |
深入类型建模和 TS 配置交给 TypeScript 流程 |
| 状态管理 | 状态归属、全局 store、URL 状态、派生状态、跨页面同步 | 状态选型与迁移交给状态管理专项流程 |
| 安全 | 用户输入、HTML 渲染、token、上传、第三方脚本 | 漏洞级分析交给安全专项流程 |
| 无障碍 | 弹窗、菜单、表单、键盘操作、焦点管理 | WCAG 细查交给无障碍专项流程 |
| 性能 | 大列表、重依赖、重复请求、长任务、包体积 | 性能证据与预算交给性能专项流程 |
| E2E | 关键用户路径、登录态、支付、跨页面流程 | 浏览器用例与 trace 交给 E2E 专项流程 |
发现合并规则：
- 同一根因出现在多个维度时，只保留最高严重级别，并在
Dimension中列出相关维度。 - 同一文件多处重复模式，合并为一条模式级发现，列出代表性位置。
- 置信度不足的问题放入 Open Questions，不升级为阻塞项。
- 自动化可稳定捕获的格式问题交给 lint/format，不作为人工评审主发现。
评审维度
- 架构
- 组件边界是否清晰
- 展示逻辑与业务逻辑是否分离
- 是否有可复用抽象
- 是否存在上帝组件
- 类型安全
- 是否存在不必要的
any - props 类型是否明确
- hooks/composables 返回值是否稳定
- 在可行情况下 API 契约是否有类型约束
- 渲染与状态
- 是否存在不必要的重复渲染
- key 的使用是否稳定
- 可推导状态是否被重复存储
- 本地状态是否耦合过深
- 全局 store 是否只保存真正跨边界共享的客户端状态
- URL 状态、服务端状态、表单状态和浏览器持久化是否边界清晰
- 样式
- 已有 Token 时是否还在使用 magic number
- 类名是否与仓库约定一致
- 响应式处理是否明确
- 是否无必要地混用了多套样式体系
- 可访问性
- 语义结构是否合理
- 是否在需要时正确使用 label 和 aria
- 是否支持键盘操作
- 浮层和菜单的焦点管理是否正确
- 可维护性
- 组件/页面文件规模是否合理（宜约 300 行内；逾 500 行或复杂度过高须拆分，见共享 React / Vue 规则中的「组件文件规模」）
- 命名质量是否良好
- 是否有应该提取的重复逻辑
- 是否存在死代码、过期注释或临时性 hack
- 业务状态、类型、标识是否用裸数字/裸字符串（应对齐
templates/shared/rules/fec-typescript.md「禁止 Magic Number / Magic String」）
- 测试
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 Changed · +3 lines ccf0ede4a3f0
- 8d ago First seen · 144 lines · 98 tokens per session scan A 24e212c818dc
fec-code-review is a skill published in the GitHub repository bovinphang/frontend-craft (21 stars, last pushed 6d ago), licensed MIT. It adds 98 tokens to every session and 1,850 once invoked, about $0.0005 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 skills, from other repositories
mobile-flows-maestro
This skill should be used when Maestro is explicitly requested or already present and the task is to author, run, or debug iOS/Android Maestro flows; use Maestro MCP; or handle Maestro selectors, system UI, permissions, Keychain, JavaScript, waits, device state, flakiness, or CI. Evidence includes a .maestro directory…
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…
ui-ux-pro-max
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design…
genpage
Creates, updates, and deploys Power Apps generative pages for model-driven apps using React v17, TypeScript, and Fluent UI V9. Orchestrates specialist agents for planning, entity creation, and code generation. Use it when user asks to build, retrieve, or update a page in an existing Microsoft Power Apps model-driven…
recipe-front-review
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
boundaries
Analyze Phoenix context boundaries and module coupling via mix xref. Use when checking cross-context calls, validating dependencies, before splitting modules, or reviewing architecture.