デザイナーやエンジニアがより良いユーザーインターフェースを作る手助けをするために。

アニメーションやデザイン全般において正しい選択をしたかどうかを知るのは難しいです。これらのスキルは、より早く正しい決断に至る助けを目的としています。

これらはVercelやLinearのような会社での長年の経験に基づいています。

ここでのすべてのスキルはドメイン専門性の副産物です。AIはそのような専門知識を置き換えるものではなく、得られるものを増幅し、他者に比べてはるかに優れてしまいます。

ですから、プログラミングやデザイン、他の分野での専門知識を身につけてください。それは非常に価値があります。

私のスキルはこちらで最新情報を受け取れます:

ニュースレターに登録

インストール

なぜ使うのか?

エージェントはセンスが良くない

エージェントがアニメーションの材料を選ばない例を何度も見てきました。エンターアニメーションのease-inがイーズしているのに、本来はease-outであるべきです(理由はこちらです)。あるいはUIの半透明シャドウではなく、単線の枠線を選んだりします。

こうした小さな要素が積み重なり、インターフェースを素晴らしいものにするか、あるいはただ…あまり良くないものにします。

Skills For Designers and Engineers

For designers and engineers to help them build better user interfaces.

Knowing whether you made a right choice when it comes to animations, or design in general, is hard. These skills aim to help you get to those right decisions faster.

They are based on my years of experience working at companies like Vercel and Linear.

All the skills here are a side-effect of domain-expertise. AI doesn’t replace such expertise, it amplifies what you can get out of it and makes you way better relative to others.

So learn to code, design, or develop expertise in any other field. It’s extremely valuable.

You can stay up to date with my skills here:

Sign Up To The Newsletter

Install

npx skills@latest add emilkowalski/skills

Why use it?

Agents don’t have great taste

I have seen plenty of times that agents don’t pick the right ingredients for an animation. An ease-in easing for an enter animation when it’s supposed to be ease-out (here’s why). Or they choose a solid border instead of a semi-transparent shadow for your UIs.

All these small things compound and make your interface either amazing, or just… not that great.

As explained in Agents with Taste, these skills list all the little mistakes agents can potentially make and explain how to fix them.

This is your shortcut to great interfaces. A shortcut to stand out in a sea of slop.

Reference

• emil-design-eng — The main skill that consists of mostly animation, but also some design advice.
• animate — Builds an animation from scratch while choosing the correct curve, duration, properties, and so on.
• animate-expo — The same bar, for React Native and Expo: gestures, sheets, haptics, screen transitions, and keeping motion off the JS thread.
• review-animations — Review your animations in a strict way, based on my rules.
• improve-animations — Audit all the animations in your codebase and get prioritized, self-contained plans that any agent can execute.
• find-animation-opportunities — Search your UI for places that would genuinely benefit from motion, while also telling you what not to animate.