What problem does it solve? Interfaces built for ideal demo data break in production when users enter long names, lose network connectivity, switch to RTL languages, or hit empty states. This Skill systematically identifies and fixes those weaknesses so UI components survive real-world usage. ## Core Features & Use Cases - Edge Case & Error Hardening: Handles text overflow, empty states, loading states, API errors (400/401/403/404/429/500), concurrent submissions, and offline scenarios with concrete CSS and React patterns. - Internationalization Resilience: Applies logical CSS properties for RTL support, Intl API formatting for dates and currencies, text-expansion budgets for translations, and proper pluralization. - Onboarding & Empty State Design: Designs first-run experiences, feature discovery patterns, and actionable empty states that guide new users to value. - Use Case: Before shipping a dashboard, run this Skill to test it with 100-character names, emoji inputs, German translations, throttled 3G connections, and 1000-item lists, then fix every overflow, missing error state, and broken layout found. ## Quick Start Harden the user profile page for production by fixing text overflow, adding error and empty states, and verifying RTL and long-translation support.
