デザイナーやエンジニアがより良いユーザーインターフェイスを構築できるようにします。

アニメーションに来るとき、または一般にデザインするかどうかを知ることは困難です。 これらのスキルは、適切な決定をより迅速に受けられるようにします。

VercelやLinearなどの企業で長年の経験を積んできた経験をもとにしています。

ドメイン認証の副作用はここにあります。 AIはそのような専門知識を置き換えない、それはあなたがそれから抜け出すことができるものを増幅し、他の人により良い方法を作る。

つまり、他の分野における専門知識のコード、設計、開発を学びます。 非常に価値があります。

アニメーションの専門知識をここに構築します。

アニメーションをチェック.dev

インストール

なぜ使うのか?

エージェントは素晴らしい味を持っていません

エージェントがアニメーションに適した素材を選ぶのではなく、何度も見てきました。 [ease-out] になるはずのアニメーションをエンジョイする[ease-in] 。 または、半透明の影ではなく、固体の境界を選択します。

これらすべての小さなものの化合物は、あなたのインターフェイスを驚くべきもの、またはちょうど…その素晴らしいではありません.

Skills For Design 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’ll build animation expertise here:

Check out animations.dev

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.

All these little 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 consinsts of mostly animation, but also some design advice.
• review-animations — Review your animations in a strict way, based on my rules.
• animation-vocabulary — Get better animations from an AI by telling it exactly what you want by using the right words.
• apple-design — Apple’s principles for interface design and fluid motion, distilled from their WWDC design talks and translated for the web.