skills.rest
Moisesjr20
Moisesjr20COMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Validate TSX components against React best practices and output a prioritized checklist.

1|Updated Mar 10, 2026
Search Tags:#typescript#performance#accessibility#react#best-practices#code-review#tsx
One-click install
npx skills add https://github.com/Moisesjr20/gueclaw --skill react-best-practices-moisesjr20
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Moisesjr20/gueclaw/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/Moisesjr20/gueclaw --skill react-best-practices-moisesjr20

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies and enforces React best practices across TSX components to prevent common pitfalls and elevate code quality.

Core Features & Use Cases

  • Automated code-review checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.
  • Guidance for PR reviews and automated linting to surface issues in large React codebases.
  • Actionable recommendations that guide refactoring and optimization across teams.

Quick Start

Integrate the checklist into your review workflow to surface primary improvements and suggested fixes for immediate impact.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I enforce React best practices during TSX code reviews?▼

React best practices are enforced during TSX code reviews by validating component structure, hooks usage, and TypeScript patterns against a condensed rule set, which outputs a prioritized, actionable checklist focused on performance and accessibility fixes.

What is the best way to check React components for accessibility and performance issues?▼

Checking React components for accessibility and performance issues involves validating TSX code against a condensed rule set to surface common anti-patterns, resulting in an actionable checklist that guides refactoring and optimization across teams.

How do I automate React PR checks to surface common TypeScript anti-patterns?▼

React PR checks are automated by integrating a TSX validation feature that identifies and enforces best practices, automatically surfacing TypeScript anti-patterns and outputting a prioritized checklist to guide code optimization.

Does this React code review checklist work for large codebases?▼

This React code review checklist works for large codebases by providing guidance for automated linting and PR reviews to systematically surface issues and suggest fixes across component structures and TypeScript patterns.

What React anti-patterns should I look for when refactoring TSX components?▼

When refactoring TSX components, look for anti-patterns related to component structure, hooks usage, accessibility, performance, and TypeScript patterns by validating code against a condensed rule set to generate actionable recommendations.

Related Skills

Explore More Software Engineering Skills→
jidohyunjidohyun
17

frontend-code-review

Review React/Next.js files and git diffs for code quality issues.

Community
Intermediate
esneiderbravoesneiderbravo
1

react-best-practices

Review TSX files for React best practices and generate prioritized refactoring reports.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

typescript-expert

Enforce strict TypeScript configurations and ESLint best practices during code review.

Community
Advanced
staruhubstaruhub
662

code-review

Evaluate React/TypeScript/Tailwind frontend code for quality and security vulnerabilities.

Community
Advanced