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-iconsHover 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-uiChat 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-mechanicsWhat 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-conventionsTests 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-explorerA 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.