frontend-code-review

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

1|Updated Feb 7, 2026
One-click install
npx skills add https://github.com/sangrokjung/claude-code-config-public --skill frontend-code-review-sangrokjung
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/sangrokjung/claude-code-config-public/tree/main/skills/frontend-code-review
Command: npx skills add https://github.com/sangrokjung/claude-code-config-public --skill frontend-code-review-sangrokjung

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the process of reviewing frontend code, ensuring adherence to quality, performance, and business logic standards before code submission.

Core Features & Use Cases

  • Automated Code Analysis: Scans frontend files (.tsx, .ts, .js) against a predefined checklist.
  • Two Review Modes: Supports reviewing all pending changes or specific targeted files.
  • Use Case: A developer is about to commit changes to a React component. They can use this skill to get an immediate review of the code against best practices, catching potential bugs or performance issues early.

Quick Start

Review the pending changes in the frontend files.

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?

To review React and TypeScript code for quality before committing, you can scan your `.tsx`, `.ts`, and `.js` files against an automated checklist that flags violations and provides suggested fixes. This process catches performance issues and business logic errors early.

What is automated frontend code review and how does it work?

Automated frontend code review scans your JavaScript and TypeScript files against predefined quality, performance, and business logic checklists. It flags detected violations with urgency metadata and provides suggested fixes to ensure standards are met before submission.

Can I review specific targeted files instead of all pending changes?

Yes, you can review specific targeted files instead of all pending changes. The code review process supports two modes: scanning all pending changes or analyzing specific targeted `.tsx`, `.ts`, and `.js` files based on your current needs.

Does the code review process check for business logic and performance issues?

Yes, the code review process checks for business logic and performance issues. It analyzes your frontend files against a predefined checklist that specifically covers quality assurance, performance standards, and business logic adherence.

What's the best way to catch bugs in frontend components before submission?

The best way to catch bugs in frontend components before submission is to run an automated code analysis on your pending changes. This scans `.tsx` and `.ts` files against best practices, flagging potential bugs with urgency metadata and suggested fixes.

Why does my TypeScript file review flag certain code violations?

Your TypeScript file review flags certain code violations because the scanner checks your code against a strict predefined checklist. Violations are flagged with urgency metadata when the code lacks adherence to quality, performance, or business logic standards.