1---
 2tagline: "Make interfaces production-ready. Edge cases, onboarding, i18n, error states, overflow."
 3---
 4
 5## When to use it
 6
 7`/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, empty lists, 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".
10
11## How it works
12
13The skill works through five 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, zero-data empty states.
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. **Onboarding and empty states**. First-run experiences, empty state design, progressive disclosure, feature discovery. Making the feature work for someone who has never seen it before.
195. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode.
20
21For each dimension it identifies the failure mode, then applies the concrete fix: overflow handling, proper empty states, informative error UI, i18n-safe layouts, pluralization, sensible fallbacks.
22
23## Try it
24
25Start with one page and one dimension:
26
27```
28/harden the user profile page for long names
29```
30
31Expected output:
32
33- `.user-name` now has `text-overflow: ellipsis` with a tooltip for the full value
34- `.bio` switched from fixed height to `max-height` with a "show more" disclosure
35- Added an empty state for users with no bio
36- Added a skeleton loader for the async avatar fetch
37- Tested at name lengths 1, 20, 60, 200 characters
38
39Run it per-page, not all at once. The first run is the biggest; subsequent runs find fewer issues as patterns solidify.
40
41## Pitfalls
42
43- **Waiting for a bug report.** Harden is preventative. If you find yourself fixing the same class of bug twice, run `/harden` across the feature.
44- **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.
45- **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.