Jakubantalik/transitions.dev — reverse-engineered prompt

Build me a clean little website called Transitions.dev that showcases a collection of reusable CSS transitions for web apps.

I want the homepage to show cards for twelve common UI interactions, like resizing cards, number pop ins, notification badges, dropdowns, modals, panels, page transitions, icon swaps, success checks, avatar hover effects, and error shakes. Each card should demonstrate the motion directly and include a copy button that gives someone a self contained CSS snippet they can paste into their own project.

Please make it feel polished and design focused, with smooth previews, good spacing, and a simple responsive layout. Include reduced motion support in the snippets. I’d also like a playground page where the transitions can be tuned, plus a simple page explaining how the same transitions can be used by AI coding tools as an installable skill.

Keep it lightweight and mostly static, so it can run locally with a basic web server. Look up current docs online if you need to.