Emil Kowalski's skills

Thirteen skills for animation, interface polish and mobile feel that come with Site Haus, and when to use each.

These skills come with Site Haus. They were written by Emil Kowalski, a design engineer who has worked at Vercel and Linear, and are shared under the MIT licence from github.com/emilkowalski/skills. They capture the small choices that make an interface feel right, such as which easing an entrance should use, and the mistakes an AI tends to make. Site Haus includes the 13 that apply to websites and web apps. The two for native Swift and React Native apps are not included, because Site Haus builds websites.

On the Free plan you can choose 2 of them; on Pro and Power all are on. See Use skills when you build to learn how to call them.

Building#

/animate builds an animation from scratch. It decides whether to animate at all, then the curve, duration and what to move, and writes the code. Use it for "make this open smoothly".
/emil-design-eng is the main skill: his thinking on UI polish, component design and the invisible details of animation. Use it to make a screen feel more finished.
/mobile-native makes a web app feel installed on a phone: sticky hover states, tap flashes, the 100vh bug, inputs that zoom the page, laggy taps and safe areas.
/apple-design brings Apple's ideas on fluid, physical motion and depth to the web: springs, gestures, sheets, translucent materials and typography.
/prototype builds several different versions of a piece of UI behind a switcher, so you can flip through them and keep the one you like. Only when asked.
/pick-ui-library helps choose a trusted library for a job, such as charts, command menus or drag and drop, instead of building it by hand or picking an abandoned package. Only when asked.
/ask-sonner is a guide to the Sonner toast library: setup, styling and fixing common problems.

Checking and fixing#

/review-animations reviews your animations strictly against his rules. Only when asked.
/improve-animations surveys the animation across your project and gives a prioritised list of fixes, with a plan for each. It advises and does not change your files.
/find-animation-opportunities looks for places that should animate and, just as importantly, rejects the ones that should not. It proposes and does not change files.
/animation-performance finds why an animation drops frames and fixes it.
/break-ui tries to break your UI with worst-case data, such as very long names, empty lists, huge numbers and emoji, shows it behind a "Worst case" switch, and reports what broke.

Finding the right words#

/animation-vocabulary turns a vague description into the exact term, so you can ask for it properly. "The bouncy thing when a popover opens" becomes "pop in". Use it when you do not know what an effect is called.

Credit#

These skills are by Emil Kowalski, MIT licence. Site Haus keeps his licence with them, and you can read it in the licence file next to the skills in the project's source. The newsletter and his writing are at aiforui.dev.