skills.rest
NagyVikt
NagyViktCOMMUNITY
Explore all skills by this author →
Website𝕏@NagyViktordpGitHub

react-best-practices

Analyzes TSX and JSX files for React best practices, accessibility, and performance issues.

2|Updated Mar 29, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#code-review
One-click install
npx skills add https://github.com/NagyVikt/codex-plugins --skill react-best-practices-nagyvikt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/NagyVikt/codex-plugins/tree/main/plugins/vercel/skills/react-best-practices
Command: npx skills add https://github.com/NagyVikt/codex-plugins --skill react-best-practices-nagyvikt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the common issue of inconsistent React code quality, performance bottlenecks, and accessibility gaps that often arise in rapidly evolving TSX/JSX codebases.

Core Features & Use Cases

  • Automated Quality Checklist: Evaluates component structure, hook usage, and TypeScript patterns against industry standards.
  • Modernization Guidance: Identifies legacy patterns like CSS-in-JS or manual fetch calls and suggests modern alternatives like Tailwind CSS and SWR.
  • Use Case: When refactoring a large component library, use this Skill to ensure all new components follow accessibility best practices and optimal state management patterns.

Quick Start

Run the react-best-practices skill to review the current directory for component structure and performance improvements.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I check my React codebase for accessibility and performance issues?▼

To check React code for accessibility and performance issues, analyze your TSX and JSX files to evaluate component structure, hook usage, and TypeScript patterns against modern industry standards, identifying inefficiencies and improper state management.

What is the best way to refactor legacy React component libraries?▼

The best way to refactor legacy React components is to identify outdated patterns like CSS-in-JS or manual fetch calls, then migrate to modern alternatives like Tailwind CSS and SWR to ensure optimal state management and accessibility.

Does this React code review tool work with TypeScript and shadcn/ui?▼

Yes, this React code review tool works with TypeScript and validates code against modern Vercel-native standards, specifically checking for proper shadcn/ui integration and modern hook usage within TSX files.

How do I identify improper React hook usage in my frontend application?▼

To identify improper React hook usage in a frontend application, run an automated quality checklist that targets component-heavy web applications to detect state management inefficiencies and legacy patterns in your TSX files.

Can I use this to modernize manual fetch calls in my React components?▼

Yes, you can modernize manual fetch calls in React components by analyzing your codebase to identify these legacy patterns and receiving guidance to integrate SWR for optimized data fetching and performance.

Related Skills

Explore More Software Engineering Skills→
camilooscargbaptistacamilooscargbaptista
7

frontend-review

Analyzes frontend code quality and generates prioritized reports for common defects and inefficiencies.

Community
Advanced
aymenhamoudiiaymenhamoudii

tailwind-design-system

Create scalable Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
SayBGMSayBGM

moai-library-shadcn

Implement and customize shadcn/ui components in React with Tailwind CSS.

Community
Advanced
pvillegapvillega
23

wcag-audit

Detect WCAG violations via ESLint plugins and axe-core runtime scans.

Community
Advanced