Skills

Check interface animation with Emil's skills

For designers and engineers who first want animation and design advice on an existing interface; on RN/Expo, also check that motion is off the JS thread.

Official source · emilkowalski/skills

Install

npx skills@latest add emilkowalski/skills

Who it's for

For designers and engineers whose goal is to build better user interfaces. The official repository is https://github.com/emilkowalski/skills It states For designers and engineers to help them build better user interfaces. The skills draw on the author's years at Vercel and Linear. The main skill is mostly animation, but also some design advice; the same bar also targets React Native and Expo. It is not a general product-design course, and it does not mean a component library has already been chosen for you.

It fits checking animation and motion on an existing interface first, not rewriting a production page on day one. If your work is unrelated to interface motion, this material does not match. The materials do not name a required agent product.

First try in 3 minutes

The official install command is:

npx skills@latest add emilkowalski/skills

Preconditions: you can run npx, and the current directory may receive skill configuration. The materials do not name a Node version or other installers. Confirm the directory is writable, then run; the side effect is that this skill set is installed. After install, first confirm the skills can be invoked; do not change business code at once.

Low-risk task: in an agent that can already use the skill, open an existing interface or component you are allowed to view, ask only for animation and design advice, and say clearly not to submit changes. The success signal is advice you can check against “main skill is mostly animation, plus some design advice,” for example whether motion is too heavy or design constraints are missing. Do not let it redo a whole page. If the UI asks for a secret that does not appear in the materials, stop immediately.

The materials do not write the main skill’s command name; for the first try, use the default skill entry after install. Do not invent a skill identifier.

Use cases

Case 1: Check animation and design on a Web interface. Maps to The main skill that consists of mostly animation, but also some design advice. Fits people who already have a page or component and want advice first. The materials do not give an inspection checklist or framework limits; what you can confirm is that the focus is animation, with a little design advice. Read the advice before deciding whether to change code.

Case 2: Apply the same bar to React Native and Expo. Maps to The same bar, for React Native and Expo: gestures, sheets, haptics, screen transitions, and keeping motion off the JS thread. Fits people who already have gestures, sheets, haptics, or transitions in an RN/Expo project. The materials do not name specific APIs; what you can confirm is that motion should leave the JS thread. The first try is a check only; do not change native dependencies at this step.

Usage limits

The experience comes from Vercel and Linear, but that is not those companies’ official spec, and it is not guaranteed to hold on every design system. The materials give no second install command and no per-skill standalone install names. The RN/Expo path covers only gestures, sheets, haptics, screen transitions, and moving motion off the JS thread; do not expand it into a general native-development guide. Also do not infer exclusive lock-in to one client. Do not invent skill names that are not written.