harden
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.
Harden the UI at the target the user described for production. Load the ui-craft skill.
Coverage matrix — check every key surface:
- 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.
- Empty — purposeful: one line explaining why it's empty + one clear primary action. Illustration optional, CTA mandatory.
- Error — inline, actionable. "Save failed. Try again / Copy error / Contact support" — never just "Something went wrong." Surface the what and the next step.
- Partial data —
—(em dash) for missing metrics, neverN/Aornullor0when the value is truly unknown. - Long content — truncation with
titletooltip,text-overflow: ellipsis, container queries for constrained regions. Test with a 120-character name. - i18n — no hardcoded strings, ~1.3× text expansion slack for German, narrower glyphs for CJK, RTL flip consideration for icons with direction.
- Offline / slow — optimistic UI with reconciliation on failure; skeleton persists past timeout with a "still loading…" affordance.
- Permission — what happens when the user lacks access: disabled vs hidden. Always surface a "why" (tooltip, inline helper) when disabled.
- Zero-state → first-run — inline hints beat 5-step tours. Guide within the surface, not over it.
Knob-agnostic — correctness is not tunable. Run the full matrix regardless of CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY.
More from educlopez/ui-craft
ui-craft
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.
125audit
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
38adapt
Responsive pass — mobile, tablet, desktop, touch, safe areas. Invoke when the user asks for adapt on their UI, or mentions 'adapt' alongside design / UI / frontend work.
36typeset
Typography pass — fonts, scale, hierarchy, micro-typography. Invoke when the user asks for typeset on their UI, or mentions 'typeset' alongside design / UI / frontend work.
36critique
UX critique — hierarchy, clarity, anti-slop. No code changes unless asked. Invoke when the user asks for critique on their UI, or mentions 'critique' alongside design / UI / frontend work.
35clarify
UX copy pass — buttons, errors, empty states, form hints. Clarity over cleverness. Invoke when the user asks for clarify on their UI, or mentions 'clarify' alongside design / UI / frontend work.
34