An AI-powered frontend code reviewer that automates design system compliance, structural audits, responsiveness checks, and visual consistency for React and Vue applications.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install phy-ui-reviewer
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 phy-ui-reviewer 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 UI Reviewer?
The UI Reviewer skill is an automated frontend code audit tool designed for developers who need to maintain strict design fidelity, performance optimization, and architectural consistency. Acting as an intelligent gatekeeper, this agent meticulously scans stylesheets, components, and layout files to ensure every line of code aligns perfectly with defined design principles and design systems.
By leveraging this agent via Openclaw Skills, development teams can eliminate the tedious overhead of manual layout testing and css file auditing. It programmatically catches errors like hardcoded colors, broken breakpoints, missing active states, and non-semantic structural components directly in your workspace. This accelerates peer review cycles and maintains high brand-compliant UI standards across your entire digital product footprint.
UI Reviewer Use Cases
- Design Tokens Verification: Automatically scan front-end components to ensure colors, paddings, fonts, and shadows use standardized system tokens rather than arbitrary, hardcoded values.
- React and Vue Code Quality Audits: Analyze component structure to enforce single-responsibility principles, state hoisting, prop minimization, and prevent performance-killing layout thrashing.
- Mobile-First Responsiveness Checks: Verify CSS and JS setups for layout adaptiveness, mobile-first min-width queries, sufficient touchscreen target sizes, and dynamic image resolution handling.
- Interactive UI State & UX Reviews: Confirm that interactive components have comprehensive styling for critical interactive states including hover, focus, disabled, loading, and empty screens.
- Performance and Asset Inspections: Scan for missing lazy loading attributes on images, complex list views lacking virtualization, and non-hardware-accelerated CSS animations.
How UI Reviewer Works
- Agent Activation: The developer triggers the skill using natural language inputs such as "review UI", "check UI structure", or "audit design system compliance" within an Openclaw environment.
- Codebase Parsing: The agent accesses the local frontend workspace files, isolating stylesheets, component structures (React/Vue/HTML), and configuration setups.
- Multi-Dimensional Code Audit: It executes a sequence of automated checks across five key pillars: design tokens, component organization, responsive parameters, visual consistency states, and UI rendering performance.
- Structured Assessment: The reviewer rates findings by severity levels (Critical, Warning, and Suggestion) to prioritize remediation tasks.
- Report & Checklist Generation: The agent generates a comprehensive Markdown-formatted visual audit report complete with issue codes, file locations, line numbers, actionable code recommendations, and a compliance index table.
UI Reviewer Setup
Get the UI Reviewer skill up and running in your local workspace using these simple steps:
- Ensure you have the Openclaw environment configured and the base CLI workspace active.
- Retrieve and import the UI Reviewer skill using your system terminal:
claw-cli install ui-reviewer --source https://github.com/PHY041
- Start an active session and instruct your AI coding assistant to run a UI analysis on your codebase directory:
# Trigger a full visual review in your terminal
claw run ui-reviewer "review UI in src/components"
- Review the generated markdown report directly inside your development environment.
UI Reviewer Data Schema & Taxonomy
The UI Reviewer skill processes your project's codebase and outputs structured metrics and reporting data based on the following metadata taxonomy:
Audit Report Schema
| Section | Component | Purpose |
|---|---|---|
| Summary | Quantitative Totals | Displays total files checked, issues resolved, and issues found grouped by severity level |
| Issues | Granular File Analysis | Detailed records with unique IDs (e.g., [DS-001]), exact file paths, line pointers, and code replacements |
| Checklist Summary | Compliance Grid | Category-by-category pass/fail metrics scoring the overall frontend design health |
Severity Tier Definition
- Critical (Must Fix): Design system breaks, hardcoded CSS hex codes, or non-responsive mobile views that break user experience.
- Warning (Should Fix): Touch target sizes below 44x44px, lack of interactive states, or poor state management patterns.
- Suggestion (Nice to Have): Large single-file component files (exceeding 200 lines) that can be easily refactored into smaller building blocks.
UI Reviewer Advanced Features
- GPU-Accelerated Animation Enforcement: Evaluates complex CSS transitions and transitions to ensure GPU hardware acceleration is utilized via transform and opacity, avoiding heavy CPU layout shifts.
- Tree-Shaking Verification: Audits CSS and Tailwind configuration styles to ensure unused CSS rules are stripped, keeping file sizes optimized for loading performance.
- Semantic Accessibility (a11y) Guards: Warns developers when touch targets do not meet strict usability thresholds or focus outlines are completely suppressed without safe fallbacks.
- Customizable Reference Standards: Allows integration rules to inherit rules from popular frameworks such as the Front-End Checklist, React Code Review guidelines, and custom Tailwind configurations via Openclaw Skills integrations.
SKILL.md
Loading
Related Openclaw Skills
Project Truth Audit
A comprehensive whole-repository audit skill for AI agents to contrast stated system claims with the underlying reality of files, tests, and runtime evidence.
Alibaba Cloud Lindorm Vector Database Migration Assistant
An automated AI agent skill for seamless vector database migration from Milvus, Elasticsearch, Qdrant, or CSV to Alibaba Cloud Lindorm with built-in checkpoint resume.
Xiaohongshu Short Drama Trend Tracker (playlet-xhs-feed)
A smart feed integration for Openclaw Skills that tracks viral short drama trends on Xiaohongshu, offering dynamically clustered genre insights and professional HTML daily reports.
playlet-bili-feed
An automated tracking and intelligence tool that scans Bilibili for viral short drama content, sorts by engagement, clusters themes, and generates rich HTML reports.
Accessibility (A11y) Reviewer
An AI-powered web accessibility reviewer that automatically audits web pages and code structures against WCAG 2.2 AA compliance standards.
NotebookLM Research Assistant
An automated browser-driven skill that bridges Claude Code and Google NotebookLM to query your documents and retrieve citation-backed Gemini answers.
Featured*
