Frontend Code Review logo

Frontend Code Review

Community
ProgrammerAnthony
frontend-code-review

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

Overview

PublisherProgrammerAnthony
RepositoryExpert-Coding-Harness
Skill namefrontend-code-review
Stars
236
Forks
77
Bundled files
4
LicenseMIT
Links
Skill sourceRepository
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 4 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by ProgrammerAnthony on GitHub. Read the source before you install it.

Installation

Install the Frontend Code Review AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/ProgrammerAnthony/Expert-Coding-Harness.git /tmp/Expert-Coding-Harness
mkdir -p .claude/skills
cp -r /tmp/Expert-Coding-Harness/skills/frontend-code-review .claude/skills/frontend-code-review
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Frontend Code Review in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Frontend Code Review on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Frontend Code Review is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

前端代码审查专家

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

模式识别

启动时识别用户场景：

你的需求是：
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 — 前端安全检查清单

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Frontend Code Review AI skill do?

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

Why use Frontend Code Review on TypingMind?

Because you install it once and use it with any model. Frontend Code Review is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Frontend Code Review in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/ProgrammerAnthony/Expert-Coding-Harness/tree/master/skills/frontend-code-review. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Frontend Code Review?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Frontend Code Review?

As many as you like. As long as a model supports skills, you can use Frontend Code Review with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Frontend Code Review AI skill free?

Yes. It is published on GitHub by ProgrammerAnthony under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
affaan-m logo

Laravel Tdd

affaan-m
CommunityPopular

Desarrollo guiado por pruebas para Laravel con PHPUnit y Pest, factories, pruebas de base de datos, fakes y objetivos de cobertura.

39.1K
261.1K
Instructions
View
affaan-m logo

Laravel Verification

affaan-m
CommunityPopular

Bucle de verificación para proyectos Laravel: verificaciones de entorno, linting, análisis estático, pruebas con cobertura, escaneos de seguridad y preparación para despliegue.

39.1K
261.1K
Instructions
View
obra logo

Brainstorming

obra
CommunityPopular

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

25.8K
288.1K
7 files
View
obra logo

Executing Plans

obra
CommunityPopular

Use when you have a written implementation plan to execute in a separate session with review checkpoints

25.8K
288.1K
Instructions
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