How does this skill prevent loading indicator flickering?

It implements a 'Golden Rule' pattern where loading indicators are only displayed when no cached or existing data is available, preventing flashes during background refetches.

Does this skill help with form submission safety?

Yes, it provides patterns for disabling triggers and showing loading indicators on buttons during async operations to prevent duplicate submissions and accidental user actions.

What is the recommended error handling hierarchy?

The skill suggests a four-tier approach: inline field errors for forms, toast notifications for recoverable errors, banners for page-level issues, and full-screen states for unrecoverable failures.

When should I use a skeleton screen versus a spinner?

Skeletons are recommended for known content shapes like lists or cards during initial load, while spinners are reserved for unknown shapes or action-driven events like modal operations.

React UI Design Patterns

Name: React UI Design Patterns
Author: lingxling

bylingxling

•

Design Tools

Implements production-grade React UI patterns for state management, data fetching, and professional error handling.

This skill provides Claude with a comprehensive framework for building resilient React interfaces that prioritize user experience. It enforces core principles like preventing stale UI flashes, surfacing errors effectively, and implementing optimistic updates. By using standardized decision trees for loading states, skeleton screens, and button behaviors, this skill ensures that frontend components handle asynchronous operations with the polish and robustness expected in modern web applications.

Key Features

01Hierarchical error handling patterns from inline validation to full-screen states

02Async button state management to prevent duplicate form submissions

03Standardized empty state requirements for all collection-based components

0446 GitHub stars

05Progressive disclosure and optimistic update implementation guides

06Smart loading logic to prevent UI flickering by checking data presence

Use Cases

01Building data-intensive dashboards with complex loading and refetching states

02Refactoring legacy components to follow modern UX and error-resiliency standards

03Designing robust forms with comprehensive validation and submission feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lingxling/awesome-skills-cn react-ui-patterns

For use in Claude.ai and ChatGPT

Key Features

01Hierarchical error handling patterns from inline validation to full-screen states

02Async button state management to prevent duplicate form submissions

03Standardized empty state requirements for all collection-based components

0446 GitHub stars

05Progressive disclosure and optimistic update implementation guides

06Smart loading logic to prevent UI flickering by checking data presence

Use Cases

01Building data-intensive dashboards with complex loading and refetching states

02Refactoring legacy components to follow modern UX and error-resiliency standards

03Designing robust forms with comprehensive validation and submission feedback

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lingxling/awesome-skills-cn react-ui-patterns

For use in Claude.ai and ChatGPT