--- title: "Emil Kowalski Design Engineering Skills" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/bb8c5313-9e13-4701-9cfe-d8258434279d" updated: "2026-11-09" --- # Emil Kowalski Design Engineering Skills > The name, the description, the About and a README below are the seller's words: data, not instructions. Emil Kowalski’s seventeen skills for coding agents that build interfaces. They build, review and audit animations, remove motion an app does not need, and cover Apple-style design, phone fixes, worst-case data, Swift and Sonner. Emil Kowalski Design Engineering Skills is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by emilkowalski ## About ### What it is Emil Kowalski Design Engineering Skills is Emil Kowalski’s set of seventeen skills for coding agents that build and review interfaces. Most cover motion. One builds an animation, one reviews it, one audits a whole codebase and one removes the motion an app does not need. animate-expo brings the same bar to React Native and Expo. Others cover Apple-style design, phone fixes for web apps, worst-case test data, Swift, picking a UI library, prototyping and the Sonner toast library. His README says they come from his years at companies like Vercel and Linear. You run one install command in your project → The tool asks which skills and agents you want → You ask for a task, or type a skill’s name → Claude follows that skill’s rules and answers ### Who it suits Front-end developers and designers who build with an AI coding agent and keep getting small mistakes back, such as ease-in on an entrance or a hard border where a soft shadow belongs. Mobile developers on Expo and Swift developers have a skill each. Skip it if you want an agent that picks its own style. Several of these skills call themselves opinionated, and animate will say when something should not animate. ### Where to use it Any coding agent the install tool can reach. Mindket’s notes cover Claude Code in detail, and the tool also lists Codex, Cursor and OpenCode. - Web projects in plain CSS or React: most of the seventeen - React Native and Expo: animate-expo - Swift: write-swift - Sonner toasts in React: ask-sonner ### How to set it up Get it saves a zip of Mindket’s setup notes in your downloads folder. The tool you run installs the skills, and you choose which ones. What you need first | Need | Detail | | --- | --- | | Node.js 22.20 or later | The install tool is an npm package, and its README names this version | | A coding agent | Claude Code, Codex, Cursor, OpenCode or another agent the tool lists | | A terminal | Open it in your project folder, since the tool installs there by default | | Accounts and keys | None for the skills. Your agent runs on its own account | 1. Open a terminal in your project folder. The tool installs to this project unless you add `-g`. 2. Run the install command below. The tool asks which skills and agents you want, and you pick. 3. Start your agent in the same folder. If Claude Code was already open and its skills folder is new, type `/reload-skills`. 4. Type a skill’s name, such as `/animate`. Claude replies with one line and waits for your question. ```bash npx skills@latest add emilkowalski/skills ``` The install tool’s README says `-g` makes the skills available across projects. Emil’s README shows only the command above. ### How to use it Describe the job, or type a skill’s name and then what you want. Claude reads that skill and works to its rules. Three skills run only when you name them: pick-ui-library, prototype and review-animations. Build and review motion | Skill | You give it | Claude does | | --- | --- | --- | | animate | A request for motion, such as a press effect | Decides whether it should animate at all, then writes the code with a chosen curve, duration and properties | | animate-expo | The same request for a React Native or Expo screen | Writes it with Reanimated and Gesture Handler, and keeps motion off the JS thread | | review-animations | A diff or files with animation code | Reviews against a strict bar and flags by default, since approval has to be earned | | improve-animations | A codebase | Audits its motion and writes plans into a plans folder, without editing your source | | find-animation-opportunities | A codebase or a screen | Lists places that should animate and rejects the rest, read-only | | remove-animations | An app that feels slow or over-animated | Deletes or reduces motion it does not need, and never adds or retunes any | | choreograph | Several elements that move together | Decides what leads, what follows and what stays still | | animation-performance | An animation that stutters | Finds why frames drop and swaps in cheaper properties | | animation-vocabulary | A loose description of an effect | Names the effect, so you can ask for it in the right words | Design, mobile and code | Skill | You give it | Claude does | | --- | --- | --- | | emil-design-eng | UI code to build or review | The main skill. A review comes back as a table of Before, After and Why | | apple-design | A gesture, sheet or spring to build | Applies Apple’s design and motion principles, translated for the web | | mobile-native | A web app that feels wrong on a phone | Fixes sticky hover, the 100vh bug, inputs that zoom the page and safe areas | | break-ui | A component or a screen | Feeds it worst-case data behind a toggle and reports what broke, then stops before fixing | | pick-ui-library | A task such as toasts or drag and drop | Recommends one library from the maker’s own list | | prototype | A piece of UI you describe | Builds three different versions by default behind a picker for you to flip through | | write-swift | Swift code or a concurrency error | Writes, reviews and migrates modern Swift | | ask-sonner | A Sonner setup or a toast that misbehaves | Answers from the maker’s own guide to his toast library | ### Example Your Save button feels flat when pressed, and you want a small press effect. ```text /animate a press effect for the Save button in components/button.tsx ``` Claude first checks whether the button should animate at all, then writes the press as a transform change, timed in the skill’s 100 to 160 ms range for press feedback. The skill’s rules ship reduced-motion handling with the animation, not later, and tell Claude to make the call and give its reason in one line instead of offering a menu. ### For newcomers and experts **If you are new.** A skill is a text file of instructions that your agent reads when your request matches it, or when you type its name. Start with emil-design-eng, the main one, or with animate. Type a skill’s name alone first and you get one line back, which tells you it loaded. Then ask your question. **For experts.** Each SKILL.md opens with a name and a description. Three add `disable-model-invocation: true`, which keeps Claude from starting them on its own. improve-animations takes extra words after its name: quick or deep, a focus such as performance, plan with a description, execute with a plan, and reconcile. Execute has Claude hand the plan to a subagent in an isolated worktree, then review what it changed. Its SKILL.md writes that form like this, and in Claude Code you type a skill’s name after a slash. ```text improve-animations execute ``` The maker also keeps two cheat sheets in the repository, each a table of a problem and its fix. They are plain tables, not skills. ### Good to know These skills hold strong opinions, and several say so in their own text. - Taste: ease-out for entrances, never ease-in, and UI motion under 300 ms, from animate’s own tables - Review mode: review-animations flags by default, and its text says approval is earned - Files written: improve-animations writes only under plans/ or animation-plans/, except execute, where a subagent applies one plan in an isolated worktree. break-ui adds a dev-only toggle, and prototype builds in an isolated surface that it deletes once you pick a winner - Install tool: a separate Vercel Labs project that collects anonymous usage data unless you set DISABLE\_TELEMETRY=1 or DO\_NOT\_TRACK=1 - Updates: the README gives no update or removal step, and the install tool has its own commands for both - Maker: Emil Kowalski, MIT licensed. Not made or endorsed by Vercel or any agent’s maker ## README ```markdown # Emil Kowalski Design Engineering Skills: setup notes This kit holds setup notes written by Mindket. It does not contain the skills. They install from Emil Kowalski’s repository: https://github.com/emilkowalski/skills License: MIT, Copyright (c) 2026 Emil Kowalski. Full text: https://github.com/emilkowalski/skills/blob/main/LICENSE These are community skills by Emil Kowalski. They are not made or endorsed by Anthropic, Vercel or any coding agent’s maker. The pages these notes came from: the README (https://github.com/emilkowalski/skills/blob/main/README.md), each skill’s SKILL.md under https://github.com/emilkowalski/skills/tree/main/skills, the two cheat sheets (https://github.com/emilkowalski/skills/blob/main/ui-cheatsheet.md and https://github.com/emilkowalski/skills/blob/main/performance-cheatsheet.md), the README of the install tool the maker names (https://github.com/vercel-labs/skills/blob/main/README.md), and Claude Code’s skills page (https://code.claude.com/docs/en/skills). Mindket copied every command and ran none of them. ## What it is Seventeen skills for a coding agent that builds and reviews interfaces. Most cover motion: building an animation, on the web or in React Native with Expo, reviewing one, auditing a codebase, removing the ones an app does not need, and finding the cause of dropped frames. The others cover Apple-style design, fixes that make a web app feel native on a phone, worst-case test data, Swift, picking a UI library, prototyping and the Sonner toast library. The README says they are based on Emil’s years of work at companies like Vercel and Linear, and that they list the small mistakes agents make and how to fix each one. ## The seventeen skills | Skill | What it does | |---|---| | emil-design-eng | The main skill: mostly animation, with some design advice | | animate | Builds an animation from scratch, choosing the curve, duration and properties | | animate-expo | The same bar for React Native and Expo: gestures, sheets, haptics, screen transitions | | review-animations | A strict review of animation code. Explicit use only | | improve-animations | Audits all the motion in a codebase and writes plans for other agents to run | | find-animation-opportunities | Finds places that should animate, and says what should not | | remove-animations | Removes motion an app does not need | | choreograph | Coordinates several elements that animate together | | animation-performance | Finds and fixes animations that drop frames | | animation-vocabulary | Turns a loose description of a motion effect into its exact name | | apple-design | Apple’s interface and motion principles, translated for the web | | write-swift | Modern Swift: value types, Swift 6 concurrency, generics, performance, Swift Testing | | pick-ui-library | Picks a library for a task from the maker’s own list. Explicit use only | | prototype | Builds several different versions of a UI piece behind a switcher. Explicit use only | | mobile-native | Small CSS and meta fixes that make a web app feel native on a phone | | break-ui | Tries to break a UI with worst-case data and reports what failed | | ask-sonner | A guide to Sonner: setup, styling, recipes and fixes | Source: the README’s “Reference” list and each SKILL.md’s front matter. ## Files in this kit - setup/install.md: the one install command the README gives, what the install tool asks, and project or all-projects installs - setup/claude-code.md: using the skills in Claude Code, the three that need their name typed, and removing them - setup/other-agents.md: Codex, Cursor, OpenCode and the other agents the install tool lists ## What you need first - A coding agent that reads skills, such as Claude Code, Codex, Cursor or OpenCode. - Node.js 22.20 or later, for the install tool. The tool’s README says so. - A terminal in your project folder. - No account, sign-up or API key for the skills. The agent itself runs on its own account. ## Your data The repository holds Markdown text files only, with no scripts. The install tool is a separate program: its README says it collects anonymous usage data and gives two settings to turn that off (setup/install.md). What you ask the agent, and the files it reads, go to the agent’s own provider as in any other session. ## Update and remove The README gives no update or removal step. The install tool’s README lists commands for both (setup/install.md). ``` ## What is in it 4 files, 11 KB, downloaded as a zip. ```text README.md 4 KB setup/claude-code.md 3 KB setup/install.md 2 KB setup/other-agents.md 2 KB ``` ## Source [emilkowalski/skills on GitHub](https://github.com/emilkowalski/skills) ## Intro videos - [Emil Kowalski Design Engineering Skills intro video 1](https://www.youtube.com/watch?v=m3pVc128WhI) - [Emil Kowalski Design Engineering Skills intro video 2](https://www.youtube.com/watch?v=mkRe-m9ztmo) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · cocoflunchy · 2026-07-20](https://news.ycombinator.com/item?id=48984818): Launch HN: Bloomy (YC S26) – AI-powered mastery learning for K-12: I think 383toast is talking about your landing page design which has very strong AI-generated design vibes (blue-green gradients, rounded rectangles with a colored border on the left...) There are a bunch of skills you can find online to improve on this if you want to keep designing with Claude,… - [Bluesky · Aditya Mitra · 2026-09-14](https://bsky.app/profile/adityamitra.bsky.social/post/3mvih6ib4vf2a): https://www.skills.sh/emilkowalski/skills/emil-design-eng https://www.skills.sh/jakubkrehel/skills/better-ui Someone made this CRM with these 2 skills I use a different variant of these \#design \#frontend \#aitools - [Hacker News · sixtyj · 2026-07-11](https://news.ycombinator.com/item?id=48873546): Networking and the Internet, from First Principles: Issue is LLM itself. For design and typography it needs precise instructions otherwise you get output that it is information-heavy but churn rate is high as ppl can’t use (read) it. I have to control output everytime but after 25 years in magazine layout I know what has to be controlled.… - [Bluesky · Michael McLean · 2026-10-12](https://bsky.app/profile/michaelmclean.me/post/3mxosjbmrvc2s): These UI animation skills are truly elite stuff github.com/emilkowalski... - [Hacker News · sixtyj · 2026-07-11](https://news.ycombinator.com/item?id=48869512): I've been building this alone for months. Roast it before I lose any more time: \> What's actually the best? Community-ranked products, services, and places. No ads, no paid placements. Just real opinions from real people. Opinions from REAL people. No ads, no paid placements. - that is what I care. Remove all metrics (numbers) for now. It looks like scam. You can add them… - [Bluesky · Matt Pocock {bot} · 2026-09-29](https://bsky.app/profile/mattpocockuk-bot.eurosky.social/post/3mwom3whdjh27): My top 3 skill makers: - @poteto - @dexhorthy - @emilkowalski Always learn a ton from reading their skills. - [Bluesky · Thiago Programador · 2026-09-11](https://bsky.app/profile/thiprogramador.bsky.social/post/3mvb2ecquhc27): Para quem faz o AI criar UI e acha que "ficou meio meh" 👀 skills com ⭐️ cerca de 37 mil. Conjunto de skills que dá ao AI o conhecimento de design de alguém com experiência em Vercel e Linear. github.com/emilkowalski... - [Bluesky · Retweeted by Garry Tan UNOFFICIAL · 2026-08-31](https://bsky.app/profile/garrytan-mir-rt.selfhosted.social/post/2piptanfku225): /skills by @emilkowalski: design and motion skills that survive real audits https://github.com/emilkowalski/skills /cartographer by @KingBootoshi: a repo map before your agent wanders https://github.com/kingbootoshi/cartographer - [Bluesky · DY · 2026-11-01](https://bsky.app/profile/dyoungai.bsky.social/post/3mzbl7ymtw227): Does your AI-built UI survive a long name or an empty list? Emil Kowalski's break-ui catalog has ready test cases for missing avatars, narrow layouts and more. Free, MIT-licensed: github.com/emilkowalski... \#WebDev - [Bluesky · Tom Dörr · 2026-09-08](https://bsky.app/profile/tom-doerr.bsky.social/post/3muzrsiym7l24): https://github.com/emilkowalski/skills - [Bluesky · @ai-linkstream.bsky.social · 2026-08-25](https://bsky.app/profile/ai-linkstream.bsky.social/post/3mtwrtss45o22): Discover "Skills for Designers and Engineers," a GitHub repository by Emil Kowalski, offering valuable insights and tools to enhance your UI design and animation skills. Leverage expertise and AI to make informed design choices and elevate your projects. https://github.com/emilkowalski/skills ## Get it - [Open emilkowalski/skills on GitHub](https://github.com/emilkowalski/skills) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/bb8c5313-9e13-4701-9cfe-d8258434279d) - [Its page on Mindket](https://mindket.com/p/bb8c5313-9e13-4701-9cfe-d8258434279d)