demo-animation-v2listed

# Demo Animation v2 Generate the recommended responsive self-playing HTML product demo. Output: `demo/index.html`. ## How it works This skill uses `assets/template.html` as the reusable demo engine. Read the template, fill in all `{{PLACEHOLDER}}` markers with project-specific content, and write the completed single-file demo to `demo/index.html`. The template contains the complete reusable engine: CSS framework, JS animation system, mobile controls, touch gestures, fullscreen, piano music, and accessibility support. ## Workflow ### 1. Read the project Read CLAUDE.md, README, main files. Identify: product name, tagline, color palette, font stack, 6-10 key features, UI layout type. ### 2. Plan steps briefly List 6-10 demo steps for the user. Do not wait for confirmation unless unsure. Start generating. ### 3. Read the template Read `assets/template.html` from this skill folder. This is your base file. ### 4. Fill placeholders and write Read the template, replace all `{{PLACEHOLDER}}` markers, and write the result to `demo/index.html`. #### Placeholder reference **Metadata:** - `{{PAGE_TITLE}}` - e.g. "My Project Demo" - `{{GOOGLE_FONTS_LINK}}` - `<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">` **CSS variables:** `{{PRIMARY_DARK}}`, `{{PRIMARY_DARK_LIGHT}}`, `{{ACCENT}}`, `{{ACCENT_LIGHT}}`, `{{ACCENT_GLOW}}`, `{{BG_LIGHT}}`, `{{BG_LIGHT_DARK}}`, `{{BORDER}}`, `{{TEXT}}`, `{{TEXT_LIGHT}}`, `{{FONT_SERIF}}`, `{{FONT_SANS}