HTML To Interaction Prompts

When to use this skill

• Use when the user provides an HTML file, exported page, generated-page.html, or a local/live reference and asks to extract its animations/interactions.
• Use when the goal is a screenshot-backed article containing multiple reusable, brand-agnostic interaction prompts (core idea, technology, implementation, interaction, success).
• Use for the daily UI inspiration capture workflow that requires exactly 5 inspirations, each with a still image, an embedded local MP4, motion frames, source metadata, and one detailed AI-builder prompt.
• Use when capturing and organizing screenshots/videos per prompt, including full-page scroll screenshots with contiguous section crops for live websites or Framer templates.
• Use when deciding which animation library or API (CSS, IntersectionObserver, Framer Motion, GSAP ScrollTrigger, Lenis, Embla/Swiper, Rive/Lottie, Three.js) to recommend inside a prompt, or when creating/updating the target article and committing only the intended assets.
• Do not use this skill for general web development, unrelated content authoring, or repo-wide commit work — route those to standard development workflows; this skill is scoped to converting an HTML reference into an interaction-prompt article.

Goal

Turn an HTML reference into an article-ready prompt pack: identify the important interactions, capture the right visual evidence, write flexible prompts, insert screenshots under each prompt title, verify the article renders, and commit only the intended files.

Daily UI Inspiration Capture Contract

When this skill is used for a daily UI inspiration workflow: