fxa-check-react

Identify and report issues in changed React/TSX files against main.

683|238|Updated Jun 3, 2015
One-click install
npx skills add https://github.com/mozilla/fxa --skill fxa-check-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fxa-check-react
Source: https://github.com/mozilla/fxa/tree/main/.claude/skills/fxa-check-react
Command: npx skills add https://github.com/mozilla/fxa --skill fxa-check-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviews changed React/TSX code for component design, hooks misuse, performance, accessibility, and state management issues. Reports findings with severity and concrete fix recommendations. Operates on files changed vs main.

Core Features & Use Cases

  • Component Design & Hooks: Detect components doing too much, prop drilling, and suggest modularization.
  • Performance & Accessibility: Flag unnecessary re-renders, memory concerns, and ARIA gaps.
  • State Management: Identify derived or duplicated local state that can be computed or lifted.
  • Report & Guidance: Provide severity-guided findings with concrete, actionable fixes for developers.

Quick Start

Run the skill against the current branch diff to generate a findings report.

Frequently Asked Questions about fxa-check-react

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

FAQPage Schema
How do I review React code changes for hooks misuse and performance issues?

Audit React code changes by analyzing branch diffs to detect hooks misuse, unnecessary re-renders, and memory concerns. The review surfaces component design flaws and performance bottlenecks with severity ratings and concrete fix recommendations.

How do I check accessibility gaps in modified TSX files?

Check accessibility in modified TSX files by scanning branch diffs for ARIA gaps and other access issues. The audit reports these findings alongside state management concerns, providing severity levels and actionable guidance for developers.

What is the best way to detect duplicated local state in React components?

Detect duplicated local state in React components by running a diff-based audit against the main branch. The review identifies derived or duplicated state that can be computed or lifted, flagging these state management concerns with severity and concrete recommendations.

Can I use this to find prop drilling and component design issues in my TypeScript diff?

Yes, you can find prop drilling and component design issues in your TypeScript diff. The audit detects components doing too much and suggests modularization, reporting these structural concerns with prioritized, actionable findings.

Does the React code audit work on the entire repository or just changed files?

The React code audit works exclusively on changed files, operating on diffs between the current branch and main. This targeted approach ensures structured assessment by analyzing only relevant files and delivering prioritized findings.

Why should I audit changed React code instead of reviewing the entire project?

Auditing changed React code focuses the review on the current branch diff, ensuring structured assessment of design, hooks, performance, accessibility, and state-management concerns. This targeted approach delivers prioritized, actionable findings without reviewing the entire project.