frontend-code-review

Review frontend code files against quality, performance, and business logic checklists.

Updated Mar 12, 2026

Search Tags:#typescript #quality assurance #code review #performance #frontend #react

Ready to run

npx skills add https://github.com/MuhamadAnang/wareflow-project --skill frontend-code-review-muhamadanang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/MuhamadAnang/wareflow-project/tree/main/.agents/skills/frontend-code-review
Command: npx skills add https://github.com/MuhamadAnang/wareflow-project --skill frontend-code-review-muhamadanang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the review of frontend code, ensuring adherence to established quality, performance, and business logic standards, thereby improving code maintainability and reducing bugs.

Core Features & Use Cases

Code Quality Checks: Validates adherence to coding standards, styling conventions, and component structure.
Performance Analysis: Identifies potential performance bottlenecks related to React Flow usage and prop memoization.
Business Logic Validation: Ensures correct implementation of business rules, especially concerning state management in specific contexts.
Use Case: A developer can request a review of staged frontend files before committing, receiving immediate feedback on potential issues based on a predefined checklist.

Quick Start

Review the staged frontend files for any issues.

Frequently Asked Questions about frontend-code-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I review React and TypeScript code for quality before committing?▼

Review React and TypeScript code for quality by analyzing staged .tsx and .ts files against established checklists. The review flags violations in code quality, performance, and business logic, providing suggested fixes with urgency levels before you commit.

What frontend code performance issues can an automated review detect?▼

An automated frontend code review detects performance bottlenecks related to React Flow usage and prop memoization. It analyzes your JavaScript and TypeScript files to identify potential inefficiencies and flags them for optimization.

How do I check staged frontend files for coding standard violations?▼

Check staged frontend files for coding standard violations by running a pending-change review. This validates adherence to styling conventions, component structure, and business logic rules, immediately flagging any deviations found in your staged code.

Can I use an automated code review for specific TypeScript files instead of all staged changes?▼

Yes, you can target specific TypeScript files for review instead of analyzing all pending changes. This file-targeted approach validates individual .ts and .tsx files against quality and performance checklists, flagging violations with suggested fixes.

Does frontend code review validate business logic and state management?▼

Frontend code review validates business logic by ensuring correct implementation of business rules, especially concerning state management in specific contexts. It checks your JavaScript and TypeScript files to verify these rules are properly implemented.

What is the best way to automate frontend code quality checks for React components?▼

The best way to automate frontend code quality checks is using a checklist-based review tool that analyzes .tsx files. It validates component structure, styling conventions, and React Flow performance patterns, flagging violations with urgency and suggested fixes.