suede-video

Files (7)

• CARD.md
• SKILL.md
• openai.yaml · agents/
• evals.json · evals/
• ai-video-prompting.md · references/
• edit-anatomy.md · references/
• programmatic-renderers.md · references/

SKILL.md (first lines)

# Suede AI Video Skills

## Compatibility

Planning works from supplied media and product evidence. Rendering, generation, avatars, and frame inspection depend on discovered authorized tools; otherwise return the documented manual editor handoff.

For a concrete input, expected handoff, and failure check, read
[the worked handoff](references/worked-handoff.md).

This skill turns an approved message and rights-cleared source material into
scripts, storyboards, generation plans, edit systems, and reusable production
pipelines. It keeps likeness, licensing, brand assets, render cost, and
publishing as explicit gates rather than assumptions.

## Before Starting

**Check for product marketing context first:**
If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md`, or the legacy `product-marketing-context.md` filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Gather this context (ask if not provided):

### 1. Video Goal
- What type of video? (Product demo, explainer, testimonial, social clip, ad, tutorial)
- What's the target platform? (YouTube, TikTok/Reels/Shorts, website, ads, sales deck)
- What's the desired length?

### 2. Production Approach
- Do you need a human presenter? (AI avatar vs. voiceover vs. screen recording)
- Do you have existing footage or assets? (Screenshots, logos, product UI)
- Do you need generated footage? (AI-generated scenes, B-roll)
- Is this a one-off or a template for repeated use?

### 3. Technical Context
- What's your tech stack? (Node.js, Python, etc.)
- Do you have API keys for any video tools?
- Budget constraints? (Some tools charge per minute of video)

---

## Choosing Your Approach

Choose the production method from the job, available evidence, rights, and
currently callable tools:

| Approach | Candidate fit | Tools to evaluate | Use when |
|----------|---------------|-------------------|----------|
| **Programmatic** | Templated, data-driven, batch video | An installed HTML/CSS or React renderer | The format repeats and deterministic output matters |
| **AI generation** | Original footage from text/image prompts | Any currently authorized generation model | The scene cannot be filmed practically and output rights are verified |
| **AI avatars** | Approved presenter without filming | Any currently authorized avatar platform | Consent, likeness, voice, localization, and output rights are documented |
| **Editing/repurposing** | Cutting long-form into short clips | Any installed transcript or timeline editor | Source media and derivative-use rights are available |

---

## Programmatic Video

Programmatic video is a candidate for repeatable, templated, or data-driven
work; verify fit against the current stack, edit needs, cost, and review burden.

### HTML/CSS renderer candidate

Hyperframes, from HeyGen, may fit an HTML/CSS workflow. Docs:
[hyperframes.heygen.com](https://hyperframes.heygen.com/introduction). First
check whether it is installed.
If it is, read the installed version's documentation, inspect its license, and
confirm the renderer and export path. If it is not installed, use a
renderer-neutral handoff or request explicit installation authorization after
showing the current package source, version, lockfile impact, and cost. The
following commands must not run without that authorization:

```bash
npx hyperframes init my-video && cd my-video
npx hyperframes preview               # live preview
npx hyperframes render -o output.mp4  # render index.html
```

**Key concept:** A composition is plain HTML, CSS, and JS. Timing is declared in
the markup, and the renderer seeks a paused animation timeline frame by frame.
Confirm the current composition syntax and any programmatic render API in the
installed version's docs before writing code against it.

**Candidate fit:** Product announcements, changelogs, data-driven reports, and
approved personalized outreach videos. Verify determinism with a repeat-render
test instead of assuming it.

### React renderer candidate

Remotion may fit a React-based workflow. Docs:
[remotion.dev](https://www.remotion.dev/docs). It is source-available, not open
source, so check its license terms. Verify the installed or callable version,
current documentation, license, rendering path, and hosting cost. The
scaffold command may install packages or create files; run it only with explicit
authorization for that change, otherwise provide a renderer-neutral plan:

```bash
npx create-video@latest
```

**Key concept to verify:** a composition is a React component that reads the
current frame number and returns what is on screen; props drive content. Confirm
whether rendering is local or uses an authorized hosted renderer.

Read
[references/programmatic-renderers.md](references/programmatic-renderers.md)
when the repo already uses React, or when the choice between the HTML/CSS and
React paths has to be justified: it carries the React component sample and the
renderer selection table. Neither framework is the more powerful one. Both
render web pages to video in a headless browser; the difference is what the
team writes.

---

## AI Video Generation

Generate original footage from text or image prompts. Use for B-roll, hero visuals, and scenes you can't practically film.

### Model comparison

Discover currently callable and authorized models before recommending one. Read
current official documentation and run a bounded test on the actual account.

From JasonColapietro/suede-creator-skills, MIT.

More from JasonColapietro/suede-creator-skills