emilkowalski/skillsGit

提升 UI 动效与交互设计质量

提供动效方案、UI 审美与交互设计决策。

使用前，准备这些

输入素材：照片、主题与视觉风格要求

在下方原始文档中确认支持的 AI 工具、模型和运行依赖。
打开原仓库，按作者的安装说明完成配置；模型 API 或外部服务可能需要单独开通。
用自己的素材试运行，再检查事实、版式与输出文件。

许可证：MIT

来源快照：2026-09-15。README ↗

MIT License

Copyright (c) 2026 Emil Kowalski

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

可以这样开始

使用这个 Skill 完成「提升 UI 动效与交互设计质量」：提供动效方案、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:

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.
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.
write-swift — Write modern Swift. Includes: value types, Swift 6 concurrency, generics, performance, and Swift Testing.
pick-ui-library — Have your agent pick the right library for the task based on libraries I use and trust, instead of letting AI hand-roll a toast component or install an abandoned package.
prototype — Build multiple different versions of a UI piece you describe and go through them using a switcher.
ask-sonner — Your guide to working with Sonner, my toast library. Contains setup, styling, recipes, and fixes for the most common issues.