What are Emil Kowalski skills? Installation, the 15 skills and which one you need

You install Emil Kowalski's skills (`npx skills@latest add emilkowalski/skills`), and your coding agent avoids the small mistakes it makes in animation and interface details (the wrong easing curve, a hard border instead of a semi-transparent shadow, and so on). It is a 15-skill collection that design engineer Emil Kowalski published on GitHub (emilkowalski/skills): alongside skills for building, reviewing and speeding up animations, there are skills for Apple design principles, a native feel on mobile and "breaking the interface with the worst data". Each skill is instruction text; there are no scripts. MIT licensed and free; the skill texts are in English.

What it does: Prevents the coding agent's animation and interface-detail mistakes
Type: Skill collection (15 skills)
Maker: Emil Kowalski (personal repository)
Contents: Instruction text only, no scripts
Manual only: 3 skills do not run on their own
Turkish: Skill texts are in English
Price: Free, MIT license

What do Emil Kowalski skills do? Contents

A skill is an instruction pack that teaches a coding agent how to work on a topic. According to the README, this collection was written to fill agents' lack of "taste": an agent may pick the wrong curve for an animation or put a heavy border on an interface instead of a semi-transparent shadow. The skills list these small mistakes and explain how to fix them. A skill does not run anything on its own; it raises the quality of the interface code the agent writes.

Get the agent to write good animationsWhat you get: Animation code written by the agent and a review reportNeeds a separate setup

Skill	What it does	How it is triggered
emil-design-eng	Main skill: mostly animation, some design advice	Automatically
animate	Builds an animation from scratch (curve, duration, which property)	Automatically
animate-expo	The same, for React Native and Expo (gestures, sheets, haptics)	Automatically
review-animations	Reviews animation code against strict rules	Only when called by name
improve-animations	Scans the whole codebase and drafts a prioritized plan; does not touch the source	Automatically
find-animation-opportunities	Finds places to add motion (and places not to); read-only	Automatically
animation-performance	Fixes animations that drop frames or stutter	Automatically
animation-vocabulary	Finds the right name for the effect you describe	Automatically
apple-design	Apple design principles and fluid motion, adapted for the web	Automatically
mobile-native	Makes a web app feel native on a phone (the 100vh bug, tap highlight, etc.)	Automatically
break-ui	Tries to break the interface with the worst data (long names, empty lists)	Automatically
pick-ui-library	Has the agent pick a reliable library for the task	Only when called by name
prototype	Shows several versions of the interface you describe with a switcher	Only when called by name
ask-sonner	Guide to the Sonner toast (notification) library	Automatically
write-swift	Writing modern Swift	Automatically

The "Automatically" column is based on whether the SKILL.md header carries a manual-invocation restriction (disable-model-invocation); when each skill actually triggers is not stated in the documentation.

Which one do you need?

What you want to do	Which skill
Have the agent write an open/close animation for a component	animate
Get a critique of an existing animation	review-animations
The animation stutters and drops frames	animation-performance
I don't know where motion could be added to my site	find-animation-opportunities
Review the animations across the whole app	improve-animations
"It looks like a website on my phone"	mobile-native
Does it break with long names or empty lists?	break-ui
I don't know the effect's name, let me describe it	animation-vocabulary
See a few different design attempts	prototype
I use the Sonner toast library	ask-sonner

If you don't write Swift, write-swift is of no use to you; the same goes for animate-expo if you don't use React Native/Expo, and ask-sonner if you don't use Sonner. Most of the collection is for web interfaces.

How do you install Emil Kowalski skills?

The installation in the README is a single line. The README doesn't say whether it installs all skills or one at a time; run the command and check the options on the skills CLI screen.

Command from the README› npx skills@latest add emilkowalski/skills

The command requires Node.js. npx skills may send anonymous usage data; DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns it off (skills CLI documentation).

Flag from the skills CLI documentation› npx skills add emilkowalski/skills --list

Install a single skill› npx skills add emilkowalski/skills --skill animate

These two lines come from the general skills CLI documentation.

The README offers no Claude Code plugin marketplace route; no plugin definition file appears in the repository (October 15, 2026). The skills@1.7.1 version pin on the atlas card is not in the README; the README says @latest.

How do you use Emil Kowalski skills?

