Update to Creative Claw

{
  "description": "Render an exact HTML/CSS layout to a PNG, or make a motion-graphics video as a HyperFrames HTML/CSS/JS composition, with Creative Claw. Use only when the user explicitly asks for HTML, CSS, HyperFrames, or code-based rendering, supplies HTML, accepts that method, or explicitly asks for motion graphics, kinetic typography, animated titles, or an animated explainer; not for ordinary images, posters, social cards, or filmed-looking AI video.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 541
    },
    {
      "relative_path": "assets/webgl-orbit.html",
      "size_in_bytes": 3756
    },
    {
      "relative_path": "references/audio-media.md",
      "size_in_bytes": 5354
    },
    {
      "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": 1627
    },
    {
      "relative_path": "references/job-recovery.md",
      "size_in_bytes": 3786
    },
    {
      "relative_path": "references/media-assembly.md",
      "size_in_bytes": 8654
    },
    {
      "relative_path": "references/platform-upload.md",
      "size_in_bytes": 1416
    },
    {
      "relative_path": "references/project-packaging.md",
      "size_in_bytes": 4792
    },
    {
      "relative_path": "references/verification.md",
      "size_in_bytes": 5648
    },
    {
      "relative_path": "references/voices/speech-localization.md",
      "size_in_bytes": 3869
    },
    {
      "relative_path": "references/workflow-basics.md",
      "size_in_bytes": 10396
    }
  ],
  "name": "creativeclaw-render-html",
  "skill_md_contents": "---\nname: creativeclaw-render-html\ndescription: \"Render an exact HTML/CSS layout to a PNG, or make a motion-graphics video as a HyperFrames HTML/CSS/JS composition, with Creative Claw. Use only when the user explicitly asks for HTML, CSS, HyperFrames, or code-based rendering, supplies HTML, accepts that method, or explicitly asks for motion graphics, kinetic typography, animated titles, or an animated explainer; not for ordinary images, posters, social cards, or filmed-looking AI video.\"\n---\n\n# Render HTML\n\nFor each Creative Claw tool call that exposes it, pass the optional `skills_used` array with `creativeclaw-render-html`, any other Creative Claw skills actually followed, and guide entries in the form `<skill-name>/<relative-guide-path>` (for example, `creativeclaw-render-html/references/workflow-basics.md`). Include only skills and guides followed for that call. Omit attribution if the user declines tracking or the field is unavailable. Never send other plugin names, private data, or local paths.\n\n**Not connected yet?** If no Creative Claw tools (such as `list_models` or `generate_image`) are available, the plugin is installed but the server is not connected. Stop and tell the user to open the plugin's Connectors tab in their app (or the MCP server list in a terminal client), connect Creative Claw, sign in, and ask again. Do not substitute other tools or describe a result that was not generated.\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\nThree tools:\n\n- `render_html_image`: a fixed-size HTML/CSS layout to a PNG. It completes synchronously; do not call `check_job` for it.\n- `generate_html_video`: Creative Claw's own video agent makes a motion-graphics video. It writes the HyperFrames composition, makes the images, voiceover, music and sound it needs, checks the result, and renders it. You send a prompt, not HTML.\n- `render_html_video`: renders a HyperFrames HTML/CSS/JS composition or project ZIP you supply. It returns a queued job; resolve it with `check_job` when the final URL is needed.\n\nWhich video tool: use `generate_html_video` unless the user supplied the HTML or project, or you have HyperFrames authoring skills installed in this session (a `hyperframes` skill in your skill list) and can write and check the composition yourself; in that case author it and use `render_html_video`. If the user asks for one of the two, follow that.\n\nOlder clients may not list `generate_html_video`. There the same agent is `render_html_video` with `method: \"generate\"`, `method: \"edit\"` (with `cloud_project_id`) and `method: \"status\"`.\n\nThis is an explicit-only route. A poster, banner, social card, overlay, intro, outro, or video that needs text is not by itself a reason to use it. Use `creativeclaw-generate-image` or `creativeclaw-generate-video` unless the user asks for HTML, CSS, HyperFrames, or code-driven rendering, supplies HTML, accepts the method when offered, or explicitly asks for motion graphics, kinetic typography, animated titles, or an animated explainer. If the user names an image or video model, that choice wins.\n\n`creativeclaw-edit-media` owns work on finished videos: burning a watermark (`merge_media` with `operation:\"overlay_images\"`) and merging intros or outros. This skill can make the parts: a transparent PNG mark or a rendered title card.\n\n## Good uses\n\n- Image: a brand or theme reference board; an OG image, quote card, title card, badge, comparison graphic, or UI mockup; an exact-text watermark with `transparent_background: true`; a layout the user wants to approve before using it as a generation reference.\n- Video: exact animated text, captions, lower thirds, or calls to action over existing footage; title cards, logo stings, charts, UI motion, intros, and outros; canvas, WebGL, shader, or deterministic 3D product motion.\n- Not for photorealistic scenes, character motion, or cinematic generative footage.\n- For a reusable layout with text and image slots, use `list_templates` to find one, `create_template` or `update_template` to save it, and `render_template` to fill it.\n\n## Render an image\n\n1. Confirm the pixel size, the exact visible copy, and whether the user supplied HTML or wants you to write it.\n2. For branded work, call `get_theme`, and use `search_assets` for approved logos and images. Import local or attached media first.\n3. Write a complete fixed-size layout. Set `html, body` margins to zero, hide overflow, and declare fonts. Tailwind utilities work without a CDN; ordinary `<style>` blocks work as in Chromium.\n4. Pass public images or fonts through `inline_images` and reference each as `{{token}}`. URLs must be reachable at render time.\n5. Call `render_html_image` with `html`, `width`, `height`, a useful `name`, and stable `tags`.\n6. Check the PNG for font loading, text fit, crop, contrast, and logo fidelity.\n\n```text\nrender_html_image({\n  width: 1200,\n  height: 630,\n  name: \"launch-announcement-card\",\n  tags: [\"launch\", \"social-card\"],\n  html: `<main style=\"width:1200px;height:630px;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#312e81);color:white;font:800 72px/1.05 Inter,sans-serif;text-align:center;padding:90px\">Version 2.0<br>ships today</main>`\n})\n```\n\n- No default font is injected. Load a web font or pass a font URL through `inline_images`, with a fallback.\n- Make the layout fill the canvas. Avoid content whose height depends on the viewport or on unbounded text.\n- Use HTTP(S) URLs only; no local paths, blob URLs, or expired signed URLs.\n- If the PNG becomes a generation reference, repeat the exact brand and text constraints in that prompt; a generative model may not keep them.\n\n## Make a video with the video agent\n\n`generate_html_video` hands the brief to Creative Claw's own cloud agent. It writes the composition with the HyperFrames best practices built in (seekable timelines, text fit, safe zones, audio mixing, beat-synced motion), generates the images, voiceover, music and sound effects the brief calls for, checks the result, and renders the finished MP4 with audio. You write no HTML and read none of the composition references below. Use it when the user explicitly asks for that kind of video: motion graphics, kinetic typography, an animated explainer or promo, a lyric video, or animated captions and titles over supplied media.\n\n1. Write the brief as `prompt`: what the video is for, the exact on-screen copy and narration script when the user gave them, the visual style, the music, and the ending. Say what matters most. Pass `duration`, `width` and `height`.\n2. Pass the user's own images, footage, audio and logos as `reference_assets`, each with a `description` of its role. Import local or attached media first.\n3. To start from an existing project instead of a blank one, also pass it as `project_url` (a public ZIP, such as the `zipUrl` of a ZIP example from `search_examples`) or `project_asset_id` (a ZIP in the workspace). It is unpacked as the starting project and the agent builds on it, keeping its scenes and motion and changing what the brief asks. Pass that project's own `duration`, `width` and `height` unless the user wants them changed. This is how to turn a template into the user's video, or to continue a project the user edited elsewhere.\n4. Set `effort` to what the user asks for: `light` for simple changes and basic videos, `medium` (default) for most videos, `high` for complex or polished work. Higher effort is slower and costs more. Do not change it silently.\n5. `media_budget_credits` caps what the agent may spend on generated media in the turn (default 200). Pass `0` when the user wants no generated media, or a lower number when they set a limit. The agent is told its budget and plans around it.\n6. The call returns a `cloud_project_id` and a turn takes several minutes. The video card follows progress on its own, then plays the video and offers the download and a Request changes box. One call gives one card for the whole turn, so call nothing to wait.\n   - In Review mode the turn does not start: the card shows the request (prompt, assets, effort, media budget, estimated cost) and the result says `status: \"awaiting_approval\"`. Tell the user it is ready to review and that Generate in the card starts it. One call is enough for the request.\n   - `check_job` with the `cloud_project_id` as `job_id` is for you, not the user: it returns the state, the video `url`, the agent's summary, the final cost and the media it generated, and shows the user nothing; the video card stays their view. Call it when you need the outcome to answer or continue, never in a loop.\n   - When the user changes the video from the card, the card updates in place and reports the result to you. Do not repeat their edit.\n7. For changes the user asks for, call `generate_html_video` again with the `cloud_project_id` and the feedback as `prompt`. It keeps the project and renders again. Small fixes suit `effort: \"light\"`.\n\n```text\ngenerate_html_video({\n  prompt: \"A 30-second explainer for a budgeting app: three benefits as bold kinetic titles over clean UI-style graphics, warm upbeat narration in English, light electronic music, end card with the app name and 'Get the app'.\",\n  duration: 30,\n  width: 1920,\n  height: 1080,\n  effort: \"medium\"\n})\n```\n\nEach turn, a new video or a change, holds 200 credits when it starts and settles the real cost when the agent finishes, from the agent's work plus the media it generated. A failed turn is not charged. Tell the user the final cost the result states. For a cost question before starting, use `estimate_generation` with `operation: \"html_video\"` and `params.method` set to `\"generate\"`, or `\"edit\"` for a change.\n\nWrite and render the HTML yourself (next section) only when the user supplied HTML, wants a project rendered exactly as it is, or needs exact control of the code.\n\n## Render your own HTML video\n\nChoose the source:\n\n- **Single HTML (default):** pass `html` for short, self-contained motion.\n- **Full project ZIP:** only for a ZIP example selected from `search_examples` or a HyperFrames project the user already has. Pass `project_url` for an unchanged public ZIP, or `project_asset_id` for an uploaded or edited one. Read [project packaging](references/project-packaging.md). Complexity alone is not a reason to start a ZIP project.\n\nTo find a starting point, call `search_examples` with `render_type: \"html_video\"`, then load one selected result with `search_examples({ id })`. Read [example discovery](references/example-discovery.md). A generative prompt is not HTML.\n\n1. Set duration, even width and height, FPS, format, exact copy, and source media. Keep an HTML choice the user already made.\n2. For single HTML, import media and use public HTTP(S) URLs. For ZIPs, bundle assets and keep relative paths. For overlays, match the source video's size and aspect ratio.\n3. For branded work, call `get_theme` and use its fonts, colors, logos, and motion style.\n4. Read [composition contract](references/composition-contract.md), then only the references below that apply. Plain finite CSS keyframes work for simple motion; prefer one paused GSAP timeline for orchestration. To silence a source video, put `muted` on its opening `<video>` tag; setting `video.muted = true` later in JavaScript is not enough. Keep narration and music in separate `<audio>` elements.\n5. Call `render_html_video` with exactly one source (`html`, `project_url`, or `project_asset_id`) and the supported output options (`duration`, `fps`, `width`, `height`, `format`, `name`, `tags`). Do not invent upload, preflight, or dependency parameters.\n6. Resolve the job, then check text fit, safe zones, timing, media sync, encoded size, and audio before using the output elsewhere.\n\nUse 24 FPS for a cinematic look, 30 for normal graphics, and 60 only when the smoothness is worth it. Other values are normalized to 24, 30, or 60.\n\n| Need | Reference |\n| --- | --- |\n| Full project ZIP | [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| Examples to start from | [Example discovery](references/example-discovery.md) |\n| Review, local checks, blank frames, timeouts | [Verification and troubleshooting](references/verification.md) |\n\nThe [WebGL example](assets/webgl-orbit.html) is a complete document to validate locally or adapt into the `html` string; its file path is not a tool input.\n\nUse `estimate_generation` with `operation: \"html_video\"` only when the user asks about cost or gives a budget, with the real duration, size, and FPS in `params`.\n"
}