userinterface.wiki

152 rules for building better user interfaces, packaged as a skill for AI coding agents.

There's a set of psychological principles behind every interface that feels right.

Learn how to animate the width and height of containers using a custom useMeasure hook and Motion, making your UI respond smoothly to content changes.

Icons that transform through actual shape transformation, not crossfades.

I'm not a sound engineer, but I know what good sound sounds like.

Learn how to use the more advanced features of Motion's AnimatePresence component.

Sound is the forgotten sense in web design.

Strategies for choosing between easing curves and springs in interface motion design.

Modern CSS pseudo-elements go far beyond ::before and ::after.

A guide to the foundational principles of animation, from squash and stretch to timing and exaggeration, and how they can be applied to create more engaging and lifelike animations.