Agent skill

Frontend Code Review

by ProgrammerAnthony in ProgrammerAnthony/Expert-Coding-Harness

A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

MITAuto-check passedFrontend & Design

Install Frontend Code Review

skills CLI
$ npx skills add ProgrammerAnthony/Expert-Coding-Harness --skill frontend-code-review -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ProgrammerAnthony/Expert-Coding-Harness frontend-code-review --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ProgrammerAnthony/Expert-Coding-Harness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-code-review .claude/skills/frontend-code-review && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-code-review
GitHub stars
235
Token cost
~614 tokens
SKILL.md length
89 words
Files
6 (incl. references)
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

  • Works in 6 steps: 功能正确性 → 性能问题 → 安全漏洞 → …
  • Tasks that involve CSS and styling
  • SKILL.md covers 模式识别, 审查维度(按优先级排序), 输出规范 and 常见问题处理, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Code Review is an agent skill from ProgrammerAnthony/Expert-Coding-Harness. Use when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

Its SKILL.md is about 610 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `README.md`, `references/frontend-best-practices.md` and `references/frontend-security-checklist.md`).

It sits in Frontend & Design, covering CSS and styling and Code review. It works with Vue.js, React, TypeScript and Tailwind CSS. The repository describes itself as: 生产级 AI Agent 技能集,辅助AI Harness应用于企业开发,覆盖代码审查、代码安全审计、TDD、需求工程、实施计划与子代理编排、架构设计、调试、前端开发与技能创建全流程。 The licence is MIT.

When your agent uses it

  • Tasks that involve CSS and styling
  • Tasks that involve Code review

Example prompts

  • “/frontend-code-review”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. 功能正确性
  2. 性能问题
  3. 安全漏洞
  4. 可维护性
  5. 用户体验
  6. 最佳实践

What it can do on your machine

Read from SKILL.md and the folder at commit ab0b827. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Code Review loads about 614 tokens when it runs, and up to ~5k if it reads all its reference files. Until then it costs about 46 tokens; SKILL.md has 89 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~46
When it runs · the whole SKILL.md, loaded when a task matches
~614
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ProgrammerAnthony/Expert-Coding-Harness at commit ab0b827, republished under its MIT licence (© ProgrammerAnthony). 89 words, ~614 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-code-review/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
frontend-code-review
description
Use when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。

前端代码审查专家

铁律:严格按照前端生态最佳实践审查,优先发现影响线上稳定性、性能和安全的问题,其次关注可维护性和代码规范。不在未理解业务上下文的情况下盲目要求修改。

模式识别

启动时识别用户场景:

你的需求是:
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)

输出规范

按问题严重程度分类输出:

markdown
### 🚨 严重问题(必须修改)
- [问题描述]:[代码位置/示例]
- 影响:[具体影响,如线上崩溃、安全漏洞、核心功能不可用]
- 修复建议:[具体修复方案]

### ⚠️ 中等问题(建议修改)
- [问题描述]:[代码位置/示例]
- 影响:[具体影响,如性能下降、可维护性差]
- 修复建议:[具体修复方案]

### 💡 优化建议(可选修改)
- [优化点描述]:[代码位置/示例]
- 收益:[具体收益,如代码更简洁、性能小幅提升]
- 优化方案:[具体优化方案]

### ✅ 优秀实践
- [值得肯定的点]:[代码位置/示例]

常见问题处理

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类型

参考资源

  • references/frontend-best-practices.md — 前端开发最佳实践手册
  • references/react-performance-checklist.md — React性能优化检查清单
  • references/vue-best-practices.md — Vue开发最佳实践
  • references/frontend-security-checklist.md — 前端安全检查清单

© ProgrammerAnthony, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in skills/frontend-code-review of ProgrammerAnthony/Expert-Coding-Harness.

  • SKILL.md
  • README.md
  • references/frontend-best-practices.md
  • references/frontend-security-checklist.md
  • references/react-performance-checklist.md
  • references/vue-best-practices.md

Open the folder on GitHubat commit ab0b827

Compare with similar skills

Frontend Code Review next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Code Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Code Review this skillProgrammerAnthony/Expert-Coding-Harness235—~614Automated safety check: PassMIT
Frontend Code ReviewProgrammerAnthony/Anything-Extract139—~957Automated safety check: PassMIT
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
UI UX Pro Maxsundial-org/awesome-openclaw-skills6632 repos~657Automated safety check: PassNone
UI UX Pro Maxshobcoder/shob577—~3.7kAutomated safety check: PassMIT
Dokan Frontend Devgetdokan/dokan288—~1.9kAutomated safety check: PassNone

Similar skills

  • Frontend Code Review

    ProgrammerAnthony/Anything-Extract

    指导在项目中对前端代码(Next.js/React/TypeScript/Tailwind 等)进行结构、可维护性、性能与一致性审查,基于既定规则清单。适用于用户请求审查 .tsx/.ts/.js/.jsx 等前端文件或前端目录下的页面与组件。不用于后端代码(如 .py)。

    139 GitHub stars~957 tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    sundial-org/awesome-openclaw-skills

    UI/UX design intelligence and implementation guidance for building polished interfaces.

    663 GitHub starsUsed in 2 repos~657 tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    shobcoder/shob

    UI/UX design intelligence expert for web and mobile applications.

    577 GitHub stars~3.7k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed
  • Dokan Frontend Dev

    getdokan/dokan

    Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).

    288 GitHub stars~1.9k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Oma Frontend

    first-fluke/oh-my-agent

    Frontend specialist for React, Next.js, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment.

    1.3k GitHub stars~2.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from ProgrammerAnthony/Expert-Coding-Harness

