react-ui-patterns

This skill provides a comprehensive framework for implementing React UI states, ensuring that developers maintain high standards for data-driven component design. It is designed for software engineers and frontend developers who need to manage complex async data flows, loading indicators, and error messaging without introducing common UI anti-patterns. By adopting these patterns, teams can prevent issues such as stale UI flashes, silent error failures, or unhandled empty states. This skill is particularly useful during the development of dashboards, forms, and data-intensive applications using GraphQL or REST APIs.

• Implements the golden rule for loading indicators: only display spinners or skeletons when there is no data to show, preventing unnecessary layout shifts.

• Defines a clear error handling hierarchy ranging from field-level validation errors and toast notifications to page-level error banners and full-screen fallbacks.

• Standardizes component behavior for empty states, ensuring every list or collection has a dedicated empty representation for better UX.

• Enforces strict button interaction guidelines, including disabling buttons and showing loading indicators during async operations like form submissions or mutation calls.

• Provides decision trees for choosing between skeletons and spinners based on content shape and context, such as initial page loads versus inline operations.

• Promotes progressive disclosure and graceful degradation techniques to keep interfaces responsive even when partial data is available.

• Use this skill when building or refactoring UI components that interact with async data sources or external APIs.

• Ensure all mutation logic includes an onError handler to avoid swallowing runtime exceptions.

• Integrate with automated testing strategies to verify that empty states and error boundaries are rendered correctly under different data conditions.

• Input expectations include component state requirements (loading, error, data) and standard UI component properties.

• Output ensures a predictable, resilient frontend architecture that follows professional design system standards and optimizes user perception during high-latency operations.