skills README

The project's README from github.com/emilkowalski/skills. As one markdown file: README.md.

opengraph-image-pwu6ef

Skills For Designers and 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 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

skills (emilkowalski/skills)

Searching Database…

47K ·GitHub
这是什么?这是一套面向设计师和工程师的 AI 智能体技能,帮助 AI 编程助手在动画和界面设计上形成良好的判断力。内容来自作者在 Vercel 和 Linear 的实践经验。
这是单一工具,还是一组独立的技能?它是一组独立的技能文件(如 animate、review-animations、apple-design、ask-sonner),AI 编程助手会读取这些文件并应用到具体任务中,而不是一个整体的应用程序。
我该怎么安装这些技能?README 中有一个安装部分,但在提供的文本中没有写出具体命令。实际操作中,你需要把所需的技能文件夹(例如 'animate' 或 'write-swift')添加到 AI 编程助手的技能目录中。
仅使用这些技能就能保证效果更好吗?不能。它们是参考指南,需要 AI 编程助手真正读取并遵循(例如在进场动画中选用 ease-out 而不是 ease-in)。作者明确表示,AI 是放大专业能力,而不是取代专业能力。
这些技能是给谁用的?给那些使用 AI 编程助手、希望它在动画和界面细节上做出更好、更有品味决策的设计师和工程师。这些技能基于作者在 Vercel 和 Linear 使用过的模式。
review-animations 技能有什么用?它会以严格的标准审查你代码库中已有的动画,依据作者关于缓动、时长和属性的规则进行检查。
这也适用于 React Native 应用吗?适用。animate-expo 把同样的动画规则改编到了 React Native 和 Expo 上,涵盖手势、底部弹出面板、触觉反馈、页面切换,并确保动画不占用 JS 线程。
ask-sonner 是做什么用的?它是一个专门用于 Sonner(作者开发的 toast 通知库)的技能,涵盖设置、样式、用法示例以及常见问题的解决方法。
如果我只想快速提升动画效果,应该从哪里开始?emil-design-eng 被描述为主要的、覆盖面最广的技能。它主要涵盖动画,同时包含一些通用设计建议,因此是比较合适的起点。
Size
0.1 MB
Stars
47K
Updated
CommitOct 11
Age
7mo
Commits · 90 Days