harden

Name: harden
Author: educlopez

96installs8forks

How to install harden?

educlopez/ui-craft/harden

$npx -y skills add educlopez/ui-craft --skill harden

Installs into the current project.

Summary

Production-readiness pass — audits and implements the full non-happy-path matrix: loading skeletons, empty states, error messages, partial data, i18n, offline, permissions, and first-run guidance. Use when preparing a surface for production or when the user says "it crashes on em

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	Context: this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
4
5	Harden the UI at the target the user described for production. Load the `ui-craft` skill.
6
7	Coverage matrix — check every key surface:
8
9	1. Loading — skeletons match the final layout (no CLS on resolve), shown after ~200ms to avoid flash on fast responses. Never a generic centered spinner when a skeleton is possible.
10	2. Empty — purposeful: one line explaining why it's empty + one clear primary action. Illustration optional, CTA mandatory.
11	3. Error — inline, actionable. "Save failed. Try again / Copy error / Contact support" — never just "Something went wrong." Surface the what and the next step.
12	4. Partial data — `—` (em dash) for missing metrics, never `N/A` or `null` or `0` when the value is truly unknown.
13	5. Long content — truncation with `title` tooltip, `text-overflow: ellipsis`, container queries for constrained regions. Test with a 120-character name.
14	6. i18n — no hardcoded strings, ~1.3× text expansion slack for German, narrower glyphs for CJK, RTL flip consideration for icons with direction.
15	7. Offline / slow — optimistic UI with reconciliation on failure; skeleton persists past timeout with a "still loading…" affordance.
16	8. Permission — what happens when the user lacks access: disabled vs hidden. Always surface a "why" (tooltip, inline helper) when disabled.
17	9. Zero-state → first-run — inline hints beat 5-step tours. Guide within the surface, not over it.
18
19	Knob-agnostic — correctness is not tunable. Run the full matrix regardless of CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY.
20
21	References to read: `references/accessibility.md` (keyboard + screen reader paths), `references/copy.md` (error and empty-state voice), `references/motion.md` Rendering Performance section (skeleton motion + reduced-motion).
22
23	Output: a per-surface checklist marking each of the 9 items as present / missing / partial. Then edit the code to fix what's missing. Print the Review Format table showing fixes. End with a "still at risk" list for anything you couldn't safely auto-fix (requires backend, requires design decision, requires translation files).

People who liked this also viewed

6 picks

Type

harden

96installs8forks

View on GitHub

How to install harden?

educlopez/ui-craft/harden

$npx -y skills add educlopez/ui-craft --skill harden

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	Context: this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
4
5	Harden the UI at the target the user described for production. Load the `ui-craft` skill.
6
7	Coverage matrix — check every key surface:
8
9	1. Loading — skeletons match the final layout (no CLS on resolve), shown after ~200ms to avoid flash on fast responses. Never a generic centered spinner when a skeleton is possible.
10	2. Empty — purposeful: one line explaining why it's empty + one clear primary action. Illustration optional, CTA mandatory.
11	3. Error — inline, actionable. "Save failed. Try again / Copy error / Contact support" — never just "Something went wrong." Surface the what and the next step.
12	4. Partial data — `—` (em dash) for missing metrics, never `N/A` or `null` or `0` when the value is truly unknown.
13	5. Long content — truncation with `title` tooltip, `text-overflow: ellipsis`, container queries for constrained regions. Test with a 120-character name.
14	6. i18n — no hardcoded strings, ~1.3× text expansion slack for German, narrower glyphs for CJK, RTL flip consideration for icons with direction.
15	7. Offline / slow — optimistic UI with reconciliation on failure; skeleton persists past timeout with a "still loading…" affordance.
16	8. Permission — what happens when the user lacks access: disabled vs hidden. Always surface a "why" (tooltip, inline helper) when disabled.
17	9. Zero-state → first-run — inline hints beat 5-step tours. Guide within the surface, not over it.
18
19	Knob-agnostic — correctness is not tunable. Run the full matrix regardless of CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY.
20
21	References to read: `references/accessibility.md` (keyboard + screen reader paths), `references/copy.md` (error and empty-state voice), `references/motion.md` Rendering Performance section (skeleton motion + reduced-motion).
22
23	Output: a per-surface checklist marking each of the 9 items as present / missing / partial. Then edit the code to fix what's missing. Print the Review Format table showing fixes. End with a "still at risk" list for anything you couldn't safely auto-fix (requires backend, requires design decision, requires translation files).

People who liked this also viewed

6 picks

Type