A local-first development skill designed to review React and TypeScript components for correctness, hook safety, prop modeling, and accessibility with minimal, precise changes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install react-component-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 react-component-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 React Component Review?
React Component Review is a standalone development skill tailored for engineers seeking rigorous code quality checks without leaving their local environment. It systematically analyzes React and TypeScript components, identifying hook-dependency risks, rendering inefficiencies, state coverage gaps, and screen-reader accessibility issues. Operating fully offline, it provides high-value static and behavioral assessments without requiring external dependencies.
By leveraging this tool within Openclaw Skills, teams can ensure their UI blocks adhere to strict engineering principles. The skill prioritizes surgical, non-breaking modifications, ensuring that generated patches fix underlying structural or behavioral flaws while preserving intended component execution.
React Component Review Use Cases
- Reviewing complex React components for hidden state bugs and hook dependency issues before submitting a pull request.
- Audit existing TypeScript prop types and state schemas to prevent runtime errors and ensure comprehensive type safety.
- Enhancing UI component accessibility (a11y) to guarantee compliance with keyboard navigation and screen-reader standards.
- Formulating minimal, low-risk patches for legacy frontend code without introducing broad, breaking rewrites.
How React Component Review Works
- Analyze Scope: The skill restates the component's visible objective and establishes the review boundaries, addressing any foundational ambiguities upfront.
- Evaluate Correctness: It examines rendering workflows, evaluating state usage, memoization logic, and potential stale closure risks within React hooks.
- Type & Accessibility Audit: It verifies TypeScript prop types and state definitions while evaluating semantic HTML elements for keyboard and screen-reader compatibility.
- State Coverage Check: It checks how the component handles asynchronous data loading, evaluating empty, loading, and error states.
- Surgical Patching: It removes speculative abstractions and generates an isolated, minimal patch to correct high-risk structural flaws.
- Verification Delivery: It outputs a final verdict (ready, needs changes, or blocked) alongside precise testing steps via Storybook, linting, or unit tests.
React Component Review Setup
This skill operates natively as a local-first, standalone tool requiring no primary cloud infrastructure configuration. To run Openclaw Skills with enhanced capabilities and workspace context via the optional cloud CLI layer, execute the following commands:
npm install -g @ritualai/cli
ritual init
ritual status
React Component Review Data Schema & Taxonomy
The skill runs locally and manages architectural insights through an optional knowledge capture layer using the Open Knowledge Format (OKF). Upon user approval, durable engineering rules are structured and written to the repository.
Directory Layout
All approved knowledge components are stored in the following structure:
knowledge/engineering/<slug>.md
Schema Taxonomy
Each generated markdown file contains YAML frontmatter utilizing the following schema structure:
| Field | Type | Description |
|---|---|---|
type |
String | Categorization of knowledge (e.g., API Convention, Component Pattern). |
title |
String | A brief, single-line explanation of the rule. |
description |
String | Context around what was learned during the review task. |
resource |
String | Local filepath referencing the evidence or component reviewed. |
tags |
Array | Metadata tags for categorization and search filtering. |
timestamp |
String | ISO 8601 formatted date and time of the file creation. |
React Component Review Advanced Features
- Local-First Executions: Operates fully standalone inside your codebase without triggering network calls or leaking code context to third-party services.
- Open Knowledge Format (OKF) Exports: Captures recurring engineering patterns and saves them as versionable markdown files to make the repository smarter for future agent passes.
- Surgical Patch Verification: Restricts adjustments strictly to minimal code changes, explicitly ensuring changes are reversible and non-breaking.
- Workspace Exploration Upgrade: Connects seamlessly with cloud tools to pull external context like design-system primitives, product specs, or matching codebase implementations.
SKILL.md
Loading
Related Openclaw Skills
Review Accessibility
A local-first development skill to check keyboard accessibility, screen-reader semantics, contrast, focus states, and dynamic announcements on any UI surface.
Review Error Handling
A local-first development skill that audits codebases for robust error paths, input boundaries, timeout configurations, structured logging, and operation idempotency.
GoCreative Compliance
An on-demand, pay-per-call compliance toolkit enabling AI agents to screen entities against global watchlists, sanctions, and PEP databases instantly.
Review Loading, Error, Empty States
A local-first development skill to audit and ensure proper loading, error, empty, partial, and retry states across UI surfaces.
Performance Regression Triage
A structured workflow for AI agents to systematically isolate and triage system performance issues using concrete telemetry data.
API Change Review
An automated development skill that reviews API diffs for compatibility, security, and schema evolution, classifying changes as additive, behavior-changing, or breaking.
Featured*
