skills.rest
gaoqiongxie
gaoqiongxieCOMMUNITY
Explore all skills by this author →
GitHub

frontend-code-review

Review React and TypeScript code across performance, accessibility, and type safety dimensions.

1|1|Updated Apr 9, 2026
Search Tags:#typescript#code review#accessibility#refactoring#frontend#react#performance optimization
One-click install
npx skills add https://github.com/gaoqiongxie/skills-ai --skill frontend-code-review-gaoqiongxie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-code-review
Source: https://github.com/gaoqiongxie/skills-ai/tree/main/frontend-code-review
Command: npx skills add https://github.com/gaoqiongxie/skills-ai --skill frontend-code-review-gaoqiongxie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend developers often spend excessive time manually reviewing React/TypeScript code for performance bottlenecks, accessibility gaps, type safety issues, and maintainability flaws, leading to inconsistent review quality and missed critical bugs that impact user experience and development efficiency.

Core Features & Use Cases

  • Structured Multi-Dimension Review: Covers 5 core dimensions including performance (unnecessary re-renders, missing memoization), maintainability (component responsibility, prop complexity), accessibility (ARIA labels, keyboard navigation, color contrast), type safety (any type abuse, generic completeness), and code style standards.
  • Prioritized Actionable Reports: Outputs severity-classified issues (blocking, warning, suggestion) with clear before/after refactoring examples for common frontend code problems.
  • Use Case: A developer working on a React e-commerce product page can use this skill to quickly identify unnecessary re-renders in product card components and missing alt text for product images before merging code, reducing post-release bugs and improving accessibility compliance.

Quick Start

Use the frontend-code-review skill to review the attached React component code and get a prioritized list of issues and refactoring suggestions.

Frequently Asked Questions about frontend-code-review

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

FAQPage Schema
How do I perform a structured code review for React and TypeScript components?▼

To perform a structured React and TypeScript code review, apply a systematic workflow that evaluates performance, maintainability, accessibility, type safety, and code style. This process outputs severity-classified issues with actionable refactoring recommendations.

What is the best way to identify unnecessary re-renders and missing memoization in React?▼

Identifying unnecessary re-renders and missing memoization requires analyzing component rendering patterns during a structured frontend code review. This approach detects performance bottlenecks and provides prioritized, actionable refactoring examples to optimize component efficiency.

How do I check my TSX code for accessibility compliance and ARIA label issues?▼

Checking TSX code for accessibility compliance involves validating ARIA labels, keyboard navigation, and color contrast within a React code review. This process outputs severity-classified issues to ensure your frontend meets accessibility standards before merging.

Can I use a systematic review workflow to fix TypeScript type safety and any type abuse?▼

You can use a systematic review workflow to fix TypeScript type safety by validating generic completeness and detecting any type abuse in TSX projects. This workflow outputs prioritized warnings and clear before/after refactoring examples for type corrections.

What dimensions should a frontend code review cover to ensure quality and performance?▼

A frontend code review for quality and performance should cover five core dimensions: performance, maintainability, accessibility, type safety, and code style standards. This multi-dimension assessment replaces manual reviews with standardized, actionable quality reports.

Why does manual React code review often miss critical accessibility and type safety bugs?▼

Manual React code review often misses critical accessibility and type safety bugs due to inconsistent review quality and excessive time requirements. A structured systematic workflow solves this by standardizing assessments across multiple dimensions to prevent post-release bugs.

Related Skills

Explore More Software Engineering Skills→
cyanluna-gitcyanluna-git
173

review-frontend

Analyze frontend PR code for component design, state management, hooks, performance, and accessibility.

Community
Intermediate
neelbaumanneelbauman
1

code-review

Reviews code for correctness, security, performance, readability, and testability.

Community
Intermediate
BamoseBamose
5

coding-standards

Enforce universal coding standards across TypeScript, JavaScript, React, and Node.js projects.

Community
Advanced
prof-danielcprof-danielc

speckit.checker

Run static analysis tools and aggregate results into a prioritized issue report.

Community
Advanced