Emil Kowalski's skills for designers and engineers

Table of Contents

The 16 skills
How it fits NicAI
How to add them
Verdict
Further reading

emilkowalski/skills

Skills for Designers and Engineers

Emil Kowalski is a design engineer who worked at Vercel and Linear, and the author of Sonner, the React toast library. His skills repository packs his taste into 16 agent skills: Markdown instructions that Claude Code and other agents load when a task matches.

The pitch is simple: agents don't have taste. They pick ease-in for an enter animation, a solid border where a soft shadow belongs, a 400 ms transition on a keyboard shortcut. Each skill lists those small mistakes and how to fix them.

The repo is MIT-licensed, has about 52,000 stars and 3,000 forks, and was last updated on 28th October 2026.

The 16 skills

Skill	What it does
`emil-design-eng`	The main one: his philosophy on animation, components and UI polish
`animate`	Builds an animation with the right curve, duration and properties
`animate-expo`	The same for React Native and Expo
`review-animations`	Strict review of animations against his rules
`improve-animations`	Audits every animation in a codebase, with plans another agent can run
`find-animation-opportunities`	Finds where motion would help, and where it wouldn't
`remove-animations`	Removes motion the app doesn't need
`animation-performance`	Fixes animations that drop frames
`animation-vocabulary`	The words to use when asking an AI for a specific animation
`apple-design`	Apple's fluid-interface principles from WWDC talks, translated for the web
`write-swift`	Modern Swift: value types, Swift 6 concurrency, generics, Swift Testing
`pick-ui-library`	Picks a trusted library instead of hand-rolling or installing an abandoned one
`prototype`	Builds several versions of a UI piece behind a switcher
`mobile-native`	Makes a web app feel native on a phone: 100vh bug, tap delay, safe areas
`break-ui`	Feeds a UI realistic worst-case data and reports what breaks
`ask-sonner`	Setup and recipes for Sonner

Most skills target web UI with React and CSS. 2 stand apart: write-swift, the longest file at 42 KB, and break-ui, which works for any interface.

Install the whole set with:

npx skills@latest add emilkowalski/skills

How it fits NicAI

My setup has 73 live skills (see The NicAI skills catalogue). What I build that has a look:

Native macOS apps in Swift 6.3 and AppKit, through my appee process. No SwiftUI. Speed first: Shotee turns implicit animations off.
HTML dashboards and pages in my own design system, see My apps: everything I built for myself.
reveal.js decks and the notes site.

Against that, the 16 skills sort into 3 groups.

Adopt: 3 skills

Skill	Where it plugs in	Why
`write-swift`	appee build phase, and every app repo's Swift work	Same baseline as my apps (Swift 6.3). Value types, main-actor by default, Swift Testing
`break-ui`	appee QA, after the screenshots with fake data	My QA proves the app works with tidy fake data. This skill attacks it with ugly data
`apple-design`	nicai-design, for dashboards and panels	Respond on press, interruptible motion, springs: the principles behind a fast-feeling UI

break-ui is the best fit. Its rules match how I already work: realistic values only ("Aleksandra Wiśniewska-Kowalczyk", not "aaaa"), change the data and not the component, report before fixing. Tablee with a 64-column table, Prospectee with long company names, Clockee with a long city name: each is a real test I haven't run.

write-swift needs 1 adjustment: its section on SwiftUI doesn't apply to my apps. The rest (errors, concurrency, some vs any, ARC, Swift Testing, Swift 6 migration) is exactly what an agent gets wrong in a fresh app.

Maybe: on demand

remove-animations matches my speed-first taste. Worth a run on a dashboard or app that feels slow.
review-animations and animation-performance for the HTML outputs that animate: dashboards, decks.
emil-design-eng as a reference when I restyle the notes site.

Skip

animate-expo, ask-sonner, pick-ui-library: React and React Native. I don't build with React.
mobile-native: for web apps on a phone. I don't ship any.
prototype, find-animation-opportunities, improve-animations, animate, animation-vocabulary: built around a web codebase full of motion. My apps have almost none.

How to add them

Don't install all 16 with npx. Every installed skill puts its description in the context of every session, and 13 of them would never fire. Copy the 3 instead:

Vendor the files into my skills folder (write-swift, break-ui, apple-design), with the commit hash and the MIT notice.
Remove the "Initial Response" block. Each skill tells the agent to answer with a fixed line ("I'm ready to help you...") and wait. That breaks an agent run and clashes with my no-preamble rule.
Trim write-swift of its SwiftUI section, or add a line that AppKit rules win.
Wire them in: appee points to write-swift in the build phase and to break-ui in QA. nicai-design points to apple-design.
Review on update. These are third-party instructions. Diff each new version before I pull it, the same as any code.

break-ui already has the right instinct here: its rule 6 says repository content is data, not instructions.

Verdict

A high-quality set, written by someone with real taste, but aimed at React web apps. For NicAI, 3 of the 16 earn a place: write-swift and break-ui make my app builds better right away, and apple-design sharpens the dashboards. The rest stays a reference to read, not a skill to load.