Demo Animation
Generate a simple self-playing HTML product demo. Output: demo/index.html.
For most new demo requests, prefer demo-animation-v2. Use this skill when the user asks for the legacy desktop-oriented demo style or when a smaller, simpler demo is enough.
Workflow
- Read the project README, app entry points, and relevant UI files.
- Identify the product name, tagline, visual style, font stack, and 6-10 features to showcase.
- Draft a brief demo step list. If the project is unclear, ask one concise question; otherwise proceed.
- Generate a single self-contained
demo/index.html file with no external dependencies except Google Fonts.
- Include intro, dashboard mockup, animated cursor/highlights, sidebar captions, timeline controls, optional piano music, ending screen, and replay.
- Validate that all referenced IDs exist, controls work, and the file opens directly in a browser.
Legacy Reference
If you need the original desktop architecture, read references/legacy-demo-engine.md. It contains the older detailed CSS, layout, animation, music, and quality checklist guidance.
Rules
- Keep the generated UI realistic for the actual product.
- Keep wait times reasonable: 800-1500ms for reading, 300-600ms for animations.
- Do not add network dependencies beyond Google Fonts.
- Do not use this legacy skill when the user explicitly requests mobile-first, touch, fullscreen, or highly responsive behavior; use
demo-animation-v2 instead.
Output
Write to demo/index.html. Tell the user:
Demo created at `demo/index.html`. Open it in a browser to preview. Click "Watch Demo" to start the animation.
1---2name: demo-animation3description: Generate a simple desktop-oriented self-playing HTML product demo. Use for legacy demo walkthroughs with an intro screen, dashboard mockup, sidebar captions, timeline controls, cursor animation, highlights, piano music, and ending screen. Prefer demo-animation-v2 when the user needs mobile support, fullscreen controls, touch gestures, or the packaged template engine.4---56# Demo Animation78Generate a simple self-playing HTML product demo. Output: `demo/index.html`.910For most new demo requests, prefer `demo-animation-v2`. Use this skill when the user asks for the legacy desktop-oriented demo style or when a smaller, simpler demo is enough.1112## Workflow13141. Read the project README, app entry points, and relevant UI files.152. Identify the product name, tagline, visual style, font stack, and 6-10 features to showcase.163. Draft a brief demo step list. If the project is unclear, ask one concise question; otherwise proceed.174. Generate a single self-contained `demo/index.html` file with no external dependencies except Google Fonts.185. Include intro, dashboard mockup, animated cursor/highlights, sidebar captions, timeline controls, optional piano music, ending screen, and replay.196. Validate that all referenced IDs exist, controls work, and the file opens directly in a browser.2021## Legacy Reference2223If you need the original desktop architecture, read `references/legacy-demo-engine.md`. It contains the older detailed CSS, layout, animation, music, and quality checklist guidance.2425## Rules2627- Keep the generated UI realistic for the actual product.28- Keep wait times reasonable: 800-1500ms for reading, 300-600ms for animations.29- Do not add network dependencies beyond Google Fonts.30- Do not use this legacy skill when the user explicitly requests mobile-first, touch, fullscreen, or highly responsive behavior; use `demo-animation-v2` instead.3132## Output3334Write to `demo/index.html`. Tell the user:3536```text37Demo created at `demo/index.html`. Open it in a browser to preview. Click "Watch Demo" to start the animation.38```
jqaisystems