Overview
A comprehensive skill for agents based on my years of design engineering experience. Meant to instantly improve the quality of your output, whether it’s design or code.
Note
This is what I wish I had when I was starting out as a design engineer.
It contains everything I’ve learned from working at companies like Vercel and Linear, and building open source libraries like Sonner and Vaul.
For animations.dev students only.
“Just got my hands on Emil’s skill file, it is gold. His course was already good, but this contains so much more information and things you normally need to think of.”
What’s inside
In addition to the animation skill that you get completely for free in Animations and AI lesson, this skill also contains separate files on:
┌───────────────────────┬─────────────────────────────────────────────────────────┐
│ Category │ Covers │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ UI Polish │ Typography, shadows, gradients, layout, dark mode │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Forms & Controls │ Inputs, buttons, form patterns, validation │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Touch & Accessibility │ Touch devices, keyboard nav, a11y, tap targets │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Component Design │ Compound components, composition, customizability │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Marketing │ Landing pages, blogs, docs, changelogs │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Performance │ Virtualization, preloading, optimization │
└───────────────────────┴─────────────────────────────────────────────────────────┘More categories coming soon.
Some of the things mentioned in these files won’t be new to you, but there are also bits that I’ve never shared before and are exclusive for this skill. Here are a few of them:
## Eased Gradients
Use eased gradients over linear gradients when using solid colors. Linear gradients have visible banding; eased gradients are smoother.
.gradient {
background: linear-gradient(to bottom, hsl(330, 100%, 45.1%) 0%, hsl(331, 89.25%, 47.36%) 8.1%, hsl(330.53, 79.69%, 48.96%) 15.5%, hsl(328.56, 70.89%, 49.96%) 22.5%, hsl(324.94, 63.52%, 50.4%) 29%, hsl(319.21, 54.99%, 50.3%) 35.3%, hsl(310.39, 46.14%, 49.68%) 41.2%, hsl(296.53, 39.12%, 49.7%) 47.1%, hsl(280.63, 42.91%, 53.43%) 52.9%, hsl(265.14, 47.59%, 56.84%) 58.8%, hsl(250.13, 52.52%, 59.88%) 64.7%, hsl(235.88, 59.2%, 60.91%) 71%, hsl(225.81, 68.23%, 57.85%) 77.5%, hsl(218.93, 74.97%, 54.21%) 84.5%, hsl(213.89, 79.63%, 49.97%) 91.9%, hsl(210, 100%, 45.1%) 100%);
}.gradient {
background: linear-gradient(to bottom, hsl(330, 100%, 45.1%) 0%, hsl(331, 89.25%, 47.36%) 8.1%, hsl(330.53, 79.69%, 48.96%) 15.5%, hsl(328.56, 70.89%, 49.96%) 22.5%, hsl(324.94, 63.52%, 50.4%) 29%, hsl(319.21, 54.99%, 50.3%) 35.3%, hsl(310.39, 46.14%, 49.68%) 41.2%, hsl(296.53, 39.12%, 49.7%) 47.1%, hsl(280.63, 42.91%, 53.43%) 52.9%, hsl(265.14, 47.59%, 56.84%) 58.8%, hsl(250.13, 52.52%, 59.88%) 64.7%, hsl(235.88, 59.2%, 60.91%) 71%, hsl(225.81, 68.23%, 57.85%) 77.5%, hsl(218.93, 74.97%, 54.21%) 84.5%, hsl(213.89, 79.63%, 49.97%) 91.9%, hsl(210, 100%, 45.1%) 100%);
}This skill is not finished. Just like I kept my word and the course has been receiving consistent updates since the initial release, this skill will also be updated based on new learnings, feedback, past experiences, and new developments in the AI world.
“The Emil Design Engineering skill is really impressive. I just used it to help me build an infinite scroll behavior on a table and it gave me some really nice recommendations . I even used it outside of its main goal to make my Obsidian custom theme better. It's really one of my favorite skills out there favorite skills out there”
You pay once, and get lifetime access to all updates. It’s an early access price for those that want to try it out and help me make it better. The price will only go up in the future.