Update to Creative Claw

{
  "name": "creativeclaw-render-html-video",
  "description": "Render a HyperFrames-backed HTML/CSS/JS composition to video with Creative Claw. Use only when the user explicitly asks for HTML-to-video, HyperFrames, code-driven motion, animated HTML, or explicitly chooses HTML rendering for overlays or title cards.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 533
    },
    {
      "relative_path": "assets/webgl-orbit.html",
      "size_in_bytes": 3756
    },
    {
      "relative_path": "references/audio-media.md",
      "size_in_bytes": 5055
    },
    {
      "relative_path": "references/canvas-webgl.md",
      "size_in_bytes": 4669
    },
    {
      "relative_path": "references/composition-contract.md",
      "size_in_bytes": 3716
    },
    {
      "relative_path": "references/dom-product-motion.md",
      "size_in_bytes": 3122
    },
    {
      "relative_path": "references/example-discovery.md",
      "size_in_bytes": 1659
    },
    {
      "relative_path": "references/job-recovery.md",
      "size_in_bytes": 3786
    },
    {
      "relative_path": "references/media-assembly.md",
      "size_in_bytes": 3876
    },
    {
      "relative_path": "references/platform-upload.md",
      "size_in_bytes": 1416
    },
    {
      "relative_path": "references/project-packaging.md",
      "size_in_bytes": 4798
    },
    {
      "relative_path": "references/verification.md",
      "size_in_bytes": 5169
    },
    {
      "relative_path": "references/workflow-basics.md",
      "size_in_bytes": 7159
    }
  ],
  "skill_md_contents": "---\nname: creativeclaw-render-html-video\ndescription: \"Render a HyperFrames-backed HTML/CSS/JS composition to video with Creative Claw. Use only when the user explicitly asks for HTML-to-video, HyperFrames, code-driven motion, animated HTML, or explicitly chooses HTML rendering for overlays or title cards.\"\n---\n\n# Render HTML Video\n\nRead [shared execution guidance](references/workflow-basics.md) once per task before using tools. It covers existing authorization, model discovery, optional cost checks, imports, and recovery.\n\n`render_html_video` sends an HTML composition to a HyperFrames renderer and returns a queued video job. This is an explicit-only route. Do not select it for ordinary AI video generation, or merely because a video needs text; use `creativeclaw-generate-video` unless the user asks for HTML/HyperFrames/code-driven rendering or explicitly accepts that method.\n\n## Good uses\n\n- Put precise, animated text, captions, lower thirds, labels, or calls to action over an existing video.\n- Make deterministic title cards, logo stings, charts, UI motion, intros, or outros.\n- Preserve exact copy, fonts, colors, logo placement, and timing that a generative video model may change.\n- Build procedural canvas graphics, WebGL/shader backgrounds, and deterministic 3D product motion.\n\nIt is not the right tool for photorealistic scene invention, character motion, or cinematic generative footage.\n\n## Choose the source method\n\n- **Single HTML (default):** use `html` for basic, short videos and self-contained motion. An HTML catalog example returns the actual document; adapt it and submit its contents.\n- **Full project ZIP:** use `project_url` for an unchanged project available at a public HTTPS URL, including a ZIP example returned by `get_example`. Use `project_asset_id` for an uploaded, private, or locally modified project. Full projects are for advanced videos **only when using a ZIP example selected from search_examples, or when the user already has a full HyperFrames project**. Ordinary `zip` and dedicated `project` assets both work for uploaded projects. Read [project packaging](references/project-packaging.md) for editing and packaging. Complexity alone is not a reason to start a new ZIP project.\n\nFor explicit HTML-video requests, look for relevant examples with `search_examples` and load selected matches with `get_example` when those tools are exposed. Read [example discovery](references/example-discovery.md). Inspect the returned source type; a generative prompt is not HTML. If there is no useful example, use the single-HTML method unless the user supplies a full project.\n\nAll composition, DOM, canvas/WebGL, timing, media and verification principles below apply to **both methods**. Only transport, dependency paths and packaging differ; a ZIP does not make non-seekable animation render-safe.\n\n## Workflow\n\n1. Establish the explicit HTML/HyperFrames intent from the request or prior authorization; do not ask again when already established. Set duration, even-numbered width and height, FPS, output format, exact copy, and source media.\n2. For single HTML, import local or attached media and use durable public HTTP(S) URLs. For ZIPs, bundle assets and preserve project-relative paths. For overlays, match the source video's aspect ratio and dimensions; scale or pad the source first when necessary.\n3. For branded work, call `get_theme` and use its approved fonts, colors, logos, and motion character.\n4. Read [composition contract](references/composition-contract.md), then only the use-case references below that apply. For single HTML, assemble one complete document with inline composition CSS/JS. For ZIPs, retain the full project structure and relative sub-compositions/assets. Plain finite CSS keyframes work for simple motion; prefer one paused GSAP timeline for orchestration.\n5. Inspect the exposed `render_html_video` schema; pass exactly one source: complete `html`, public ZIP `project_url`, or uploaded `project_asset_id`. Include supported output options (`duration`, `fps`, `width`, `height`, `format`, `name`, `tags`). Do not invent file-upload, preflight, or dependency parameters. Rendering is asynchronous: resolve the returned job with the exposed `check_job` schema when the final URL is needed.\n6. Inspect text fit, safe zones, animation timing, media sync, encoded dimensions, and audio before using the output in another edit.\n\nUse 24 FPS for a cinematic cadence, 30 FPS for normal graphics, and 60 FPS only when the extra smoothness justifies the cost. The renderer normalizes other positive values to 24, 30, or 60, so request one of those directly.\n\n## Read by use case\n\n| Need | Reference |\n| --- | --- |\n| Full project ZIP from a selected example or user-supplied project | [Project packaging](references/project-packaging.md) |\n| Typography, UI demos, charts, logo stings, title cards | [DOM and product motion](references/dom-product-motion.md) |\n| Procedural 2D, Three.js, GLSL, HTML as texture | [Canvas and WebGL](references/canvas-webgl.md) |\n| Footage overlays, captions, narration, music, source audio | [Audio and media](references/audio-media.md) |\n| Find a reusable starting point when example tools are exposed | [Example discovery](references/example-discovery.md) |\n| Review, local checks when available, blank frames or timeouts | [Verification and troubleshooting](references/verification.md) |\n\nThe [standalone WebGL example](assets/webgl-orbit.html) is a complete document for local validation or adaptation into the `html` string; its file path is not a render-tool input. Validation status is recorded in the verification reference.\n\nUse `estimate_generation` with `operation: \"html_video\"` only for user-requested cost/budget help, supplying actual duration, dimensions, and FPS in `params`. Respect existing authorization without a routine approval gate.\n"
}