Tools

A small library of extremely crafted primitives for everything agents need to talk to humans beautifully. Loading and thinking states, streaming text, approval cards, tool chips and the rest of the surfaces an AI product meets a person through.

https://beautifului.dev

Composable, unstyled and accessible. Filtering, grouping, nested pages and keyboard navigation handled for you.

npm i cmdk

Spring physics, fluid hover, keyboard navigation. Installs into an existing shadcn/ui setup and adopts your theme tokens automatically.

npx shadcn@latest registry add @fluid

Morph, move, bend and melt effects with tunable goo blur, contrast, waviness, bounce and stagger. Part of Libraries.dev, packaged so an agent can consume it.

npm i liquid-gooey

The correct answer to animating a counter, a price or a metric, including the parts about tabular figures and screen readers that hand-rolled versions skip.

npm i @number-flow/react

Sound built in code rather than shipped as files. The runtime counterpart to the sounds-on-the-web and generating-sounds-with-ai skills.

https://audio.raphaelsalaja.com

Point at the thing that is wrong instead of describing it in prose.

https://www.agentation.com

Thinking states, tool calls, streaming text, citations and tables: the surfaces an agent product needs and nobody wants to rebuild.

https://aicss.dev

Tweak it in place, then move it into your project.

https://bencho.dev

Text that changes without the usual crossfade-and-hope.

https://calligraph.raphaelsalaja.com

Live brand detection, 3D flip, themeable variants.

https://crd-ui.juanda.co

Tiny and dependency-free. Pairs with the sounds-on-the-web skill, which tells you when not to use it.

https://cuelume.dev

The seemingly-extra details that give an interface personality.

https://designspells.com

The unglamorous list of things that turn a component folder into a system.

https://www.designsystemchecklist.com

What the good teams actually shipped, rather than what the docs claim.

https://designsystems.surf

Rules grouped by discipline: 60-30-10, line length, the 8pt grid, optical centre. Each stated plainly and updated regularly.

https://designparser.de

Sliders, toggles, colour pickers, spring editors and action buttons. Tune motion against the real component instead of rebuilding it.

https://joshpuckett.me/dialkit

Recharts-shaped, but the output looks like nothing else on the page.

https://www.tripwire.sh/dither-kit

Expressive loading primitives that land in your repo rather than in node_modules.

https://dotmatrix.zzzzshawn.cloud

No dependencies. Annotation and sketching dropped into an app without pulling in a canvas framework.

npm i drawesome

Pick the curve by looking at it, then paste the cubic-bezier.

https://www.easing.dev

Free and open source. The opposite of a restrained system, used deliberately.

https://www.fancycomponents.dev

Mirrors Tailwind's gradient utilities with from / via / to colour stops, configurable widths, and an animated variant.

https://gradient-border.floriankiem.com

Wallet addresses, usernames, ids. Gradient and dither modes, React and vanilla.

https://www.hashvatar.com

The short list, from the Interfaces magazine.

https://interfaces.dev/cheat-sheet

The feedback gap between an action and its result, filled deliberately.

https://www.interior.dev

Lines, words and characters at the real break points, which is what makes staggered text reveals survive a resize.

https://edoardolunardi.github.io/kugiri/

Fitts, Hick, Jakob, Miller and the rest, with what each one actually claims.

https://lawsofux.com

Real refraction of whatever is underneath, rather than a blurred screenshot.

https://glass.samasante.com

Charts that update as the data arrives, rather than re-rendering a static plot on every tick.

npm i liveline

The runtime counterpart to the morphing-icons skill.

https://www.morphicons.com

Ends with enough to go and build it yourself, rather than a library to install.

https://morphrig.dev

Pick a colour, convert between models, build a palette and check it against the sRGB and Display-P3 gamuts. The practical companion to Jakub's own writing on why perceptual uniformity changes how you build a set.

https://oklch.fyi

Catches accessibility issues and visual bugs in React, Vue, Svelte and more. The CI counterpart to a review skill.

https://www.rams.ai

One React component and one server helper. Routes to Slack, Linear, GitHub, email or webhooks. MIT licensed.

https://www.remediate.ski

Build the elevation scale visually, export both platforms.

https://shadowlab.mocarski.design

One search box over the registries you would otherwise check one at a time. Blocks, components and whole templates, with the install command for whichever registry it came from.

https://shoogle.dev

An up-to-date reference of interface components drawn from real, shipped design systems.

https://component.gallery

The half-second where an agent is thinking and the interface has to say so. From Libraries.dev, with Alexandr Brinza.

https://orbs.jakubantalik.com

Text animation without pulling a motion library in behind it.

https://torph.lochie.me

The browsable collection the skill is built from. A reference rather than a dependency — take the one you need, or install transitions.dev so an agent knows the whole set.

https://transitions.dev

Photos and video of software without opening a design tool.

https://ui.camera

Design principles, motion, typography and more, kept up to date.

https://userinterface.wiki

The feedback channel the web usually ignores. Pairs with interface sound: both are felt rather than seen, and both need restraint.

npm i web-haptics