AI SummaryThe 'harden' booster helps developers make their interfaces production-ready by systematically addressing error handling, internationalization, text overflow, and edge cases. It's ideal for teams building robust web applications that need to handle real-world usage scenarios.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "harden" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/harden && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/harden/SKILL.md "https://raw.githubusercontent.com/pbakaus/impeccable/main/.claude/skills/harden/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.
Assess Hardening Needs
Identify weaknesses and edge cases: • Test with extreme inputs: • Very long text (names, descriptions, titles) • Very short text (empty, single character) • Special characters (emoji, RTL text, accents) • Large numbers (millions, billions) • Many items (1000+ list items, 50+ options) • No data (empty states) • Test error scenarios: • Network failures (offline, slow, timeout) • API errors (400, 401, 403, 404, 500) • Validation errors • Permission errors • Rate limiting • Concurrent operations • Test internationalization: • Long translations (German is often 30% longer than English) • RTL languages (Arabic, Hebrew) • Character sets (Chinese, Japanese, Korean, emoji) • Date/time formats • Number formats (1,000 vs 1.000) • Currency symbols CRITICAL: Designs that only work with perfect data aren't production-ready. Harden against reality.
Hardening Dimensions
Systematically improve resilience:
Text Overflow & Wrapping
Long text handling: `css / Single line with ellipsis / .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Multi-line with clamp / .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } / Allow wrapping / .wrap { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } ` Flex/Grid overflow: `css / Prevent flex items from overflowing / .flex-item { min-width: 0; / Allow shrinking below content size / overflow: hidden; } / Prevent grid items from overflowing / .grid-item { min-width: 0; min-height: 0; } ` Responsive text sizing: • Use clamp() for fluid typography • Set minimum readable sizes (14px on mobile) • Test text scaling (zoom to 200%) • Ensure containers expand with text
Internationalization (i18n)
Text expansion: • Add 30-40% space budget for translations • Use flexbox/grid that adapts to content • Test with longest language (usually German) • Avoid fixed widths on text containers `jsx // ❌ Bad: Assumes short English text <button className="w-24">Submit</button> // ✅ Good: Adapts to content <button className="px-4 py-2">Submit</button> ` RTL (Right-to-Left) support: `css / Use logical properties / margin-inline-start: 1rem; / Not margin-left / padding-inline: 1rem; / Not padding-left/right / border-inline-end: 1px solid; / Not border-right / / Or use dir attribute / [dir="rtl"] .arrow { transform: scaleX(-1); } ` Character set support: • Use UTF-8 encoding everywhere • Test with Chinese/Japanese/Korean (CJK) characters • Test with emoji (they can be 2-4 bytes) • Handle different scripts (Latin, Cyrillic, Arabic, etc.) Date/Time formatting: `javascript // ✅ Use Intl API for proper formatting new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.56); // $1,234.56 ` Pluralization: `javascript // ❌ Bad: Assumes English pluralization ${count} item${count !== 1 ? 's' : ''} // ✅ Good: Use proper i18n library t('items', { count }) // Handles complex plural rules `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster