The Best Design,
Ready for 
Claude Code
485 interactions, components, sites and resources for sites, apps and internal tools. Copy the prompt and your agent rebuilds it in your project.
affectUI: React Components for AI AgentsA library of 132 agent-ready React components, screens, blocks and motion effects for AI products (agent boards, run trees, thinking states, pickers), one file each with no dependencies, ready to paste or hand to Claude, Cursor or v0. Site: affectui.comx.com
Interactive Finance Chart KitA chart kit with hexagonal budget cells, allocation flows, spending bars and pointer-following tooltips for financial dashboards.x.com
Retro Pixel Look ToolkitA quick screen-recorded tour of browser and app tools for pixel art, dithering, halftone and palettes: handy when you want a retro pixel look in a design or an interface.x.com
Ready-made React product blocksA library of shadcn and Tailwind CSS blocks for dashboards, AI interfaces, tables and commerce flows.reui.io
React components for AI productsA React library with agent graphs, trace views, chat inputs and dashboards to browse when building an AI product.x.com
Developing tasteEmil Kowalski on why taste matters for builders and the practical habits that train it.emilkowal.ski
12 principles of animationThe classic Disney principles of animation, each shown with an interactive example and applied to interfaces.raphaelsalaja.com
animations.devEmil Kowalski's course on web animation: theory, CSS, Framer Motion and the taste to know when and how to animate.animations.dev
SonnerThe opinionated toast component for React by Emil Kowalski: stacked, swipeable notifications that just feel right.sonner.emilkowal.ski
WebHapticsHaptic feedback for the mobile web: small vibrations on taps and toggles where the browser supports it.haptics.lochie.me
soundcn700+ curated UI sound effects for web apps, installable like shadcn components.soundcn.xyz
Web Interface GuidelinesRauno Freiberg's list of details that make a good web interface, from focus and forms to animation and touch targets.interfaces.rauno.me
cmdkThe fast, unstyled command menu component for React behind many ⌘K palettes: you bring the styling.github.com
UI PlaybookA documented collection of UI components: what each one is for, its anatomy and the mistakes to avoid.uiplaybook.dev
Devouring DetailsAn interactive reference manual on interaction design, by Rauno Freiberg, where every principle is something you can touch.devouringdetails.com
Family ValuesThe design principles behind the Family wallet, explained with the animations that made it famous: simplicity, fluidity, delight.benji.org
LivelineA real-time animated line chart for React: the line glides as new data arrives, for live dashboards and tickers.github.com
Interactive SVG animations courseA hands-on mini-course on SVG animation by Nanda Syahrasyad, with playable examples at every step.svg.guide
Invisible details of interaction designRauno Freiberg on what makes great interactions feel right, with live demos of momentum, interruptibility and spatial consistency.rauno.me
Interface CraftA working library on designing interfaces with uncommon care: lessons and studies on the details most people skip.interfacecraft.dev
OKLCH.fyiConvert, generate and explore OKLCH colors to build palettes with even lightness across hues.oklch.fyi
userinterface.wikiA living manual for better interfaces: principles of motion, typography and interaction, each with interactive examples.userinterface.wiki
Design Engineer ToolsA list of useful tools for web-focused design engineers, from color and type to motion and code.designengineer.tools
Easing GraphsA visual collection of easing curves with their graphs and values, to pick the right curve instead of guessing a cubic-bezier.easing.dev