# API & docs explainer — how to make it with code and an AI agent > **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q="` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page. A concept from the docs drawn as a system: parts, flow, the code that calls it. **Output:** 16:9 · 30–90 s · **Input:** A docs page ## Ready templates - [Decision Tree](https://skills.varg.ai/component/hf.decision-tree.md) — Animated flowchart with branching paths · install: `npx hyperframes init my-video --example decision-tree` ## Recipe, beat by beat Each beat lists components that build it; install any with its command, then fill its slots. **Concept** (Title cards, Diagrams & flows) - [Canopy Part Title](https://skills.varg.ai/component/hf.canopy-part-title.md) — Leaves sweep through the frame and part to reveal the headline. · `npx hyperframes add canopy-part-title` - [Text + Circle Carousel 1](https://skills.varg.ai/component/hf.carousel-text-circle-1.md) — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts t · `npx hyperframes add carousel-text-circle-1` - [Text + Circle Carousel 2](https://skills.varg.ai/component/hf.carousel-text-circle-2.md) — A headline mask-reveals word by word while a circle carousel converges from off-frame and threads the line, collapses to centre, hard-cuts t · `npx hyperframes add carousel-text-circle-2` - [Avatar Cloud](https://skills.varg.ai/component/hf.avatar-cloud.md) — Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label. · `npx hyperframes add avatar-cloud` - [Constellation Hub](https://skills.varg.ai/component/hf.constellation-hub.md) — Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup. · `npx hyperframes add constellation-hub` - [Decision Tree](https://skills.varg.ai/component/hf.decision-tree.md) — Animated flowchart with branching paths · `npx hyperframes init my-video --example decision-tree` **Example** (Code & terminal) - [Code 3D Extrude](https://skills.varg.ai/component/hf.code-3d-extrude.md) — Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and ligh · `npx hyperframes add code-3d-extrude` - [Code Diff](https://skills.varg.ai/component/hf.code-diff.md) — An edit shown as a colored diff — removed lines collapse in red, added lines expand in green. · `npx hyperframes add code-diff` - [Code Highlight Sweep](https://skills.varg.ai/component/hf.code-highlight.md) — A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. · `npx hyperframes add code-highlight` **Flow** (Diagrams & flows, Steps & timelines) - [Avatar Cloud](https://skills.varg.ai/component/hf.avatar-cloud.md) — Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label. · `npx hyperframes add avatar-cloud` - [Constellation Hub](https://skills.varg.ai/component/hf.constellation-hub.md) — Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup. · `npx hyperframes add constellation-hub` - [Decision Tree](https://skills.varg.ai/component/hf.decision-tree.md) — Animated flowchart with branching paths · `npx hyperframes init my-video --example decision-tree` - [Card Catalog Explainer](https://skills.varg.ai/component/varg.card-catalog-explainer.md) — A 56 s explainer: a wall of code-made videos, then one request travels through a card catalog to the finished MP4. Point config.json at any · `git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/card-catalog-explainer && bash make.command` - [varg Previz](https://skills.varg.ai/component/varg.previz.md) — A three.js grey-box previz of every shot on the timeline — auto cameras from storyboard words, a posable mannequin — then one Seedance 2.5 v · `git clone https://github.com/vargHQ/code2video-templates && python3 code2video-templates/varg-previz/scripts/new_previz.py my-previz` - [Agent Cursor](https://skills.varg.ai/component/hf.agent-cursor.md) — An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on a · `npx hyperframes add agent-cursor` **Next** (CTAs & end cards) - [CTA Close](https://skills.varg.ai/component/hf.cta-close.md) — A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, a · `npx hyperframes add cta-close` - [CTA Lockup](https://skills.varg.ai/component/hf.cta-lockup.md) — A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confiden · `npx hyperframes add cta-lockup` - [Logo Brand Close](https://skills.varg.ai/component/hf.logo-brand-close.md) — A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide- · `npx hyperframes add logo-brand-close` **Across the whole video:** Themes & brand kits ## Generated footage, voice and music Code renders the layout for free. Anything generated — AI shots, voiceover, music, lip-sync — runs on varg with one key: `npx skills add vargHQ/skills --skill varg-ai`, the Claude Code plugin `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`, or the MCP `https://mcp.varg.ai/mcp`.