skills.rest
jey3dayo
jey3dayoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/jey3dayo/dotfiles --skill react-jey3dayo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
vercelvercel
246

react-best-practices

Identify React best-practices issues in TSX/JSX components.

Official
Intermediate
het8802het8802
3

vercel-react-best-practices

Optimize React and Next.js applications with performance guidelines for data fetching and rendering.

Community
Advanced
Angriff36Angriff36

Frontend Implementation

Guide frontend UI development across React, Vue, and Angular projects.

Community
Advanced
OpenAEC-FoundationOpenAEC-Foundation
6

react-agents-review

Validate React code against hooks, TypeScript, and quality checklists.

Official
Advanced