react

Analyze React .jsx/.tsx projects for component design, Hooks, performance, and accessibility.

6|1|Updated Dec 8, 2009

Search Tags:#performance #accessibility #react #hooks #jsx #code-review #component-design

Ready to run

npx skills add https://github.com/jey3dayo/dotfiles --skill react-jey3dayo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/jey3dayo/dotfiles/tree/main/agents/skills-internal/react/skills
Command: npx skills add https://github.com/jey3dayo/dotfiles --skill react-jey3dayo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Specialized guidance for evaluating React projects, focusing on component design, Hooks usage, performance patterns, and accessibility to help teams deliver robust, maintainable code.

Core Features & Use Cases

Evaluate component architecture and SRP adherence.
Assess Hooks patterns, dependency management, and memoization.
Identify accessibility gaps and propose improvements.
Provide project-specific evaluation criteria and agent integration patterns.
Use for code reviews, refactoring guidance, and performance tuning across React codebases.

Quick Start

Provide a React project (repository or code) for review to receive an assessment of components, hooks usage, performance, and accessibility.

Frequently Asked Questions about react

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

FAQPage Schema

How do I review React code for component design and hooks usage?▼

To review React code, analyze function components and hooks against Single Responsibility Principle and dependency management rules. This assessment detects anti-patterns in project architecture and provides concrete refactoring recommendations for maintainable code.

What is the best way to optimize React component performance and memoization?▼

Optimizing React performance involves assessing memoization patterns and identifying unnecessary re-renders within function components. This evaluation provides specific tuning guidance to improve rendering efficiency across typical React state management architectures.

Can I use this React review process for .jsx and .tsx projects?▼

Yes, this React review process applies to both .jsx and .tsx projects. It evaluates standard function components, context, and state management implementations to ensure robust code quality across typical React architectures.

How do I check accessibility compliance in a React project?▼

Checking accessibility in a React project requires analyzing component JSX for semantic gaps and compliance issues. The review identifies specific accessibility improvements to ensure inclusive user interface components.

Why does my React code review fail to identify Single Responsibility Principle violations?▼

React code reviews miss SRP violations when component architecture is not evaluated for distinct functional boundaries. Assessing component design specifically targets these structural flaws to provide actionable refactoring guidance.