Demo Animation
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.
Install
$ agentstack add skill-jqaisystems-jqai-ai-skills-demo-animation ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-jqaisystems-jqai-ai-skills-demo-animation) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
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.htmlfile 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-v2instead.
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.Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: jqaisystems
- Source: jqaisystems/jqai-ai-skills
- License: MIT
- Homepage: https://www.ai.joaoqueiros.com/skills/
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.