# 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.

- **Type:** Skill
- **Install:** `agentstack add skill-jqaisystems-jqai-ai-skills-demo-animation`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [jqaisystems](https://agentstack.voostack.com/s/jqaisystems)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [jqaisystems](https://github.com/jqaisystems)
- **Source:** https://github.com/jqaisystems/jqai-ai-skills/tree/main/skills/demo-animation
- **Website:** https://www.ai.joaoqueiros.com/skills/

## Install

```sh
agentstack add skill-jqaisystems-jqai-ai-skills-demo-animation
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## 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

1. Read the project README, app entry points, and relevant UI files.
2. Identify the product name, tagline, visual style, font stack, and 6-10 features to showcase.
3. Draft a brief demo step list. If the project is unclear, ask one concise question; otherwise proceed.
4. Generate a single self-contained `demo/index.html` file with no external dependencies except Google Fonts.
5. Include intro, dashboard mockup, animated cursor/highlights, sidebar captions, timeline controls, optional piano music, ending screen, and replay.
6. 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:

```text
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](https://github.com/jqaisystems)
- **Source:** [jqaisystems/jqai-ai-skills](https://github.com/jqaisystems/jqai-ai-skills)
- **License:** MIT
- **Homepage:** https://www.ai.joaoqueiros.com/skills/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-jqaisystems-jqai-ai-skills-demo-animation
- Seller: https://agentstack.voostack.com/s/jqaisystems
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.