An automated auditing tool that reviews frontend code for architecture, type safety, security, and accessibility, generating detailed Markdown reports.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install frontend-code-review
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install frontend-code-review using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Frontend Code Review?
Frontend Code Review is a specialized utility within the Openclaw Skills collection designed to streamline the technical debt management of modern web applications. It systematically analyzes Vue, React, and TypeScript codebases against industry-standard best practices, focusing on maintainability and structural integrity. By acting as an automated peer reviewer, it ensures that every pull request aligns with team standards before merging.
The skill goes beyond simple linting by evaluating complex patterns such as component boundaries, hooks/composables stability, and state management efficiency. It provides developers with actionable feedback, categorizing findings into critical blockers, suggested optimizations, and style improvements, making it an essential asset for high-velocity frontend teams.
Frontend Code Review Use Cases
- Reviewing Vue, React, and TypeScript logic for hooks, composables, and UI layer integrity.
- Verifying that new code contributions adhere to internal team standards and architectural patterns.
- Auditing implementation results of design-to-code conversions before final merge.
- Identifying security vulnerabilities like XSS risks and hardcoded sensitive information.
How Frontend Code Review Works
- The Openclaw Skills agent triggers the review process upon a user request for code evaluation or PR audit.
- The tool scans the target files across nine dimensions: Architecture, Type Safety, Rendering/State, Styling, Accessibility, Maintainability, Testing, Security, and Style Consistency.
- It identifies critical blockers such as 'any' types in TypeScript or missing unit tests for core logic.
- A detailed Markdown report is generated, categorizing issues by severity (Must Modify, Suggestion, Optional).
- The report is automatically saved to the project's reports directory with a unique timestamp for historical tracking.
Frontend Code Review Setup
To integrate this skill into your workflow, ensure your Openclaw Skills environment is configured and run the following in your project root:
# Create the reports directory if it doesn't exist
mkdir -p reports/
# Trigger the review through your AI agent
# "Please review the recent changes in src/components/"
Frontend Code Review Data Schema & Taxonomy
The skill organizes its output into a structured reporting system to ensure traceability and clarity:
| Feature | Specification |
|---|---|
| Report Format | Markdown (.md) |
| Storage Location | /reports/ (Project Root) |
| Naming Convention | code-review-YYYY-MM-DD-HHmmss.md |
| Metadata | Includes generation timestamp and tool version |
| Taxonomy | Categorized by Risk Level (Low/Medium/High) and Action Type |
Frontend Code Review Advanced Features
- Multi-framework support covering Vue 3 (Composables) and React (Hooks) paradigms.
- Automated security auditing specifically targeting dangerouslySetInnerHTML and v-html usage.
- Comprehensive accessibility (A11y) checks including ARIA labels and focus management.
- Performance bottleneck detection for unnecessary re-renders and unstable list keys.
- Integration with Openclaw Skills Write tools for automated file system persistence.
SKILL.md
Loading
Related Openclaw Skills
Complex Task Executor
A structured methodology for AI agents to plan, execute, and review complex operations while automatically persisting lessons learned into long-term memory.
Weekly Report Skill
An automated reporting agent that aggregates data and publishes structured weekly reports directly to Enterprise WeChat (WeCom) documents.
Financial Product Workflow
A comprehensive AI-driven framework for financial product managers to navigate the entire product lifecycle from strategic planning to automated operation.
Legacy to Modern Frontend Migration
A specialized skill for transitioning legacy jQuery, HTML, and CSS projects into modern React or Vue 3 TypeScript architectures with high fidelity.
Retail Sales Performance Analysis
A professional business intelligence skill for retail environments that provides automated period-over-period sales analysis and performance diagnostics.
Kandy
Kandy is a powerful real-time communications platform integration that enables AI agents to manage voice, video, and messaging workflows seamlessly.
Featured*
