Skills

Two agent skills, published from the same repo as the library, so an agent building a form gets the rules rather than guessing at them.

Why

Agents build inputs that look finished and feel broken. The field that jumps half a pixel when it takes focus, because the border went from 1px to 1.5px. The one-time-code field built as six separate inputs, so pasting the code does nothing and the SMS suggestion never appears. The error message that pushes the whole form down when it arrives. None of those show up in a screenshot, and all of them show up the first time somebody uses the form.

Every one of them came up while building Yöte, and every fix is in the source. The skills write those rules down, with their reasons, so an agent working in a codebase that is not this one gets them right the first time.

Install

Both skills install together.

npx skills@latest add Tsavsar/yote

The two skills

• design-input: designing a new field in the Yöte system, or extending one that ships. The decision sequence, the state matrix, the things that must never shift, and the list of what never ships.
• yote-ui: using the components in an app. Install, the Tailwind v4 layer order, the shared prop contract, and what each field adds on top of it.

design-input is the one that matters. It designs against token names rather than values, and reads your stylesheets before it quotes a single one, so a project that sets its own --yote-feature-base gets specs and code in that colour rather than in ours. The script that resolves them also flags the two ways a theme half-applies: dark overridden in one of the two dark blocks but not the other, and a scoped override that never reaches the focus ring.

Both live in skills/ in the repo, which is the one source of truth for what they say. The structure follows Emil Kowalski's animate skill.