The library

Audits motion code against squash and stretch, anticipation, follow-through, secondary action and the rest. Outputs file:line findings.

npx skills add https://github.com/raphaelsalaja/skill --skill 12-principles-of-animation

Should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Then writes the implementation.

npx skills add https://github.com/emilkowalski/skills --skill animate

The gap between seeing and describing.

Distilled from the WWDC design talks. Gesture-driven UI, spring physics, interruptible transitions, translucent materials, optical sizing and the restraint underneath all of it.

npx skills add https://github.com/emilkowalski/skills --skill apple-design

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

Accessibility, layout, writing, typography, colour and UI polish in one go. The one to take if you only take one.

npx skills add https://github.com/jakubkrehel/skills --skill better-interface

Based on the Details That Make Interfaces Feel Better article. The small corrections that separate a shipped interface from a generated one.

npx skills add https://github.com/jakubkrehel/skills --skill better-ui

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

npm i cmdk

For landing pages, portfolios and redesigns. Infers the right design direction rather than defaulting to one, and uses a real design system where there is one to use.

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

A collection of details that make your interfaces feel better.

Emil's main skill. Mostly animation, with the UI-polish and component judgement that surrounds it: what to build, how far to push it, and when to stop.

npx skills add https://github.com/emilkowalski/skills

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

A natural filter for bad ideas.

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

Every rule states a value, cites whether that value is spec, measured or convention, and says where it stops applying. Reads your project's own tokens before it quotes a default, so a 7px radius in a 7px system is correct rather than a finding.

npx skills add https://github.com/Board-ly/ordinary-interfaces

A look at the invisible side of design engineering.

Applied when writing, reviewing or refactoring React and Next.js code, so the performance decisions are made while the code is written rather than profiled afterwards.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Checks a build against the published guidelines rather than a reviewer's taste, covering accessibility, interaction and the details that guidelines exist to settle.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

One shared context blitted into cheap 2D canvases, one rAF loop, IntersectionObserver gating, mipmaps, and real optics instead of painted ones. The failure modes are predictable and nearly all come from treating the widget like a demo.

npx skills add https://github.com/flornkm/skills --skill webgl-components

Why you are animating more often than you should.

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

Simple ideas you can use to improve your animations.

Contrast, keyboard navigation, screen reader support and the rest, checked against the current standard rather than a folk memory of it.

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

Defines the scope, samples representative pages and reports against the standard. The formal counterpart to a single-page scan.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-audit

A regression check. Tells you what your uncommitted changes broke, rather than everything that was ever wrong.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-diff

Runs the AccessLint rule engine against a live page and returns a worklist, not a PDF.

npx skills add https://github.com/AccessLint/claude-marketplace --skill accessibility-scan

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

https://www.agentation.com

How to transfer taste into an AI.

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

https://aicss.dev

Which thread it runs on, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler and expo-haptics, and fixes motion that stutters on device.

npx skills add https://github.com/emilkowalski/skills --skill animate-expo

"The bouncy thing when a popover opens" becomes Pop in. "The iOS rubber-band scroll" becomes rubber-banding. Better words in, better motion out.

npx skills add https://github.com/emilkowalski/skills --skill animation-vocabulary

Class-based semantic tokens with dual light/dark, plus design-read, anti-slop and micro-interaction polish for product surfaces.

npx skills add https://github.com/antfu/skills --skill antfu-design

Which toast() call to reach for, promise and loading toasts, updating and dismissing, styling and theming. Also the failures: toasts that appear twice, lose their styles, sit behind a modal or ignore dark mode.

npx skills add https://github.com/emilkowalski/skills --skill ask-sonner

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

https://bencho.dev

Brings a project up to accessibility standards and keeps it there, at the level of the actual markup rather than a checklist.

npx skills add https://github.com/jakubkrehel/skills --skill better-accessibility

Convert colours, generate palettes, check contrast, clamp to a target gamut, set up fallbacks. Semantic tokens rather than a pile of hexes.

npx skills add https://github.com/jakubkrehel/skills --skill better-colors

The structural decisions that make a layout legible before anything is styled.

npx skills add https://github.com/jakubkrehel/skills --skill better-layout

The typographic details that hold up across a whole product rather than on one hero section.

npx skills add https://github.com/jakubkrehel/skills --skill better-typography

Improves product copy while keeping voice and terminology consistent across the whole surface.

npx skills add https://github.com/jakubkrehel/skills --skill better-writing

Runs ahead of building a feature or a component and digs into what is actually wanted. It exists because the most expensive agent mistake is building the wrong thing correctly.

npx skills add https://github.com/obra/superpowers --skill brainstorming

Finds the design-system failures you don't know about: long names, empty data, overflow, every interactive state at once.

npx skills add https://github.com/jakubkrehel/skills --skill break

My experience building a drawer component for React.

My experience building Sonner, a toast library.

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

https://calligraph.raphaelsalaja.com

For posters, graphics and compositions rather than product screens. Design philosophy first, output second.

npx skills add https://github.com/anthropics/skills --skill canvas-design

