Does it support specific data-fetching libraries?

While the logic is library-agnostic, the skill provides patterns compatible with common libraries like Apollo Client, TanStack Query, and Formik.

How does this skill handle loading states?

It follows the 'Golden Rule' of only showing a loading indicator when there is no existing data to display, preventing UI flickering and showing content as soon as it is available.

Can I use this for mobile development?

Yes, the patterns for state management, error surfacing, and button behaviors are highly applicable to both React web and React Native applications.

What is the recommended way to surface errors?

The skill outlines a four-level hierarchy: inline errors for forms, toast notifications for recoverable errors, banners for page-level issues, and full screens for unrecoverable failures.

Why should I disable buttons during async operations?

Disabling buttons prevents duplicate submissions and race conditions while providing immediate visual feedback to the user that an action is in progress.

React UI Design Patterns

Name: React UI Design Patterns
Author: claudiodearaujo

byclaudiodearaujo

0•

デザインツール

Implements production-ready React UI patterns for loading states, error handling, and data fetching to improve user experience.

This skill provides a comprehensive set of standards for building robust React interfaces. It guides developers through the implementation of loading indicators, error boundaries, optimistic updates, and form states, ensuring that applications never show stale UI, always communicate failures clearly, and remain responsive during asynchronous operations. It is particularly useful for frontend developers looking to standardize state management and UX across complex web applications by following proven industry best practices for skeleton loaders, button states, and empty collection handling.

主な機能

01Contextual empty state patterns for lists and collections

02Comprehensive error handling hierarchy from inline validation to full-page states

03Detailed form submission and validation feedback patterns

040 GitHub stars

05Optimized loading state logic using the 'Golden Rule' to prevent UI flashing

06Standardized button state management for asynchronous operations

ユースケース

01Designing resilient data-fetching components with skeleton loaders

02Implementing consistent error surfacing strategies across a React application

03Standardizing button behaviors and feedback during API mutations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter react-ui-patterns

For use in Claude.ai and ChatGPT

Download Skill