@emilkowalski: New skill: /apple-design Apple’s WWDC videos are a goldmine of knowledge. I’ve combed through my favorite ones and came…

X AI KOLs Timeline Tools

Summary

A curated set of 17 design and motion principles distilled from Apple's WWDC videos, packaged as a reusable skill for design engineers to review and improve UI animations and interfaces.

New skill: /apple-design Apple’s WWDC videos are a goldmine of knowledge. I’ve combed through my favorite ones and came up with 17 design and motion principles. Use them to review existing work or when working on something new to get it right. https://t.co/jCwhthpi20
Original Article
View Cached Full Text

Cached at: 07/09/26, 11:52 PM

New skill: /apple-design

Apple’s WWDC videos are a goldmine of knowledge. I’ve combed through my favorite ones and came up with 17 design and motion principles.

Use them to review existing work or when working on something new to get it right.

https://t.co/jCwhthpi20


emilkowalski/skills

Source: https://github.com/emilkowalski/skills

opengraph-image-pwu6ef

Skills For Design Engineers

skills.sh

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.

Similar Articles

@vista8: Found a frontend development Skill: for example, often not knowing technical terms makes it hard to write professional animations and interactions. You can use this Skill as a dictionary, e.g., ask animation-vocabulary "What is the name of the animation where list items pop up one by one?" Use emil-design-eng to polish the modal/button/page animation. Use review-animations to review animation issues.

X AI KOLs Timeline

Recommend several frontend animation-related Skill tools to help developers look up professional animation terms, refine interaction animations, and review animation issues.

@KyrieCheungYep: Let me introduce this Skill. It's a Skill I developed while presenting projects to some clients, and it has been validated through my own multiple practice attempts. This is a Codex & Claude Skill specifically designed to convert visible UI reference images into high-quality HTML/CSS. It will translate the design…

X AI KOLs Timeline

KyrieCheungYep released a Codex/Claude Skill called ky-design-to-html, used to convert UI screenshots or design drafts into high-quality HTML/CSS. It reduces visual discrepancies through a workflow of deconstructing design structure, separating code from assets, canvas adaptation, and browser screenshot verification.