html-to-interaction-prompts

Provide the HTML file or live URL and the Skill inspects the source for interaction patterns like mousemove, ScrollTrigger, and hover states. It then writes one portable prompt per interaction concept, captures screenshots as evidence, and assembles everything into an article.

The Skill records one tall full-page scroll screenshot from the actual page URL, then cuts contiguous section crops from that exact image. Crops cover the hero, every middle section, and the footer with no skipped pixel rows, and coordinates are stored in manifest.json.

The Skill's guidance maps use cases to libraries: CSS transitions for simple hovers, IntersectionObserver for scroll reveals, Framer Motion for React state-driven motion, GSAP ScrollTrigger for pinned scrubbed timelines, and Three.js only for real 3D or shader scenes.

Yes. For Framer, the Skill finds the Full Live Preview URL on the marketplace detail page and records an MP4 while scrolling the actual site. Cover images or static slideshows are not accepted as motion evidence; blocked captures trigger candidate replacement instead.

Each article must contain exactly 5 inspirations, each with a local still image, an embedded MP4 video, multiple screenshots or motion frames, source metadata, and one detailed AI-builder prompt. The manifest must declare itemCount: 5 with matching items.

Hard-coded values make prompts usable only for one exact recreation. The Skill writes portable prompts that derive colors from the page theme and scale density to the layout, so they work across brands, breakpoints, and content models.