Building React components with proper loading states, error handling, and user feedback is challenging and often results in confusing UX. This skill provides battle-tested UI patterns for handling async operations, showing appropriate feedback, and creating smooth user experiences.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-ui-patterns」を使用しています。 How do I show loading states without flashing when refetching data?
期待される結果:
Use the pattern: only show loading indicator when loading AND no data exists. This prevents the flash when cached data is available. Example: if (loading && !data) return <Skeleton />;
「react-ui-patterns」を使用しています。 What is the proper way to handle errors in React?
期待される結果:
Always surface errors to users with clear messaging. Use a hierarchy: inline errors for forms, toasts for recoverable errors, banners for page-level issues, and full error screens for unrecoverable failures.
「react-ui-patterns」を使用しています。 How should I handle button states during form submission?
期待される結果:
Disable the button during submission AND show a loading indicator. This prevents duplicate submissions and gives users feedback that their action is in progress.
セキュリティ監査
安全Static analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
品質スコア
作れるもの
Building data-driven React components
When creating components that fetch data from APIs, apply proper loading, error, and empty states following established patterns.
Handling form submissions
When implementing forms with async submissions, ensure buttons are disabled during submission and show appropriate loading feedback.
Improving user experience
When refactoring existing React code to eliminate confusing loading flashes and hidden errors.
これらのプロンプトを試す
Show me how to implement a loading state for a React component that fetches data. I want to avoid showing a spinner when cached data already exists.
Create an error state component for React that shows the error message and includes a retry button. How should I integrate this with Apollo or React Query?
Write a form submission pattern in React that disables the submit button during the mutation, shows a loading spinner, and displays success or error toasts.
Build a complete React component that handles all UI states: loading (with skeleton), error (with retry), empty (with call to action), and success (with data display).
ベストプラクティス
- Never show stale UI - loading spinners should only appear when there's no data to display
- Always surface errors to users - never swallow errors silently without feedback
- Disable buttons during async operations to prevent duplicate submissions
回避
- Showing loading spinner whenever loading is true, regardless of whether cached data exists
- Catching errors and only logging to console without showing user feedback
- Allowing users to click submit multiple times during form submission