All 23 skills in this repo
  • Architecture Advisor

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要设计新系统架构、评审或优化已有系统架构、选择技术方案时。触发场景:架构分析、架构设计、系统设计、architecture、架构优化、系统架构、架构评审、架构咨询、技术方案、技术设计、如何组织代码结构、模块划分、服务拆分、数据库选型、微服务设计。

    235 GitHub stars~673 tokensUpdated 4 mo ago
    Auto-check passed
  • Code Review Expert

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户要求审查代码、评估代码质量、提交 PR 前检查、发现代码有潜在问题时。触发场景:代码审查、code review、审查代码、review、检查代码、代码检查、代码质量、代码评审、这段代码有问题吗、帮我看看代码、合并前检查。

    235 GitHub stars~806 tokensUpdated 4 mo ago
    Auto-check passed
  • Code Security Audit

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要对代码进行安全审计、发现安全漏洞、上线前安全评估、检查代码是否存在安全风险时。触发场景:代码安全审计、安全审计、白盒审计、安全扫描、漏洞检测、漏洞挖掘、SQL注入、命令注入、XSS、SSRF、反序列化、认证绕过、越权、代码安全检查、security audit、code…

    235 GitHub stars~1.6k tokensUpdated 4 mo ago
    Auto-check passed
  • Debug Expert

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 程序出现错误、异常、崩溃,或行为与预期不符,或测试失败,或无法定位问题根因时。触发场景:调试、debug、报错、错误、异常、bug、问题排查、故障排查、不工作、崩溃、无法运行、出错了、为什么不生效、运行报错、跑不起来、程序挂了。

    235 GitHub stars~986 tokensUpdated 4 mo ago
    Auto-check passed
  • Frontend Performance Optimization

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景:前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。

    235 GitHub stars~701 tokensUpdated 4 mo ago
    Auto-check passed
  • Prd Engineer

    ProgrammerAnthony/Expert-Coding-Harness

    A skill your agent uses when 用户需要编写产品需求文档、整理功能需求、拆解 GitHub Issues 或制定实施计划时。触发场景:写PRD、产品需求、需求文档、prd、需求分析、功能设计、产品设计、需求评审、需求拆解、issue拆解、帮我写需求、整理功能点、我有个想法要落地、新功能规划。

    235 GitHub stars~624 tokensUpdated 4 mo ago
    Auto-check passed

Questions about Frontend Code Review

What does Frontend Code Review do?

A skill your agent uses when 用户需要审查前端代码(React/Vue/Next.js/TypeScript/Tailwind等)、检查代码质量、性能问题、可维护性、安全漏洞、最佳实践落地时。触发场景:前端代码评审、前端代码优化、React/Vue代码检查、TypeScript代码审查、前端性能优化、前端安全审计、前端代码规范检查。. Frontend Code Review is an agent skill from ProgrammerAnthony/Expert-Coding-Harness.

When should I use Frontend Code Review?

Frontend Code Review fits situations like: tasks that involve CSS and styling; tasks that involve Code review.

How do I install Frontend Code Review in Claude Code?

Run `npx skills add ProgrammerAnthony/Expert-Coding-Harness --skill frontend-code-review -a claude-code`. Or copy the skill folder (skills/frontend-code-review in ProgrammerAnthony/Expert-Coding-Harness) into .claude/skills/frontend-code-review in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Code Review in Codex?

Run `npx skills add ProgrammerAnthony/Expert-Coding-Harness --skill frontend-code-review -a codex`. Or copy the skill folder (skills/frontend-code-review in ProgrammerAnthony/Expert-Coding-Harness) into .agents/skills/frontend-code-review in your project. Codex loads it when a task matches its description.

Can I use Frontend Code Review in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ProgrammerAnthony/Expert-Coding-Harness --skill frontend-code-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-code-review, .gemini/skills/frontend-code-review, .github/skills/frontend-code-review and .opencode/skills/frontend-code-review in your project.

What does Frontend Code Review need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Code Review is instructions for the agent only.

Does Frontend Code Review access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Code Review safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Code Review use?

Frontend Code Review is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Code Review use?

About 614 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.4k tokens, read only when the agent opens those files.

What are the alternatives to Frontend Code Review?

Skills that share tags, products or a category with Frontend Code Review: Frontend Code Review (ProgrammerAnthony/Anything-Extract, 139 stars), Design Style (Castor6/tactus, 376 stars), UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars) and UI UX Pro Max (shobcoder/shob, 577 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Code Review?

ProgrammerAnthony (a GitHub user) maintains it in ProgrammerAnthony/Expert-Coding-Harness, which has 235 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on May 11, 2026.

Source: ProgrammerAnthony/Expert-Coding-Harness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.