How does this skill improve React performance?

It provides best practices for reconciliation using stable keys and implementation patterns for list virtualization using libraries like react-window to handle large datasets efficiently.

Can this skill help debug crashing React apps?

The skill provides patterns for Error Boundaries which catch JavaScript errors in their child component tree, preventing the entire application from crashing and showing fallback UI instead.

Does it help with web accessibility (A11Y)?

Yes, it includes specific patterns for focus trapping, keyboard navigation, and ARIA roles for complex interactive elements like modals and tab systems.

What is the benefit of using Compound Components?

Compound components allow for a more expressive and flexible API, sharing implicit state between related components without requiring the consumer to manage complex prop passing.

React Component Patterns

Name: React Component Patterns
Author: chavangorakh1999

bychavangorakh1999

0•

Design Tools

Implements advanced React architecture patterns to build accessible, high-performance, and maintainable user interfaces.

This skill equips Claude with specialized knowledge for architecting React components using modern industry standards. It provides implementation patterns for complex structures like compound components and component composition to eliminate prop-drilling. It also focuses heavily on production-readiness, offering guidance on error boundaries for application stability, list virtualization for performance, and strict accessibility (A11Y) standards for inclusive design. Whether refactoring legacy code or building a design system from scratch, this skill ensures components are flexible, testable, and optimized.

Key Features

01Standardized component review checklist for structural and accessibility audits.

02Performance optimization techniques including list virtualization and stable key reconciliation.

030 GitHub stars

04Robust error handling patterns using class-based Error Boundaries.

05Accessibility-first implementations with focus management and ARIA standards.

06Advanced patterns like Compound Components and Composition to reduce prop-drilling.

Use Cases

01Refactoring monolithic components into flexible, composed UI structures.

02Optimizing large-scale data displays for better rendering performance and UX.

03Building accessible design system components like Modals, Tabs, and Search inputs.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chavangorakh1999/sde-skills react-components

For use in Claude.ai and ChatGPT

Key Features

01Standardized component review checklist for structural and accessibility audits.

02Performance optimization techniques including list virtualization and stable key reconciliation.

030 GitHub stars

04Robust error handling patterns using class-based Error Boundaries.

05Accessibility-first implementations with focus management and ARIA standards.

06Advanced patterns like Compound Components and Composition to reduce prop-drilling.

Use Cases

01Refactoring monolithic components into flexible, composed UI structures.

02Optimizing large-scale data displays for better rendering performance and UX.

03Building accessible design system components like Modals, Tabs, and Search inputs.