Communitygithub.com

delorenj/skills

Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective Three.js and an independent-critic "Gauntlet" loop. Use when asked to make a launch-style / SaaS-style video, business ad, explainer, sample reel or pitch video, or to review and improve one. Encodes motion principles distilled from 28 professional launch films, a quality bar, audio rules and a business-offer playbook.

Was ist skills?

skills is a Claude Code agent skill that plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective Three.js and an independent-critic "Gauntlet" loop. Use when asked to make a launch-style / SaaS-style video, business ad, explainer, sample reel or pitch video, or to review and improve one. Encodes motion principles distilled from 28 professional launch films, a quality bar, audio rules and a business-offer playbook.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/delorenj/skills/tree/HEAD/business-motion-film

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Business motion film

Make short (15–40s) commercials that look like premium SaaS launch films but sell a real business outcome: explain a service, earn a quote request, follow up on a quote, or refresh an ad. The visuals can be ambitious; the claims must be true.

Read only the reference file your current step needs:

StepRead
Choosing a vertical, offer, pilot scope, pricing anchorsreferences/business-offers.md
Storyboarding and motion designreferences/motion-grammar.md, then references/launch-film-notes.md for concrete moments
Building 3D componentsreferences/three-js-patterns.md, templates/component-lab.html, templates/projected-overlays.js
A 3D product hero that must move like the real thing (unfolds, closes, reveals)references/product-hero-realism.md
Any review roundreferences/gauntlet.md, references/critic-prompts.md, references/quality-bar.md
Music, sound effects, mixreferences/audio.md
A worked example end to endreferences/case-study-alder.md (calm service film), references/case-study-duo.md (Three.js product film)

Non-negotiables

  1. Truth. Never invent testimonials, ratings, completed jobs, diagnoses, savings, warranties or confirmed appointments. A concept film says it is a concept ("Fictional brand · Concept film · AI-generated imagery"). A client film uses the client's approved footage and facts.
  2. Business purpose on mute. A first-time viewer must be able to say what the business does and what to do next, with the sound off, by the end.
  3. Independent judging. The builder never grades its own work. Every component and every full cut goes to a fresh critic that sees only the render, the brief and the references (references/gauntlet.md).
  4. Deterministic motion. Every animated state is a pure function of timeline time: no free-running requestAnimationFrame, Date.now(), unseeded randomness or physics history. Seek to any frame and get the same pixels.
  5. "No bugs" is not "good". Clean, smooth and error-free versions still get rejected for being basic, empty or slow. Measure (scripts/) and judge creatively.

Workflow

1. Brief (15 min)

Write BRIEF.md: business, buyer, the viewer's problem, the single action (CTA), what is provably true, available real assets, length, aspect ratios, brand (palette, type), and what must never be claimed. If the user has no real assets, agree it is a labelled concept.

2. References

Pick 3–6 moments from references/launch-film-notes.md whose mechanism fits the story, e.g. a foreground fly-through, a persistent selected object, or a layered exploded view. If the user supplies reference videos, extract frames (scripts/contact-sheet.sh) and cite exact timestamps. Borrow mechanisms, never layouts, logos or footage.

3. Storyboard before building

One table: time → what the viewer sees → business job of the beat → the transition out, including which object survives it. Rules:

  • 12–15 distinct compositions for a 30s film. Vary scale: macro → wide → overhead → UI close-up → type impact.
  • The lead subject fills 60–85% of the usable frame in feature beats. No small card floating in a big empty field.
  • Every beat has a readable landing, then an accelerating exit. No holds without motion over ~0.6s.
  • Name 3 signature transformations you can describe without effect names, e.g. "the inspection photo becomes the report's hero image".
  • 3D only where it explains something physical or spatial. Typography and UI stay crisp HTML/SVG. Get a quick critic pass on the storyboard itself (chronology, business logic, truthfulness).

4. Assets

  • AI stills: generate the key frame first, then animate it with image-to-video. Prompt as a production brief: lens, light, exposure ("bright, airy, nothing crushed to black"), negative space reserved for type, "no people / no text / no logos / no watermark" when needed.
  • AI video: short (4–5s) clips with restrained camera moves ("a steady gimbal dolly, about 25 cm of travel, preserve the exact geometry, no morphing"). Expect 720p/24fps and interpolate/upscale, which is not native detail. Reject clips whose geometry warps; regenerate rather than hide.
  • Keep a generation ledger: model, prompt, seed, job id, accepted window. Never commit API keys.

