Guide · Open source
How to use emilkowalski/skills: install and run AI coding agent skills
Updated · written with AI from the project's own documentation and checked against our catalogue data
emilkowalski/skills is a set of markdown instruction files, called skills, that you load into an AI coding agent so it makes fewer small design mistakes, mainly around animation. It is meant for frontend developers, designers and teams building React Native or Expo apps who already use an AI coding agent. After this guide you will know how to install the skills, which ones to reach for and how to use them in practice.
Skillsemilkowalski/skills · ★ 52.9k · MIT Install options & downloads Quick start
- 1Install Node.js. Make sure Node.js is available on your machine, since the install command uses npx. The README does not state a minimum version.
- 2Add the skills. Run npx skills@latest add emilkowalski/skills in your terminal to install the skills into your agent.
- 3Pick a starting skill. Use emil-design-eng for general animation guidance, or choose a specific skill such as animate or review-animations for a clear task.
- 4Ask the agent for the task. Describe the work in your prompt, for example building an animation or reviewing an existing component, and let the agent apply the matching skill.
- 5Check the output. Read the agent's changes against the skill's advice, such as the easing choice and the shadow versus border decision, before you accept them.
What the skills are and who they are for
The repo contains only guidance documents. Each skill is a SKILL.md file that lists common mistakes agents make and how to fix them. The author gives an example: agents often pick ease-in for an enter animation when ease-out is the better choice, or they choose a solid border where a semi-transparent shadow would look better.
The skills are written for people who already have some UI code knowledge, since the advice assumes familiarity with animation terms. If you do not use an AI coding agent, these files are not useful on their own, because they are meant to be loaded into one. The repo does not contain a runnable app or library.
- Frontend developers using AI coding agents to build web interfaces
- Designers who want agents to follow stronger motion and UI guidelines
- Teams building React Native or Expo apps who want motion guidance
- Developers who want an agent to audit or review existing animations
Install the skills into your agent
The install method is a package manager command run through npx, so you need Node.js installed. The README does not state a required Node.js version. Run the command below from your terminal to add the skills to your agent.
- Make sure Node.js is installed, since the command uses npx
- Run the install command shown below
- Check your agent's documentation for where it loads the added skills
npx skills@latest add emilkowalski/skillsChoose the right skill for your task
The repo has several skills, and each one fits a different job. The main skill, emil-design-eng, covers mostly animation with some general design advice. Start there if you are unsure, then move to a more specific skill when you have a clear goal.
Skills that create or change code include animate, which builds an animation from scratch by choosing a curve, duration and properties, and prototype, which builds several versions of a UI piece to compare. Skills that check existing work include review-animations, which reviews animations in a strict way, and improve-animations, which audits all animations in your codebase and produces prioritized plans.
- emil-design-eng: the main animation and design skill
- animate: build an animation from scratch
- animation-performance: fix animations that drop frames
- review-animations: strict review of your animations
- improve-animations: audit the codebase and get prioritized plans
- find-animation-opportunities: find where motion would help, and what not to animate
- remove-animations: remove motion your app does not need
- animation-vocabulary: describe the animation you want using the right words
- mobile-native: make a web app feel more native on a phone
- break-ui: test the UI with worst-case data
- pick-ui-library: have the agent choose a library instead of hand-rolling components
- ask-sonner: help with the Sonner toast library
Use mobile and React Native skills
For React Native and Expo projects, animate-expo applies the same bar to gestures, sheets, haptics, screen transitions and keeping motion off the JS thread. The write-swift skill covers modern Swift, including value types, Swift 6 concurrency, generics, performance and Swift Testing.
The mobile-native skill is for web apps that should feel like phone apps. It covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps and safe areas.
- animate-expo: gestures, sheets, haptics, screen transitions
- write-swift: Swift language and concurrency guidance
- mobile-native: web app behaviour on phones
Review and audit existing animations
If you already have animations, the review and audit skills are the most direct route. Ask the agent to run review-animations on a component to check it against the author's rules. Use improve-animations when you want the agent to scan the whole codebase and return prioritized plans that any agent can carry out.
Use remove-animations when your interface has too much motion, such as animations on keyboard shortcuts, fade-ins on every section or a delay on every tooltip in a group.
- Review one component with review-animations
- Audit the whole project with improve-animations
- Cut excess motion with remove-animations
Test the UI with worst-case data
The break-ui skill tries to break the UI you built using worst-case data: long names, unusual emails, one-letter names, huge counts, empty lists and long labels. Run it after a feature is built to find layout problems that normal test data hides.
- Long names and one-letter names
- Unusual email addresses
- Huge counts and empty lists
- Long labels
What people use it for
- Build an enter animation with the right easing and duration using the animate skill
- Audit a React Native app's gestures and screen transitions with animate-expo
- Find places in a web UI that would benefit from motion, and places that do not need it, with find-animation-opportunities
- Stress-test a form or table with long names and empty lists using break-ui
- Have an agent choose a toast or other UI library with pick-ui-library instead of writing one from scratch
Frequently asked questions
Do I need an AI coding agent to use emilkowalski/skills?
Yes. The README says the files are meant to be loaded into an AI coding agent. Without one, the repo is only a set of guidance documents.
How do I install emilkowalski/skills?
Run npx skills@latest add emilkowalski/skills in your terminal. The command requires Node.js because it uses npx.
Is emilkowalski/skills free to use?
The repo is licensed under the MIT licence, as listed in the project details. Check the licence file in the repository for the full terms.
Is this a library or an app I can run?
No. The README states that this repo contains only guidance documents. It is not a runnable app or library.
Which skill should I start with?
The README describes emil-design-eng as the main skill, covering mostly animation with some design advice. Start there if you are not sure which skill fits your task.
Are there alternatives to these skills?
The project details list no comparable projects, so this guide does not name alternatives. The skills are specific to the author's animation and UI rules.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use these skills if you build web or React Native interfaces with an AI coding agent and want it to avoid common animation and UI mistakes. Skip them if you do not use an agent, want a runnable app or library, or are new to UI code, since the advice assumes familiarity with animation terms.
Install options & downloads