harden

Name: harden
Author: heyhank-app

30stars13forks

How to install harden?

heyhank-app/heyhank/harden

$npx -y skills add heyhank-app/heyhank --skill harden

Installs into the current project.

Summary

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.

Files · 1

View on GitHub

SKILL.md

1	Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
2
3	## Assess Hardening Needs
4
5	Identify weaknesses and edge cases:
6
7	1. Test with extreme inputs:
8	- Very long text (names, descriptions, titles)
9	- Very short text (empty, single character)
10	- Special characters (emoji, RTL text, accents)
11	- Large numbers (millions, billions)
12	- Many items (1000+ list items, 50+ options)
13	- No data (empty states)
14
15	2. Test error scenarios:
16	- Network failures (offline, slow, timeout)
17	- API errors (400, 401, 403, 404, 500)
18	- Validation errors
19	- Permission errors
20	- Rate limiting
21	- Concurrent operations
22
23	3. Test internationalization:
24	- Long translations (German is often 30% longer than English)
25	- RTL languages (Arabic, Hebrew)
26	- Character sets (Chinese, Japanese, Korean, emoji)
27	- Date/time formats
28	- Number formats (1,000 vs 1.000)
29	- Currency symbols
30
31	CRITICAL: Designs that only work with perfect data aren't production-ready. Harden against reality.
32
33	## Hardening Dimensions
34
35	Systematically improve resilience:
36
37	### Text Overflow & Wrapping
38
39	Long text handling:
40	```css
41	/* Single line with ellipsis */
42	.truncate {
43	overflow: hidden;
44	text-overflow: ellipsis;
45	white-space: nowrap;
46	}
47
48	/* Multi-line with clamp */
49	.line-clamp {
50	display: -webkit-box;
51	-webkit-line-clamp: 3;
52	-webkit-box-orient: vertical;
53	overflow: hidden;
54	}
55
56	/* Allow wrapping */
57	.wrap {
58	word-wrap: break-word;
59	overflow-wrap: break-word;
60	hyphens: auto;
61	}
62	```
63
64	Flex/Grid overflow:
65	```css
66	/* Prevent flex items from overflowing */
67	.flex-item {
68	min-width: 0; /* Allow shrinking below content size */
69	overflow: hidden;
70	}
71
72	/* Prevent grid items from overflowing */
73	.grid-item {
74	min-width: 0;
75	min-height: 0;
76	}
77	```
78
79	Responsive text sizing:
80	- Use `clamp()` for fluid typography
81	- Set minimum readable sizes (14px on mobile)
82	- Test text scaling (zoom to 200%)
83	- Ensure containers expand with text
84
85	### Internationalization (i18n)
86
87	Text expansion:
88	- Add 30-40% space budget for translations
89	- Use flexbox/grid that adapts to content
90	- Test with longest language (usually German)
91	- Avoid fixed widths on text containers
92
93	```jsx
94	// ❌ Bad: Assumes short English text
95	<button className="w-24">Submit</button>
96
97	// ✅ Good: Adapts to content
98	<button className="px-4 py-2">Submit</button>
99	```
100
101	RTL (Right-to-Left) support:
102	```css
103	/* Use logical properties */
104	margin-inline-start: 1rem; /* Not margin-left */
105	padding-inline: 1rem; /* Not padding-left/right */
106	border-inline-end: 1px solid; /* Not border-right */
107
108	/* Or use dir attribute */
109	[dir="rtl"] .arrow { transform: scaleX(-1); }
110	```
111
112	Character set support:
113	- Use UTF-8 encoding everywhere
114	- Test with Chinese/Japanese/Korean (CJK) characters
115	- Test with emoji (they can be 2-4 bytes)
116	- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
117
118	Date/Time formatting:
119	```javascript
120	// ✅ Use Intl API for proper formatting
121	new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
122	new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
123
124	new Intl.NumberFormat('en-US', {
125	style: 'currency',
126	currency: 'USD'
127	}).format(1234.56); // $1,234.56
128	```
129
130	Pluralization:
131	```javascript
132	// ❌ Bad: Assumes English pluralization
133	`${count} item${count !== 1 ? 's' : ''}`
134
135	// ✅ Good: Use proper i18n library
136	t('items', { count }) // Handles complex plural rules
137	```
138
139	### Error Handling
140
141	Network errors:
142	- Show clear error messages
143	- Provide retry button
144	- Explain what happened
145	- Offer offline mode (if applicable)
146	- Handle timeout scenarios
147
148	```jsx
149	// Error states with recovery
150	{error && (
151	<ErrorMessage>
152	<p>Failed to load data. {error.message}</p>
153	<button onClick={retry}>Try again</button>
154	</ErrorMessage>
155	)}
156	```
157
158	Form validation errors:
159	- Inline errors near fields
160	- Clear, specific messages
161	- Suggest corrections
162	- Don't block submission unnecessarily
163	- Preserve user input on error
164
165	API errors:
166	- Handle each status code appropriately
167	- 400: Show validation errors
168	- 401: Redirect to login
169	- 403: Show permission error
170	- 404: Show not found state
171	- 429: Show rate limit message
172	- 500: Show generic error, offer support
173
174	Graceful degradation:
175	- Core functionality works without JavaScript
176	- Images have alt text
177	- Progressive enhancement
178	- Fallbacks for unsupported features
179
180	### Edge Cases & Boundary Conditions
181
182	Empty states:
183	- No items in list
184	- No search results
185	- No notifications
186	- No data to display
187	- Provide clear next action
188
189	Loading states:
190	- Initial load
191	- Pagination load
192	- Refresh
193	- Show what's loading ("Loading y