5. Build components in isolation

Each custom component (3D scene, report UI, booking flow, logo mark) gets its own lab page (templates/component-lab.html), is rendered to stills plus a short motion proof, and goes through a component Gauntlet round before it joins the film.

6. Assemble

One root timeline; each scene is a sub-composition; Three.js scenes are rendered from the root seek clock; overlays such as labels, pins and leader lines are positioned from projected 3D anchors every frame (templates/projected-overlays.js). Hand objects across scenes at exact pixel coordinates, so the last frame of scene A equals the first frame of scene B for the carried object.

7. Full-film Gauntlet

Render the whole film. Run scripts/frozen-time.sh and scripts/loudness.sh. Send to a fresh critic with references/critic-prompts.md (full-film prompt). Fix the highest-impact items, re-render, and send to a new critic that verifies the previous list item by item. Stop at the quality bar or when gains become cosmetic (usually 3–5 rounds).

8. Audio last, but not an afterthought

Follow references/audio.md: music matched to the buyer's customer and kept well under the effects (lo-fi or warm acoustic for home services); one soft, rumble-free whoosh per real transition; clean UI sounds only on real actions; per-event levels solved in each effect's band (scripts/solve-sfx-gains.py); candidates screened with scripts/sfx-candidates.py. Always deliver a music-only fallback, and isolate complaints with it.

9. Deliver

Master MP4 (1080p60 for motion work), poster frame, contact sheet, editable source, generation ledger, and a Gauntlet ledger (what each critic found → what changed → measured before/after). State limits honestly: what was measured versus listened to, and sampled versus exhaustive review.

Working style the clients in this playbook expected

  • Plan visibly (storyboard), then build without stopping to ask for approval of every step.
  • Report status in one line when working for a long time.
  • Show the work: contact sheets, measured numbers, critic verdicts.

Individual skills in this repo

This repo contains 14 individual skills — each has its own dedicated page.

delorenj/skills

Plan and generate terminal ASCII animations/screensaver-style output (FPS, refresh rules, loop policy, low-flicker guidance), with a static poster frame and an optional local demo script.

delorenj/skills

ASCII video: convert video/audio to colored ASCII MP4/GIF.

delorenj/skills

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

delorenj/skills

Generate professional voiceovers using ElevenLabs AI. Use when the user needs to create voiceovers for videos, audio narration, or text-to-speech content. Supports multiple voices with character presets (narrator, salesperson, expert) for natural delivery. Includes single scene regeneration for fine-tuning.

delorenj/skills

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

delorenj/skills

Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio/video transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.

delorenj/skills

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, and registry discovery.

delorenj/skills

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For dev-loop CLI commands (init, lint, inspect, preview, render) see the hyperframes-cli skill; for asset preprocessing commands (tts, transcribe, remove-background) see the hyperframes-media skill.

delorenj/skills

Manim CE animations: 3Blue1Brown math/algo videos.

delorenj/skills

Join a Google Meet or Zoom call as a video meeting agent via PikaStreaming. Trigger: user drops a Google Meet or Zoom link, or asks to join a meeting.

delorenj/skills

Translate an existing Remotion (React-based) video composition into a HyperFrames HTML composition. Use ONLY when the user explicitly asks to port, convert, migrate, translate, or rewrite a Remotion composition as HyperFrames (e.g. "port my Remotion project to HyperFrames"). Do NOT use when (a) authoring a NEW HyperFrames composition (even if A/B-testing a Remotion video); (b) Remotion is mentioned in passing; (c) Remotion code is shared as reference, not for translation; (d) the user wants "the same video as my Remotion one" without explicitly asking to migrate the source — treat as a fresh HyperFrames build. When in doubt, default to the `hyperframes` skill. Detects unsupported patterns (useState, useEffect side effects, async calculateMetadata, third-party React component libraries, `@remotion/lambda`) and recommends the runtime interop escape hatch instead of a lossy translation.

delorenj/skills

Generate speech using the self-hosted voxxy (vox) TTS service at https://vox.delo.sh. Use when the user asks to speak, say, narrate, synthesize speech, clone a voice, create a voice, add or register a voice, pipe TTS, or control voice qualities by description (e.g. "a young woman with a cheerful voice"). Handles HTTP API usage, voice profile management, description-based voice design, cloning, MCP registration, and integration patterns for new platforms.

delorenj/skills

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.

delorenj/skills

YouTube transcripts to summaries, threads, blogs.

Verwandte Skills