Reviews everything since a commit, branch or merge base twice over. Once against the repository's own documented standards, once against what the originating issue actually asked for, and reports the two separately so you can see which kind of problem you have.

npx skills add https://github.com/mattpocock/skills --skill code-review

Gives the agent language for the thing most architecture conversations lack: where a seam belongs, what makes a module deep rather than wide, and why a narrow interface over real work is easier for both people and agents to navigate.

npx skills add https://github.com/mattpocock/skills --skill codebase-design

Diagnose and repair page-experience regressions using real measurement rather than a guess about what got slow.

npx skills add https://github.com/addyosmani/web-quality-skills --skill core-web-vitals

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

Why taste matters and how to develop it.

Stops the agent from guessing at a fix. It reproduces, narrows, forms one hypothesis at a time and tests it, which is the difference between a bug being fixed and a symptom being buried.

npx skills add https://github.com/mattpocock/skills --skill diagnosing-bugs

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

Names the things your codebase talks about and keeps those names honest, through a CONTEXT.md and architecture decision records. Worth reaching for when two parts of the system call the same concept different things.

npx skills add https://github.com/mattpocock/skills --skill domain-modeling

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

https://dotmatrix.zzzzshawn.cloud

Drag is far less common on the web than on mobile. An iOS-inspired gesture built with Motion, as an exercise in how it should feel.

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

The other half of writing-plans. It keeps the agent on the plan it agreed to, step by step, rather than quietly redesigning halfway down.

npx skills add https://github.com/obra/superpowers --skill executing-plans

Point it at a page and an effect, such as "how is the gradient on interfere.com built?", and get the actual technique back.

npx skills add https://github.com/jakubkrehel/skills --skill explain-interface

What makes Family, Family.

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

https://www.fancycomponents.dev

Mandatory prerequisite before get_design_context. Handles the parts a naive export gets wrong: components over detached layers, variables over hardcoded values.

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/

Tokens, variant sets, theming and component libraries generated from what the code already decided.

https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/

High-conviction opportunities for useful interface motion, with an explicit rejection list so you don't end up animating noise.

npx skills add https://github.com/emilkowalski/skills --skill find-animation-opportunities

Turns a question like how do I do this into a search across the registry, then installs what it finds. The most installed skill there is, which is its own argument for keeping it in the stack.

npx skills add https://github.com/vercel-labs/skills --skill find-skills

Anthropic's first-party skill for distinctive interface work: creative, polished code rather than the default purple gradient.

npx skills add https://github.com/anthropics/skills --skill frontend-design

Audits Web Audio API code for synthesis quality, UX decisions and parameter choices instead of shipping the first oscillator that made a noise.

npx skills add https://github.com/raphaelsalaja/skill --skill generating-sounds-with-ai

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

Shared layout animations, and where they earn their place.

Read-only on source. Surveys the motion you already ship and produces self-contained implementation plans any agent can execute, ordered by what actually matters.

npx skills add https://github.com/emilkowalski/skills --skill improve-animations

Walks the codebase looking for modules whose interface is wider than the work they do, writes the findings up as a visual report, then works through whichever one you pick. The useful part is that it argues each case rather than handing you a list.

npx skills add https://github.com/mattpocock/skills --skill improve-codebase-architecture

The short list, from the Interfaces magazine.

https://interfaces.dev/cheat-sheet

Reviews what you have built across every category at once and reports the findings in detail, rather than fixing as it goes.

npx skills add https://github.com/jakubkrehel/skills --skill interface-review

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

In the age of AI, knowing what not to build might be the most important skill of all.

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

Audits Motion and Framer Motion presence usage: exits that never play, popLayout, mode="wait", keys that break unmount.

npx skills add https://github.com/raphaelsalaja/skill --skill mastering-animate-presence

Covers designing the tools rather than just exposing an API, in Python with FastMCP or in TypeScript with the MCP SDK. Most of the value is in the part about what makes a tool legible to a model.

npx skills add https://github.com/anthropics/skills --skill mcp-builder

The runtime counterpart to the morphing-icons skill.

https://www.morphicons.com

Pushing Claude Code’s animation abilities to build a universal icon primitive.

Builds icon components with smooth, line-based transformation rather than a crossfade wearing a costume.

npx skills add https://github.com/raphaelsalaja/skill --skill morphing-icons

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

General web performance work such as "speed up my site" or "why is this slow", with the fixes ordered by payoff.

npx skills add https://github.com/addyosmani/web-quality-skills --skill performance

Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.

npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library

A component should respond to the space it is given, not to the window. Enforces Tailwind container queries when writing or reviewing responsive code.

npx skills add https://github.com/flornkm/skills --skill prefer-container-queries

Flip through real implementations instead of arguing about descriptions, then promote the one that wins.

npx skills add https://github.com/emilkowalski/skills --skill prototype

Audits pseudo-element and View Transition usage for hover effects, decorative layers and transitions that would otherwise need a wrapper div.

npx skills add https://github.com/raphaelsalaja/skill --skill pseudo-elements

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

