React Component Quality Checker

What problem does it solve?

Building high-quality, maintainable, and accessible React components requires adherence to numerous best practices, from TypeScript typing to hook usage and accessibility. This skill automates the review process, ensuring your components are robust, performant, and user-friendly, saving you from common pitfalls and manual checks.

Core Features & Use Cases

• TypeScript Enforcement: Validates proper typing for props, state, and callbacks, eliminating any types.
• Hook Best Practices: Checks useEffect and useCallback dependencies to prevent stale closures and unnecessary re-renders.
• Accessibility (a11y) Compliance: Guides on semantic HTML, ARIA labels, keyboard navigation, and color contrast for inclusive UIs.
• Use Case: As you develop a new React component for your application's settings window, this skill automatically reviews your code for correct TypeScript interfaces, ensures useEffect has the right dependencies, and reminds you to add ARIA labels for accessibility, guaranteeing a high-quality user experience.

Quick Start

This skill is automatically invoked by Claude Code

when you are writing or reviewing React code.

No direct quick start command is needed.

Focus on your code, and the AI will provide guidance.