People who liked this also viewed

6 picks

Type

entra-app-registrationGuides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API perSkillsJul 2026471k1.3k
azure-complianceRun Azure compliance and security audits with azqr plus Key Vault expiration checks. Covers best-practice assessment, resource review, policy/compliance validation, and security posture checks. WHEN: SkillsJul 2026470k1.3k
azure-rbacOfficial agent plugin providing skills and MCP server configurations for Azure scenarios.SkillsJul 2026466k1.3k
better-auth-best-practicesAgent skill from better-auth/skillsSkillsJul 202678k203
firebase-security-rules-auditorA skill to evaluate how secure Firestore security rules are. Use this when Firestore security rules are updated to ensure that the generated rules are extremely secure and robust.SkillsJul 202676k386
audit-websiteAudit a website with the squirrelscan CLI and fix the findings in code. Runs SEO, performance, security, technical, content, accessibility, and 15 other rule categories (260+ rules), returns an LLM-opSkillsJul 202665k85

harden

30stars13forks

View on GitHub

How to install harden?

heyhank-app/heyhank/harden

$npx -y skills add heyhank-app/heyhank --skill harden

Installs into the current project.

Summary

Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready.

Files · 1

View on GitHub

SKILL.md

1	Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs.
2
3	## Assess Hardening Needs
4
5	Identify weaknesses and edge cases:
6
7	1. Test with extreme inputs:
8	- Very long text (names, descriptions, titles)
9	- Very short text (empty, single character)
10	- Special characters (emoji, RTL text, accents)
11	- Large numbers (millions, billions)
12	- Many items (1000+ list items, 50+ options)
13	- No data (empty states)
14
15	2. Test error scenarios:
16	- Network failures (offline, slow, timeout)
17	- API errors (400, 401, 403, 404, 500)
18	- Validation errors
19	- Permission errors
20	- Rate limiting
21	- Concurrent operations
22
23	3. Test internationalization:
24	- Long translations (German is often 30% longer than English)
25	- RTL languages (Arabic, Hebrew)
26	- Character sets (Chinese, Japanese, Korean, emoji)
27	- Date/time formats
28	- Number formats (1,000 vs 1.000)
29	- Currency symbols
30
31	CRITICAL: Designs that only work with perfect data aren't production-ready. Harden against reality.
32
33	## Hardening Dimensions
34
35	Systematically improve resilience:
36
37	### Text Overflow & Wrapping
38
39	Long text handling:
40	```css
41	/* Single line with ellipsis */
42	.truncate {
43	overflow: hidden;
44	text-overflow: ellipsis;
45	white-space: nowrap;
46	}
47
48	/* Multi-line with clamp */
49	.line-clamp {
50	display: -webkit-box;
51	-webkit-line-clamp: 3;
52	-webkit-box-orient: vertical;
53	overflow: hidden;
54	}
55
56	/* Allow wrapping */
57	.wrap {
58	word-wrap: break-word;
59	overflow-wrap: break-word;
60	hyphens: auto;
61	}
62	```
63
64	Flex/Grid overflow:
65	```css
66	/* Prevent flex items from overflowing */
67	.flex-item {
68	min-width: 0; /* Allow shrinking below content size */
69	overflow: hidden;
70	}
71
72	/* Prevent grid items from overflowing */
73	.grid-item {
74	min-width: 0;
75	min-height: 0;
76	}
77	```
78
79	Responsive text sizing:
80	- Use `clamp()` for fluid typography
81	- Set minimum readable sizes (14px on mobile)
82	- Test text scaling (zoom to 200%)
83	- Ensure containers expand with text
84
85	### Internationalization (i18n)
86
87	Text expansion:
88	- Add 30-40% space budget for translations
89	- Use flexbox/grid that adapts to content
90	- Test with longest language (usually German)
91	- Avoid fixed widths on text containers
92
93	```jsx
94	// ❌ Bad: Assumes short English text
95	<button className="w-24">Submit</button>
96
97	// ✅ Good: Adapts to content
98	<button className="px-4 py-2">Submit</button>
99	```
100
101	RTL (Right-to-Left) support:
102	```css
103	/* Use logical properties */
104	margin-inline-start: 1rem; /* Not margin-left */
105	padding-inline: 1rem; /* Not padding-left/right */
106	border-inline-end: 1px solid; /* Not border-right */
107
108	/* Or use dir attribute */
109	[dir="rtl"] .arrow { transform: scaleX(-1); }
110	```
111
112	Character set support:
113	- Use UTF-8 encoding everywhere
114	- Test with Chinese/Japanese/Korean (CJK) characters
115	- Test with emoji (they can be 2-4 bytes)
116	- Handle different scripts (Latin, Cyrillic, Arabic, etc.)
117
118	Date/Time formatting:
119	```javascript
120	// ✅ Use Intl API for proper formatting
121	new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024
122	new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024
123
124	new Intl.NumberFormat('en-US', {
125	style: 'currency',
126	currency: 'USD'
127	}).format(1234.56); // $1,234.56
128	```
129
130	Pluralization:
131	```javascript
132	// ❌ Bad: Assumes English pluralization
133	`${count} item${count !== 1 ? 's' : ''}`
134
135	// ✅ Good: Use proper i18n library
136	t('items', { count }) // Handles complex plural rules
137	```
138
139	### Error Handling
140
141	Network errors:
142	- Show clear error messages
143	- Provide retry button
144	- Explain what happened
145	- Offer offline mode (if applicable)
146	- Handle timeout scenarios
147
148	```jsx
149	// Error states with recovery
150	{error && (
151	<ErrorMessage>
152	<p>Failed to load data. {error.message}</p>
153	<button onClick={retry}>Try again</button>
154	</ErrorMessage>
155	)}
156	```
157
158	Form validation errors:
159	- Inline errors near fields
160	- Clear, specific messages
161	- Suggest corrections
162	- Don't block submission unnecessarily
163	- Preserve user input on error
164
165	API errors:
166	- Handle each status code appropriately
167	- 400: Show validation errors
168	- 401: Redirect to login
169	- 403: Show permission error
170	- 404: Show not found state
171	- 429: Show rate limit message
172	- 500: Show generic error, offer support
173
174	Graceful degradation:
175	- Core functionality works without JavaScript
176	- Images have alt text
177	- Progressive enhancement
178	- Fallbacks for unsupported features
179
180	### Edge Cases & Boundary Conditions
181
182	Empty states:
183	- No items in list
184	- No search results
185	- No notifications
186	- No data to display
187	- Provide clear next action
188
189	Loading states:
190	- Initial load
191	- Pagination load
192	- Refresh
193	- Show what's loading ("Loading y

People who liked this also viewed

6 picks

Type