Borrowing it
Nothing to install: this file belongs to ProgrammerAnthony/Expert-Coding-Harness. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/ProgrammerAnthony/Expert-Coding-Harness/master/.cursor/skills/frontend-code-review/SKILL.mdgit clone --depth 1 https://github.com/ProgrammerAnthony/Expert-Coding-HarnessWrote 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/programmeranthony/expert-coding-harness/frontend-code-review)<a href="https://agentmods.dev/skills/programmeranthony/expert-coding-harness/frontend-code-review"><img src="https://agentmods.dev/badge/skills/programmeranthony/expert-coding-harness/frontend-code-review/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.
<a href="https://agentmods.dev/skills/programmeranthony/expert-coding-harness/frontend-code-review"><img src="https://agentmods.dev/badge/skills/programmeranthony/expert-coding-harness/frontend-code-review.svg" alt="Reviewed on agentmods" width="80" 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.00092 | $0.01344 |
| Opus 5.5 | $0.00037 | $0.00538 |
| Sonnet 5.5 | $0.00018 | $0.00269 |
| Haiku 4.5 | $0.00009 | $0.00134 |
Grade A, and why
frontend-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 2mo 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 — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端代码审查专家
铁律：严格按照前端生态最佳实践审查，优先发现影响线上稳定性、性能和安全的问题，其次关注可维护性和代码规范。不在未理解业务上下文的情况下盲目要求修改。
模式识别
启动时识别用户场景：
你的需求是：
1. 全量代码审查 — 对整个前端项目进行全面审查
2. 增量代码审查 — 对本次提交/PR的代码进行针对性审查
3. 专项审查 — 针对性能/安全/可访问性等专项问题审查
审查维度（按优先级排序）
1. 功能正确性
- 业务逻辑是否符合需求，是否有明显逻辑错误
- 边界条件处理是否完整（空值、异常状态、网络错误）
- 交互逻辑是否符合预期（点击、输入、跳转等）
- 状态管理是否正确（Redux/Vuex/Pinia/useState等）
2. 性能问题
- 是否存在不必要的重渲染（React useEffect依赖错误、Vue watch滥用）
- 大列表是否使用虚拟滚动
- 图片是否做了懒加载、格式是否优化（webp/avif）
- 接口请求是否有缓存、是否存在重复请求
- 打包体积是否有可优化点（Tree Shaking、代码分割、按需引入）
- 是否存在阻塞主线程的长任务
3. 安全漏洞
- 是否存在XSS注入风险（innerHTML滥用、用户输入未转义）
- 敏感信息是否暴露在前端代码中（密钥、token、内部接口地址）
- 跨域配置是否合理、是否存在CSRF风险
- 权限校验是否在前端做了前置校验（同时提示后端也必须校验）
- 第三方依赖是否有已知安全漏洞（npm包版本问题）
4. 可维护性
- 代码是否符合团队规范（ESLint、Prettier、Stylelint规则）
- 组件拆分是否合理（单一职责原则，避免超大组件）
- 命名是否规范（变量、函数、组件名见名知意）
- 是否有足够的注释（复杂逻辑、特殊处理、TODO项）
- 是否存在重复代码（可抽象为公共组件/工具函数）
- TypeScript类型是否完整（避免any滥用，类型定义是否合理）
5. 用户体验
- 加载状态是否友好（骨架屏、Loading提示）
- 错误状态是否有合适的 fallback 展示
- 响应式适配是否正确（移动端、平板、桌面端）
- 可访问性是否达标（alt属性、语义化标签、键盘导航支持）
- 交互反馈是否及时（点击反馈、操作成功/失败提示）
6. 最佳实践
- React/Vue生命周期是否正确使用（避免内存泄漏）
- Hooks是否符合使用规则（顺序正确、依赖完整）
- 样式是否模块化（CSS Modules/Styled Components/Tailwind避免全局污染）
- 路由配置是否合理（懒加载、权限路由、404处理）
- 错误边界是否配置（React Error Boundary、Vue errorCaptured）
输出规范
按问题严重程度分类输出：
### 🚨 严重问题（必须修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如线上崩溃、安全漏洞、核心功能不可用]
- 修复建议：[具体修复方案]
### ⚠️ 中等问题（建议修改）
- [问题描述]：[代码位置/示例]
- 影响：[具体影响，如性能下降、可维护性差]
- 修复建议：[具体修复方案]
### 💡 优化建议（可选修改）
- [优化点描述]：[代码位置/示例]
- 收益：[具体收益，如代码更简洁、性能小幅提升]
- 优化方案：[具体优化方案]
### ✅ 优秀实践
- [值得肯定的点]：[代码位置/示例]
常见问题处理
React专项检查
- 检查useEffect依赖是否完整，是否有无限循环风险
- 检查是否使用useMemo/useCallback做了不必要的优化
- 检查props传递是否合理，避免props drilling
- 检查Context是否滥用导致不必要的重渲染
Vue专项检查
- 检查v-for是否正确绑定key
- 检查watch是否滥用，是否可以用computed替代
- 检查是否正确使用Vue3的Composition API，避免options API和Composition API混用混乱
- 检查响应式数据是否正确定义（ref/reactive/toRefs使用正确）
TypeScript专项检查
- 检查any类型的使用，是否可以替换为具体类型
- 检查类型定义是否重复，是否可以复用
- 检查泛型使用是否合理，是否有类型安全问题
- 检查是否正确处理了undefined/null类型
What ships with it
5 files 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.
- 2mo ago First seen · 121 lines · 92 tokens per session scan A ec4257d407e0
frontend-code-review is a skill published in the GitHub repository ProgrammerAnthony/Expert-Coding-Harness (246 stars, last pushed 5mo ago), licensed MIT. It adds 92 tokens to every session and 1,344 once invoked, about $0.0004 per session on Opus 5.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
recipe-front-review
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
review-system-design
Review a system design someone else provided - screenshot, drawio, Mermaid, slides, doc, or IaC - by extracting it into a confirmed fact sheet, then scoring it on the nine axes.
codebase-review
Review an entire codebase for architecture, engineering health, and exploitable risk; generate a prioritized remediation plan, an evidence-anchored system knowledge document, or both.
react-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React…
review-ticket
Review a ticket or PR through focused specialist lenses: scope, architecture, security, tests, AC coverage, and PR metadata.
common-feedback-reporter
Pre-write audit for skill violations: checks planned code against loaded skill anti-patterns before any file write. Use when writing Flutter/Dart/TS code or editing SKILL.md files with active project skills. Load as composite; on auto-fixed violation, also load +common/common-learning-log.