frontend-code-review
从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bovinphang/frontend-code-reviewWhat This Skill Does
The frontend-code-review skill is a sophisticated static analysis and architectural evaluation tool designed for OpenClaw AI agents. It acts as an automated, high-standard code reviewer that inspects front-end source code written in Vue, React, and TypeScript. By evaluating code against strict criteria—including architectural integrity, type safety, rendering efficiency, accessibility (a11y), and security—it ensures that front-end codebases maintain high quality. Upon completing a review, the skill automatically generates a detailed, actionable Markdown report saved directly to your repository's /reports/ directory.
Installation
To integrate this skill into your environment, run the following command in your terminal:
clawhub install openclaw/skills/skills/bovinphang/frontend-code-review
Once installed, the agent will automatically listen for requests regarding code quality, reviews, or refactoring suggestions for your web projects.
Use Cases
- Pre-Merge PR Reviews: Use this skill to catch subtle bugs, type errors, or architectural drift before code reaches the main branch.
- Design-to-Code Validation: Ensure that implementation results from design-to-code pipelines meet performance and maintainability standards.
- Legacy Refactoring: Utilize the reviewer to identify 'God components', repetitive logic, or outdated patterns that hinder development velocity.
- Accessibility Audits: Verify that your components support correct aria-label usage, keyboard navigation, and semantic HTML structure.
Example Prompts
- "Please perform a code review on the
src/components/UserDashboard.tsxfile and let me know if there are any critical issues before I merge this PR." - "Review the state management implementation in
composables/useAuth.ts. Check for unnecessary re-renders and potential type safety issues." - "Run a full quality audit on the new UI module. I need a report on performance, accessibility compliance, and any hardcoded styles that violate our design tokens."
Tips & Limitations
- Actionable Advice: The AI is instructed to avoid generic feedback. If it suggests 'performance optimization', it will point to the exact pattern (e.g., 'unstable key usage in list rendering') causing the issue.
- Report Storage: Ensure your workspace has write permissions in the root directory, as the skill creates a
reports/folder if it does not already exist. - Context Awareness: For the best results, ensure the agent has read access to your project's configuration files (like
tsconfig.jsonortailwind.config.js) so it can validate styles and types accurately. - Human-in-the-loop: While the skill is excellent at identifying risks, it is a tool meant to assist developers; use your engineering judgment for final architectural decisions.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bovinphang-frontend-code-review": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read
Related Skills
legacy-web-standard
针对 JavaScript + jQuery + HTML/CSS 传统前端项目的开发与维护规范。当用户在非框架项目中工作，涉及 jQuery、原生 JS、传统多页面应用（MPA）、模板引擎渲染页面、或维护遗留代码时自动激活。
accessibility-check
审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。
security-review
前端代码安全审查，检测 XSS、CSRF、敏感数据泄露、不安全的用户输入处理和依赖风险，并将报告保存为 Markdown 文件。当用户要求安全检查、安全审查，或代码涉及用户输入、认证、支付、文件上传等敏感操作时自动激活。
test-and-fix
执行项目校验命令（lint、type-check、test、build），分析失败原因，安全修复问题，并将总结报告保存为 Markdown 文件。当用户要求检查、验证、测试代码改动时自动激活。
nextjs-project-standard
Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。