What problem does it solve? Creating product demos and feature walkthroughs usually requires screen recording tools and video editing, producing large, fixed-resolution GIFs or videos that are hard to iterate on. This Skill generates resolution-independent, ~30KB self-contained HTML/CSS animations that mimic real app features and can be edited as plain code. ## Core Features & Use Cases - App Research via Chrome: Navigates the live app with Claude-in-Chrome MCP tools to extract design language (colors, fonts, spacing) and exact layout geometry. - Two Animation Styles: Feature Demo (Before → Action → After transformation) and Carousel (multi-view cross-fade scenes), with desktop, mobile, or dual-viewport output. - Brief + HTML Generation: Produces a structured markdown brief for approval, then a self-contained HTML file using CSS transitions, trigonometric positioning, and minimal JS class toggling. - Iterative Review Loop: Freezes the animation at each key state, screenshots it, collects feedback, fixes issues, and tunes timing until approved. - Use Case: A developer wants a landing-page demo showing their app's "Optimize Seating" feature. The skill researches the live app, generates a brief, and produces a looping HTML animation showing guests rearranging into groups. ## Quick Start Ask Claude Code to create a CSS animation walkthrough of a feature in your running app, for example: "Create a css animation of the checkout flow in my app running at localhost:3000."