https://www.rams.ai

The interesting one. It requires the agent to verify a suggestion before implementing it, and to push back where the feedback is unclear or wrong, which is the opposite of what an agent does by default.

npx skills add https://github.com/obra/superpowers --skill receiving-code-review

Upgrades a live site or app without breaking it: identifies the tells of generated design and applies a higher standard, in whatever CSS the project already uses.

npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

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

https://www.remediate.ski

Triggers on finishing a task, landing a significant feature or preparing to merge, and frames the request around what the work was meant to do rather than what changed.

npx skills add https://github.com/obra/superpowers --skill requesting-code-review

Sends the reading legwork to a background agent, restricted to high-trust primary sources, and captures what it found as a Markdown file in the repository so the next person does not repeat it.

npx skills add https://github.com/mattpocock/skills --skill research

For the moment you are mid-rebase with twelve conflicted files and no memory of what either side was trying to do. It reads both sides for intent rather than picking a hunk and moving on.

npx skills add https://github.com/mattpocock/skills --skill resolving-merge-conflicts

A production-critical pass over animation quality, timing and consistency in a diff. Pairs with improve-animations, which does the same for a whole codebase.

npx skills add https://github.com/emilkowalski/skills --skill review-animations

The technical half of being found: what to emit, what crawlers do with it, and which of it actually moves ranking.

npx skills add https://github.com/addyosmani/web-quality-skills --skill seo

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.

https://shoogle.dev

The first-party skill for making skills. It covers writing one from scratch, improving an existing one, running evals against it and tuning the description so the agent actually loads it at the right moment.

npx skills add https://github.com/anthropics/skills --skill skill-creator

Audits sound feedback for UX quality, accessibility and the implementation patterns that keep it from being obnoxious.

npx skills add https://github.com/raphaelsalaja/skill --skill sounds-on-the-web

For a plan whose tasks do not depend on each other. It hands them to separate agents in the same session, which is faster and keeps each one's context focused on its own piece.

npx skills add https://github.com/obra/superpowers --skill subagent-driven-development

Fires on any bug, failing test or surprise, and it fires before the agent is allowed to suggest a change. The order is the whole point: understand the failure, then propose. It is the counterweight to an agent that is eager to be helpful.

npx skills add https://github.com/obra/superpowers --skill systematic-debugging

Test-first for features and bug fixes, with integration tests rather than mocks where the integration is the risk. The discipline it adds is writing the failing test before the agent is allowed near the implementation.

npx skills add https://github.com/mattpocock/skills --skill tdd

The Superpowers take on TDD, written to trigger before implementation code exists rather than after. Pairs with verification-before-completion, which is what stops the agent declaring the tests green without running them.

npx skills add https://github.com/obra/superpowers --skill test-driven-development

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

https://component.gallery

One of the most underrated CSS properties.

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

No interview and no questionnaire. It synthesises what has already been discussed into a spec and publishes it to the issue tracker, which is the step most people skip between deciding and building.

npx skills add https://github.com/mattpocock/skills --skill to-spec

Audits animation timing choices. Springs are not free, so this is the argument for each one, per interaction.

npx skills add https://github.com/raphaelsalaja/skill --skill to-spring-or-not-to-spring

Text animation without pulling a motion library in behind it.

https://torph.lochie.me

Settling for good enough is not good enough.

A reference collection rather than a dependency. Take the one you need.

https://transitions.dev

Photos and video of software without opening a design tool.

https://ui.camera

A deep dive into how gradients work, how colour models affect them, and why some gradients look better than others.

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

https://userinterface.wiki

How I use AI as a design engineer on a daily basis.

Gestures are what make elements feel alive: the user acts, and the interface responds the way the physical world would.

Sets up a worktree so a feature or a plan runs somewhere other than your current checkout. Cheap insurance when an agent is about to touch a lot of files.

npx skills add https://github.com/obra/superpowers --skill using-git-worktrees

Rather than arguing about a description, it builds the alternatives and helps you iterate until one is clearly right.

npx skills add https://github.com/jakubkrehel/skills --skill variant

The ViewTransition component, addTransitionType and the CSS pseudo-elements, used to animate between states without hand-rolling a shared-element transition.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

Fires the moment the agent is about to say something is done, fixed or passing. It has to run the verification and read the output first. If you have ever been told the build is green when it is not, this is the skill for that.

npx skills add https://github.com/obra/superpowers --skill verification-before-completion

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

The whole-site check, run from measurement rather than opinion, with the findings ordered by what they cost the user.

npx skills add https://github.com/addyosmani/web-quality-skills --skill web-quality-audit

Lets the agent open your dev server, click through it, screenshot what it sees and read the browser console. The gap it closes is an agent that writes frontend code it has never actually run.

npx skills add https://github.com/anthropics/skills --skill webapp-testing

An explanation of the OKLCH colour model.

For multi-step work, where the failure mode is an agent that starts confidently in the wrong place. It produces a plan you can read and correct while correcting it is still cheap.

npx skills add https://github.com/obra/superpowers --skill writing-plans