How does this skill help with loading states?

It provides a 'Golden Rule' for loading, ensuring spinners only appear when there is no data to display, preventing distracting UI flashes during re-fetches.

Can I use this for mobile development?

While focused on React, the core principles of optimistic updates and graceful degradation are highly applicable to React Native and mobile UI development.

Does it include error handling patterns?

Yes, it defines an error hierarchy ranging from inline field errors to full-page error screens, ensuring no error is ever swallowed silently.

Does it work with specific libraries?

The patterns are library-agnostic but integrate well with tools like Formik, GraphQL clients, and toast notification libraries.

What are the anti-patterns covered?

It warns against common mistakes like showing spinners when cached data exists, swallowing errors in try/catch blocks, and leaving buttons enabled during async submissions.

React UI Design Patterns

Name: React UI Design Patterns
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Implements professional React UI patterns for loading states, error handling, and data fetching to ensure a seamless user experience.

This skill provides a comprehensive set of best practices and implementation patterns for React applications, focusing on robust UI state management. It guides developers through handling asynchronous operations, managing conditional rendering for loading and error states, and implementing consistent button and form behaviors. By following these patterns, developers can eliminate UI flashes, prevent silent errors, and create more responsive, accessible interfaces that gracefully handle network failures and data-fetching edge cases.

Key Features

010 GitHub stars

02Robust form submission patterns and validation feedback

03Contextual empty state patterns for data collections

04Standardized error handling hierarchy for better user feedback

05Asynchronous button state management with loading indicators

06Optimized loading state management to prevent UI flickering

Use Cases

01Refactoring legacy components to improve UX and error resilience

02Building production-grade dashboard components with complex data fetching

03Standardizing UI behavior across a large React engineering team

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front react-ui-patterns

For use in Claude.ai and ChatGPT

Download Skill