Skills

Open-source skills for design engineers. Instructions that teach a coding agent the interface details that decide whether something feels built or assembled.

npx skills@latest add jaeel29/skills

Once installed, an agent loads one on its own when your request matches it. You can also invoke one directly by name, like /animate-icons.

They are MIT licensed and live at github.com/jaeel29/skills.

animate-icons

Hover gestures for the small SVG glyphs in a nav, a button or a menu. Covers pivoting, stroke draw-on, timing and the reduced-motion guards.

Animate the part, not the whole glyph, and pivot where the object really turns. A key rotates on its bow, not on the icon’s centre.

build-streaming-ui

Chat and agent interfaces, and any surface where a result arrives over time. Covers follow-mode scrolling, deltas, stop and reconnects.

The reply lives on the server and the connection is one disposable window onto it. Backwards, a dropped connection throws away a reply you already paid for.

overlay-mechanics

What a modal, drawer or popover does to the page underneath it. Covers stacking, scroll locking and fitting a menu into the space it has.

An overlay mutates the whole page, so that state has to be shared and counted, never stored per component.

guard-conventions

Tests that read your source and fail when a convention is broken again. For defects that pass type-checking, linting and unit tests.

Some defects are silent by construction. Scanning the source is the only check that can actually fail on them.

build-state-explorer

A panel that puts your real screens into any state with no backend data. Empty, error, loading, thirty rows, a broken record.

Drive the real page, not a copy of the component. A copy drifts from the real thing, and the drift is invisible until production.