Interface skills
Each product has the skills of Emil Kowalski and Jakub Krehel, in the hub and in the app. Each one is copied at a pinned commit. Each product also enables the plugin modern-web-guidance.
CLAUDE.md of the app makes them required, because an agent often skips a skill that is only listed.
| When an agent | It runs |
|---|---|
| Writes or changes HTML, CSS or client-side JavaScript | modern-web-guidance, first |
| Chooses a UI library | pick-ui-library |
| Builds or changes a page | better-layout and better-writing. Also better-typography or better-colors when type or colour changes. |
| Adds or changes an animation | emil-design-eng, then animate. Also choreograph when several elements move together. |
| Builds for a phone, or a PWA | mobile-native. Also apple-design for gestures, sheets and drag. |
| Hands back interface work | better-interface, interface-review, break-ui. Also review-animations when motion changed. |
Flow's rules win on how the code is arranged. These skills win on how the interface looks, reads and moves.
#Skills that you start
An agent cannot start some skills with the Skill tool. For pick-ui-library, interface-review and review-animations, the rule tells the agent to read the skill file and follow it.
These stay your commands.
| Command | It does |
|---|---|
/prototype | Builds different versions of a piece of UI behind a picker |
/variant | Builds variants of a component, so you can pick one |
/state-machine | Shows each state of a component on a temporary page |
/break | Stress tests a component under each scenario |
/explain-interface | Explains how a site or an effect was built |
#Native apps
animate-expo and write-swift are there for native apps. Agents use them only when a task is for one.
#Before a design exists
context/rules/ui.md says that a page follows the wireframe of its task. Until a design exists, a page has no colour or styling of its own beyond the starter kit. So the skills apply to structure, words and states first.