harden.md

 1---
 2tagline: "Make interfaces production-ready. Edge cases, i18n, error states, overflow."
 3---
 4
 5## When to use it
 6
 7`/impeccable harden` is for the day your interface meets reality. Real user data is messy: names that are 60 characters long, product titles in German, prices in the billions, 500 errors, offline modes, right-to-left text. Designs that only work with perfect data are not production-ready.
 8
 9Reach for it before launch, before opening to a new market, or any time a bug report starts with "our user had a really long name and". For first-run flows, empty-state activation, and onboarding design, reach for `/impeccable onboard` instead.
10
11## How it works
12
13The skill works through four dimensions of real-world resilience:
14
151. **Text and data extremes**. Long text, short text, special characters, emoji, RTL, numbers in the billions, 1000-item lists.
162. **Error scenarios**. Network failures, API 4xx/5xx, validation errors, permission errors, rate limits, concurrent operations.
173. **Internationalization**. Long translations (German is often 30% longer than English), RTL languages, date and number formats, currency symbols, character sets.
184. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode.
19
20For each dimension it identifies the failure mode, then applies the concrete fix: overflow handling, informative error UI, i18n-safe layouts, pluralization, sensible fallbacks.
21
22## Try it
23
24Start with one page and one dimension:
25
26```
27/impeccable harden the user profile page for long names
28```
29
30Expected output:
31
32- `.user-name` now has `text-overflow: ellipsis` with a tooltip for the full value
33- `.bio` switched from fixed height to `max-height` with a "show more" disclosure
34- Added an empty state for users with no bio
35- Added a skeleton loader for the async avatar fetch
36- Tested at name lengths 1, 20, 60, 200 characters
37
38Run it per-page, not all at once. The first run is the biggest; subsequent runs find fewer issues as patterns solidify.
39
40## Pitfalls
41
42- **Waiting for a bug report.** Harden is preventative. If you find yourself fixing the same class of bug twice, run `/impeccable harden` across the feature.
43- **Treating error and empty states as an afterthought.** Most hardening work is error and empty state UI. Budget time for it, not just a `catch` block.
44- **Skipping i18n because "we are English-only for now".** i18n-safe layouts are still better layouts. Flexible containers, proper text wrapping, generous line-height. None of that hurts English.