frontend-code-review

Review frontend .tsx, .ts, and .js files against quality and performance standards.

Updated Jun 13, 2025
One-click install
npx skills add https://github.com/minseok1109/coffimer-app --skill frontend-code-review-minseok1109
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/minseok1109/coffimer-app/tree/main/.agents/skills/frontend-code-review
Command: npx skills add https://github.com/minseok1109/coffimer-app --skill frontend-code-review-minseok1109

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 quality, performance, and business logic standards, thereby improving code maintainability and reducing bugs.

Core Features & Use Cases

  • Automated Code Analysis: Scans .tsx, .ts, and .js files against a defined checklist.
  • Two Review Modes: Supports reviewing pending changes before commit or specific files on demand.
  • Checklist Enforcement: Flags violations based on predefined rules for code quality, performance, and business logic.
  • Use Case: Before merging a new feature, use this skill to automatically check all modified React components for common pitfalls like improper conditional styling or inefficient data fetching.

Quick Start

Review the frontend code in the src/components directory 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 automate React code review for TypeScript files before committing?

Automate React code review by scanning `.tsx` and `.ts` files against a predefined checklist for quality, performance, and business logic standards. This Skill flags violations with urgency and provides suggested fixes for pending changes.

What is the best way to check JavaScript components for performance issues and code quality?

Check JavaScript components by running an automated analysis against defined rules for performance and code quality. The review identifies common frontend pitfalls and enforces business logic standards.

Can I review specific frontend files on demand instead of scanning all pending changes?

Yes, you can review specific frontend files on demand. The Skill supports two modes: reviewing pending changes before commit and targeting individual `.tsx`, `.ts`, or `.js` files for analysis.

How does automated frontend code review handle improper conditional styling in React?

Automated frontend code review detects improper conditional styling by checking React components against a comprehensive checklist. It flags these violations with an assigned urgency level and suggests fixes.

Does this code review tool work with plain JavaScript or only TypeScript projects?

This code review tool works with both plain JavaScript and TypeScript projects. It analyzes `.js`, `.ts`, and `.tsx` files to ensure adherence to quality, performance, and business logic standards.

What types of violations are flagged during a frontend code quality scan?

A frontend code quality scan flags violations related to code quality, performance, and business logic. It checks for common React pitfalls like improper conditional styling or inefficient data fetching.