skills.rest
LinCie
LinCieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

harden

Harden interfaces against edge cases, errors, and internationalization issues.

Updated Mar 20, 2026
Search Tags:#accessibility#error handling#edge cases#i18n#text overflow#rtl support#frontend resilience
One-click install
npx skills add https://github.com/LinCie/bearuang --skill harden-lincie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: harden
Source: https://github.com/LinCie/bearuang/tree/main/.agents/skills/harden
Command: npx skills add https://github.com/LinCie/bearuang --skill harden-lincie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces built for ideal demo data break in production when users enter long text, lose network connectivity, use RTL languages, or trigger API errors. This Skill systematically identifies and fixes these resilience gaps before they reach real users. ## Core Features & Use Cases - Text Overflow & i18n Handling: Applies truncation, line-clamping, logical CSS properties, and Intl API formatting so layouts survive long German translations, RTL scripts, and CJK characters. - Error & Edge Case Management: Implements recovery patterns for network failures, HTTP error codes (400-500), empty states, loading states, and concurrent operations like double-submission prevention. - Accessibility & Performance Resilience: Covers keyboard navigation, reduced-motion preferences, debouncing, memory leak cleanup, and slow-connection strategies. - Use Case: Before launching a dashboard, run this Skill to test it with 100-character names, emoji inputs, throttled 3G connections, and forced API errors, then apply the recommended fixes. ## Quick Start Ask the AI to harden a specific component or page against edge cases, error states, and internationalization issues.

Frequently Asked Questions about harden

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

FAQPage Schema
How do I handle long text overflow in CSS layouts?▼

Use text-overflow: ellipsis with overflow: hidden for single-line truncation, or -webkit-line-clamp for multi-line clamping. Set min-width: 0 on flex and grid items so they can shrink below content size without breaking the layout.

How to make a web interface support RTL languages?▼

Use CSS logical properties like margin-inline-start and padding-inline instead of physical left/right properties. Test with Arabic or Hebrew content and mirror directional icons using transform: scaleX(-1) under the dir='rtl' attribute.

What HTTP error codes should a frontend handle?▼

Handle 400 with validation messages, 401 by redirecting to login, 403 with a permission error, 404 with a not-found state, 429 with a rate-limit message, and 500 with a generic error plus retry option. Each status needs a distinct user-facing response.

Why does my layout break with German translations?▼

German text is often 30% longer than English, so fixed-width containers overflow. Use flexible padding-based sizing instead of fixed widths, budget 30-40% extra space for translations, and test layouts with the longest target language.

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 concurrent operations. Combine this with debouncing on input handlers and aborting pending requests when components unmount.

Related Skills

Explore More Software Engineering Skills→
cchrisvcchrisv

frontend-design

Generate polished React and HTML/CSS frontend interfaces with strong design aesthetics.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
firstsun-devfirstsun-dev

internationalization-i18n

Manage internationalization and localization for web, mobile, and backend projects.

Official
Advanced
wpgauravwpgaurav
14

harden

Audits UI components and interaction flows for edge cases, errors, and multilingual challenges.

Community
Advanced