You don't need to call most of the skills separately; the agent loads the right one based on the topic. If a skill is called without a question, it replies with a one-sentence "ready" message and waits for the problem. review-animations, pick-ui-library and prototype do not run on their own; call them by writing their name in your request.

Writing an animation"Using the animate skill, add an opening animation to my dropdown menu component. First decide whether the animation is needed at all."

Reviewing"Use review-animations to review the animations in my Modal.jsx file."

Open issues report gaps in how some skills point to one another and in their examples (see the issues section below). Test the animation the agent produces yourself, in a browser and on a phone.

Which agents does it work in?

This repository's README names no agents. The documentation of the installer itself, the skills CLI, gives Claude Code and Codex as example target agents. The table below reflects only what these two documents say.

Claude CodeYes	The skills CLI documentation lists claude-code as a target agent. This repository's README does not name it.
CodexYes	An example target agent in the skills CLI documentation.
Cursor, Antigravity and othersUnclear	Not stated in this repository; check the list of agents the skills CLI supports.
Claude.ai (web chat)Unclear	The official source doesn't say; it is built for coding agents.

Does it conflict with other design skills?

The official source gives no conflict warning, but when you install several design or animation skills, the agent chooses for itself whose style to follow. To keep your output consistent, avoid installing two collections that do the same job at the same time: for example, pick this collection for animation, or GSAP's own skills if you use GSAP.

The GSAP animation library's own skill collection

Anthropic's Frontend Design plugin: general interface design guidance

Using this collection alongside the others is a suggestion, not an official rule.

What do Emil Kowalski skills access? Security

Reads

Nothing on its own. A skill is only instruction text; the agent reads the project under its own permission rules.

Writes

The skill does not write; the agent writes the code. By their definitions, improve-animations and find-animation-opportunities do not touch the source and only produce plans/suggestions.

Deletes

The skill deletes nothing.

Data

The skill makes no network requests. Only the installer, npx skills, may send anonymous telemetry.

The repository contains only .md files; no scripts, hooks or MCP servers (file list, October 15, 2026). A GitHub Security Advisories search on October 15, 2026 came back empty: no registered advisories appear. Since the repository is not a package, it is outside OSV coverage. This does not mean "safe"; you can read the files before installing.

Are Emil Kowalski skills free?

Yes. The repository is MIT licensed; it can be used in commercial projects as long as the license text and copyright notice are kept. The README has no paid plan or license key; there is only a link to the author's newsletter.

This is not legal advice. The cost of the agent that runs the skill (Claude Code, Cursor, etc.) is separate and not covered here. No local-currency price is published.

Common issues and fixes

What happens	What to do
review-animations, pick-ui-library or prototype doesn't run on its own	By design: these three are only called manually. Write the skill's name in your request.
Reported by users animate and find-animation-opportunities point to skills that can't be called automatically; emil-design-eng's description lacks a trigger (issue #29, open)	No official fix. Call the skill you need by name.
Reported by users In the apple-design examples, the spring animation doesn't pick up the gesture's velocity, and the reduced-motion CSS reveals closed panels (issue #32, open)	Don't take the generated code as is; turn on the "reduce motion" setting and test it by hand.

Frequently asked questions

What are Emil Kowalski skills?

A 15-skill collection that design engineer Emil Kowalski published on GitHub. It teaches a coding agent to get animation and interface details right. The skills are instruction text and do not run code.

How do I install them in Claude Code?

The command in the README: npx skills@latest add emilkowalski/skills. This repository has no Claude Code-specific plugin marketplace route. The skills CLI documentation lists claude-code as a target agent.

Do I need to install all of them?

No. The README shows installing the whole collection with one command, but the skills CLI documentation also offers listing with --list and picking a single skill with --skill. The Swift, Expo and Sonner skills may not be needed for a web project.

Is it free, and can I use it in commercial projects?

The repository is MIT licensed and free; it allows commercial use as long as the copyright notice is kept. This is not legal advice.

Does it work in Turkish?

The skill texts are in English. Whether they work with Turkish prompts is not stated in the official source; try it yourself.

Does the skill send my code anywhere?

The skill makes no network requests. Only when installing with npx skills may anonymous usage data be sent; DO_NOT_TRACK=1 turns it off.

Related guides

Sources

Not clear in the official sources: Which agents it loads in (the README names no agents) · whether npx skills add installs all skills by default · quality with Turkish prompts · the outcome of using it alongside other design skills. Each is covered in the relevant section.