harden

Harden UI interfaces against extreme inputs, errors, i18n expansion, and network failures.

3|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill harden-langgenius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: harden
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/harden
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill harden-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built and tested only with perfect data break in production when real users submit 100-character names, emoji, RTL text, trigger API errors, or lose network connectivity. This Skill provides a systematic checklist and code patterns to make UI resilient before release. ## Core Features & Use Cases - Edge-Case Assessment: Systematically test extreme text lengths, emoji/RTL/CJK characters, large datasets, empty states, and concurrent operations. - Hardening Patterns: Apply concrete CSS and JavaScript patterns for text overflow, RTL layout with logical properties, Intl-based date/number formatting, error recovery UI, and reduced-motion support. - Error & Network Resilience: Handle HTTP status codes (400/401/403/404/429/500), offline scenarios, race conditions, and double-submission with retry and rollback strategies. - Use Case: Before shipping a multilingual dashboard, run this Skill to verify German translations don't overflow buttons, Arabic renders right-to-left correctly, and a failed API call shows a retryable error instead of a blank screen. ## Quick Start Use the harden skill to review this interface for edge cases including long text, emoji, RTL languages, network failures, and empty states.

Frequently Asked Questions about harden

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my UI handle long text and translations?

Use CSS truncation with text-overflow ellipsis for single lines, line-clamp for multi-line, and word-wrap for wrapping. Avoid fixed widths on text containers, use padding-based sizing, and budget 30-40% extra space for languages like German.

How to add RTL language support to a web interface?

Replace directional CSS properties with logical properties like margin-inline-start and padding-inline instead of margin-left. Test with Arabic or Hebrew content and mirror directional icons using transforms under the dir="rtl" attribute.

What HTTP error codes should a UI handle explicitly?

Handle 400 with validation messages, 401 by redirecting to login, 403 with a permission explanation, 404 with a not-found state, 429 with a rate-limit notice, and 500 with a generic error plus retry option.

How do I prevent double form submission in JavaScript?

Disable the submit button while the request is in flight and use optimistic updates with rollback for race conditions. Debounce rapid inputs like search fields and throttle high-frequency handlers such as scroll events.

Does client-side validation alone make a form secure?

No, client-side validation only improves user experience and must be paired with server-side validation. Servers should validate and sanitize all inputs, enforce rate limiting, and protect against injection attacks since client checks can be bypassed.