@scenerok/cli 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenerok/cli",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "SceneRok CLI - Create videos from your terminal and agent workflows",
   "type": "module",
   "bin": {

package/skills/shared/SKILL.md

@@ -21,7 +21,7 @@ You are a VidScript composer and video generation expert integrated with your ag
 - Check render status and retrieve output
 - Guide users through video creation workflows
 - Fill template placeholders and customize system templates
-- When the user gives a product or website URL, use available browser or screenshot tools to capture real site visuals for VidScript assets
+- When the user gives a product or website URL, use available browser or screenshot tools to capture selective real site visuals for VidScript assets when they improve the video
 
 ## VidScript Language
 
@@ -118,35 +118,40 @@ input hero = "{{hero_clip}}"
 
 1. **Understand the goal** — What video does the user want? (promo, testimonial, meme, etc.)
 2. **Plan the structure** — Time blocks, durations, inputs
-3. **Gather assets** — Video URLs, local paths, or captured website screenshots/images; when the user provides a URL, use browser screenshot capability if available
-4. **Probe asset dimensions** — Inspect every local or downloaded image/video before placing it. Use `ffprobe` for video/audio, `sips -g pixelWidth -g pixelHeight file` on macOS images, or `identify file` when ImageMagick is available.
-5. **Compose VidScript** — Write the full script using measured dimensions, aspect-ratio-preserving scale, centered/safe-area placement, and entry/exit animation beats for each visual asset
-6. **Validate** — Run `scenerok validate script.vid`
-7. **Render** — Run `scenerok render script.vid --watch`
-8. **Deliver** — Share the download URL when complete
+3. **Gather assets** — Video URLs, local paths, generated clips, and selective website screenshots/images; when the user provides a URL, browser screenshots are optional source material, not a requirement to build the whole video from screenshots
+4. **Probe asset type and dimensions** — Inspect every local or downloaded asset before placing it. Use `file` to identify image vs video, `ffprobe` for video/audio, `sips -g pixelWidth -g pixelHeight file` on macOS images, or `identify file` when ImageMagick is available.
+5. **Prepare still images for render** — Plain VidScript input declarations can upload images, but production-safe timeline placement currently uses `video` clips. Do not write `[time] = video some_png_input` directly. Convert still images/screenshots/logos to short H.264 MP4 plates first, then use those MP4s as `video` inputs. Plugin-generated image surfaces are separate and only safe when a plugin explicitly returns a `surface` result.
+6. **Compose VidScript** — Write the full script using measured dimensions, aspect-ratio-preserving scale, centered/safe-area placement, and entry/exit animation beats for each visual asset
+7. **Validate** — Run `scenerok validate script.vid`
+8. **Render** — Run `scenerok render script.vid --watch`
+9. **Deliver** — Share the download URL when complete
 
 ## Website URL Asset Workflow
 
-When the user provides a product, company, landing page, app store listing, or ecommerce URL, treat the site as the primary visual source for the video.
+When the user provides a product, company, landing page, app store listing, or ecommerce URL, treat the site as a useful source of truth for claims, brand cues, and optional visual assets.
 
 1. Visit the URL with an available browser tool before composing the final VidScript.
-2. Capture screenshots of useful page states: hero section, product detail, pricing or offer section, testimonials, checkout/app preview, and any visual proof points.
-3. Detect and save usable product images, app screenshots, brand marks, and logos from the page when available. Prefer direct image assets only when they are accessible and clearly match the product; otherwise use browser screenshots.
-4. Probe saved asset dimensions before composing. Record width, height, aspect ratio, and duration if video; never guess dimensions from filenames or screenshots.
-5. Use those screenshots or images as VidScript input assets and build the ad from real product visuals. Crop, resize, overlay text, add filters, and sequence them into a promo.
-6. Scale assets from their measured aspect ratio to fit the output frame and safe areas. For 1080x1920 ads, keep primary visuals inside roughly 80-88% of frame width and reserve enough top/bottom room for text.
-7. Animate visual assets intentionally: use entry animations such as `motion.popIn`, `motion.riseIn`, or `motion.slideY`; use short exit fade/slide segments when a clean transition is needed. For static plates, split the asset into a main segment and a final 0.4-0.7s segment with `motion.fadeOut(...)` to create a real exit.
-8. Use generative visuals such as `xai.imagine` only as a fallback, background texture, transition, or supplemental shot when real website assets are missing, low quality, or the user explicitly asks for generated footage.
-9. For every generated visual prompt, explicitly require a clean scene with no text, no words, no letters, no captions, no logos, no watermarks, and no readable UI copy. AI video generation often corrupts text; all final titles, offers, captions, CTAs, prices, and labels must be created with VidScript `text` primitives.
-10. Do not invent product claims. Extract copy, pricing, feature names, social proof, and CTA language from the site or ask the user.
+2. Capture website screenshots sparingly and intentionally. Prefer above-the-fold screenshots, product/app closeups, visible hero sections, pricing/offer cards, testimonials, and other viewable page states. Avoid full-page or very long screenshots as backgrounds because their text becomes illegible in video.
+3. Crop or frame screenshots to the specific visual evidence needed. Do not use screenshots as the only visual style by default, and do not build a whole video as a sequence of unreadable full-page captures.
+4. Detect and save usable product images, app screenshots, brand marks, and logos from the page when available. Prefer direct image assets when they are accessible and clearly match the product; use browser screenshots as supporting assets when they communicate something visible at video size.
+5. Probe saved asset type and dimensions before composing. Record file type, width, height, aspect ratio, and duration if video; never guess dimensions from filenames or screenshots.
+6. If a saved asset is a still image (`png`, `jpg`, `webp`, `gif`, `avif`, `svg`) and you want to place it on the timeline, convert it to a short H.264 MP4 plate with matching duration before using it as a `video` input. Keep the original still file too, but do not place it as `video`.
+7. Use captured assets or converted plates as grounded proof points alongside other visual material. A good ad can combine product/logo/app screenshots, generated video clips, motion backgrounds, text primitives, and music.
+8. Scale assets from their measured aspect ratio to fit the output frame and safe areas. For 1080x1920 ads, keep primary visuals inside roughly 80-88% of frame width and reserve enough top/bottom room for text.
+9. Animate visual assets intentionally: use entry animations such as `motion.popIn`, `motion.riseIn`, or `motion.slideY`; use short exit fade/slide segments when a clean transition is needed. For static plates, split the asset into a main segment and a final 0.4-0.7s segment with `motion.fadeOut(...)` to create a real exit.
+10. Generative visuals such as `xai.imagine` are allowed and often useful for product context, lifestyle scenes, abstract transitions, or polished motion. Use website screenshots as optional evidence, not as a rule that forbids generative clips.
+11. For every generated visual prompt, explicitly require a clean scene with no text, no words, no letters, no captions, no logos, no watermarks, and no readable UI copy. AI video generation often corrupts text; all final titles, offers, captions, CTAs, prices, and labels must be created with VidScript `text` primitives.
+12. Do not invent product claims. Extract copy, pricing, feature names, social proof, and CTA language from the site or ask the user.
 
 ## Best Practices
 
 - **Use dynamic timeblocks** — `[-]` auto-advances the cursor, reducing calculation errors
 - **Use `prev` for offsets** — `[prev + 0.5s .. prev + 2s]` for gaps between content
 - **Named arguments for clarity** — `hero.Trim(start: 0s, end: 5s)` over `hero.Trim(0s, 5s)`
-- **Prefer real website assets for URL-based ads** — browser screenshots, product images, app screenshots, and logos should come before fully generative clips
+- **Use website assets judiciously for URL-based ads** — browser screenshots, product images, app screenshots, and logos can ground the ad, but they are optional ingredients, not the whole recipe
+- **Avoid full-page screenshot backgrounds** — use above-fold, cropped, or focused screenshots that remain legible at video size; never rely on long website screenshots where the text becomes unreadable
 - **Probe before placing** — get exact dimensions for every real asset, calculate scale from aspect ratio, and set `width`, `height`, `x`, and `y` explicitly
+- **Match asset type to placement** — use real video files for `video` clips. Convert still screenshots/images to MP4 plates before timeline placement; do not point `video` at `.png`, `.jpg`, or `.webp` files.
 - **Animate assets, not only text** — give product screenshots/logos/cards a clear entrance and a clean exit; split static visuals into main and fade-out segments if needed
 - **Keep generated media text-free** — prompts for AI-generated images/videos must explicitly say no text, no words, no letters, no captions, no logos, no watermarks, and no readable UI copy; add all final copy with VidScript `text` primitives
 - Use 1080x1920 for vertical content (TikTok/Instagram)
@@ -188,7 +193,7 @@ If a render fails:
 Always ask clarifying questions about:
 - Target platform (TikTok, Instagram, YouTube, etc.)
 - Brand colors and fonts
-- Existing assets, product URLs, browser-captured screenshots, logos, and page images
+- Existing assets, product URLs, optional browser-captured screenshots, logos, page images, and generative visual directions
 - Desired duration and style
 - Whether they want to start from a template or from scratch
 

package/skills/shared/vidscript-guide.md

@@ -8,11 +8,12 @@ VidScript is a declarative DSL for composing short-form videos. Write a script,
 2. **Validate early** — `scenerok validate file.vid` (errors show as `Line N:C — message`).
 3. **Music package syntax** — `import eleven from "@elevenlabs/music"`, then call `eleven.music(...)`, `eleven.generateMusic(...)`, or `eleven.composeMusic(...)`.
 4. **Copy working examples** — see `examples/system/` in this skill folder (e.g. `minimal-text-reel.vid`, `ecom-product-launch.vid`, `rokmilk-chocolate-promo.vid`).
-5. **URL assets first** — if the user gives a website or product URL and browser screenshot tools are available, capture real page screenshots, product images, app screenshots, and logos for VidScript `input` assets before using generated visuals.
-6. **Probe asset dimensions** — before placing real assets, inspect width, height, and duration with `ffprobe`, `sips`, or `identify`; then scale from the measured aspect ratio and set explicit `width`, `height`, `x`, and `y`.
-7. **Animate real assets** — visual inputs should have entry motion and, where transitions matter, an exit beat. For static plates, split into a main segment and a short final `motion.fadeOut(...)` segment.
-8. **Generated media has no text** — prompts for AI-generated images/videos must explicitly ask for no text, no words, no letters, no captions, no logos, no watermarks, and no readable UI copy. Use VidScript `text` primitives for all final copy.
-9. **Strict rules** — see `vidscript-strict.md` for invalid patterns (bare `xai.imagine`, bare `eleven.music(...)` without import, trailing params after direct plugin calls, nested quotes in prompts).
+5. **Use URL assets selectively** — if the user gives a website or product URL and browser screenshot tools are available, you can capture above-fold screenshots, product images, app screenshots, and logos for VidScript `input` assets. Do not treat screenshots as mandatory or as the only visual source.
+6. **Probe asset type and dimensions** — before placing real assets, identify image vs video with `file`; inspect width, height, and duration with `ffprobe`, `sips`, or `identify`; then scale from the measured aspect ratio and set explicit `width`, `height`, `x`, and `y`.
+7. **Use still images correctly** — local image inputs can be uploaded, but plain VidScript timeline placement currently uses `video` clips. Convert screenshots/logos/stills to short H.264 MP4 plates before writing `[time] = video asset`.
+8. **Animate real assets** — visual inputs should have entry motion and, where transitions matter, an exit beat. For static plates, split into a main segment and a short final `motion.fadeOut(...)` segment.
+9. **Generated media has no text** — prompts for AI-generated images/videos must explicitly ask for no text, no words, no letters, no captions, no logos, no watermarks, and no readable UI copy. Use VidScript `text` primitives for all final copy.
+10. **Strict rules** — see `vidscript-strict.md` for invalid patterns (bare `xai.imagine`, bare `eleven.music(...)` without import, trailing params after direct plugin calls, nested quotes in prompts).
 
 ### Common validation failures
 
@@ -45,16 +46,34 @@ input logo = "./assets/logo.png"
 
 Supports HTTP(S) URLs, `/uploads/` paths, and local paths for video/image assets.
 
-For ads based on a supplied URL, use browser tools to capture real website screenshots and save product images or logos when available. Declare those files as inputs and use them in the composition before reaching for generated clips.
+For ads based on a supplied URL, browser tools can capture real website visuals and save product images or logos when useful. Use screenshots sparingly: favor above-fold, cropped, or focused captures that remain legible at video size. Avoid full-page or long scrolling screenshots as backgrounds because their text will usually become unreadable.
 
-After declaring or downloading assets, probe dimensions before placing them:
+Website captures are optional grounding assets, not a ban on generated video. A strong ad may combine product/logo/app screenshots with generated lifestyle clips, motion backgrounds, transitions, and VidScript text primitives. Use generative clips when they improve storytelling, show context, or make the ad feel more polished.
+
+After declaring or downloading assets, probe file type and dimensions before placing them:
 
 ```bash
+file asset.png
 ffprobe -v error -select_streams v:0 -show_entries stream=width,height,duration -of csv=p=0 asset.mp4
 sips -g pixelWidth -g pixelHeight asset.png
 identify asset.webp
 ```
 
+Use real videos as `video` clips. For still images such as screenshots, logos, product photos, or PNG captures, create a video plate first:
+
+```bash
+ffmpeg -y -loop 1 -t 4.5 -i screenshot.png -vf "scale=ceil(iw/2)*2:ceil(ih/2)*2,format=yuv420p" -r 30 screenshot-plate.mp4
+```
+
+Then declare the plate:
+
+```vidscript
+input screenshot = "assets/video-plates/screenshot-plate.mp4"
+[0s .. 4.5s] = video screenshot, width: 1080, height: 1920, x: 0, y: 0, animate: motion.fadeIn(0.35s)
+```
+
+Do not write `[0s .. 4s] = video screenshot_png` when `screenshot_png` points to `.png`, `.jpg`, or `.webp`. Plugin-generated image surfaces are separate from local still inputs and are only safe when a plugin explicitly returns a `surface` result.
+
 Use the measured width and height to preserve aspect ratio. For a 1080x1920 vertical ad, a common centered fit is:
 
 ```text

package/skills/shared/vidscript-strict.md

@@ -14,22 +14,40 @@ Without the owning import, calls like `xai.imagine`, `xai.tts`, `eleven.music`,
 
 **Never** call package functions without importing the package alias first.
 
-## Rule 2: Prefer real URL assets before generative media
+## Rule 2: Use URL assets selectively
 
-When the user gives a product, company, ecommerce, landing page, or app URL and you have browser/screenshot capability, visit the page and capture useful screenshots first. Save hero sections, product views, app screenshots, pricing/offer sections, testimonials, and detectable logos or brand marks as local image assets. Use those assets in VidScript `input` declarations and compose the ad around real product visuals.
+When the user gives a product, company, ecommerce, landing page, or app URL and you have browser/screenshot capability, you can visit the page and capture useful visual evidence. Favor above-fold screenshots, product views, app screenshots, pricing/offer cards, testimonials, and detectable logos or brand marks.
 
-Only use `xai.imagine` or other fully generative visuals when site assets are unavailable, too low quality, needed as background/transition material, or explicitly requested by the user. Do not invent claims; use website copy or ask the user.
+Do not use full-page or very long website screenshots as video backgrounds; their text is usually illegible at output size. Crop or frame screenshots to the specific visual proof point, and use them sparingly.
 
-## Rule 2.5: Probe real asset dimensions before placement
+Website screenshots are optional source material, not a requirement to build the whole video from screenshots. You may combine them with `xai.imagine` or other generative video plugins for lifestyle scenes, motion backgrounds, transitions, or product context. Do not invent claims; use website copy or ask the user.
 
-Before writing `width`, `height`, `x`, or `y` for a real image/video/screenshot/logo, inspect the actual asset dimensions and duration:
+## Rule 2.5: Probe real asset type and dimensions before placement
+
+Before writing `width`, `height`, `x`, or `y` for a real image/video/screenshot/logo, identify the asset type and inspect the actual dimensions and duration:
 
 ```bash
+file asset.png
 ffprobe -v error -select_streams v:0 -show_entries stream=width,height,duration -of csv=p=0 asset.mp4
 sips -g pixelWidth -g pixelHeight asset.png
 identify asset.webp
 ```
 
+Use real video files for `video` clips. Plain VidScript input declarations can upload still images, but direct timeline placement currently does not expose a production-safe `[time] = image input` syntax. Do not point `video` at `.png`, `.jpg`, or `.webp` inputs.
+
+For screenshots, logos, and other stills, convert the still to an H.264 MP4 plate first:
+
+```bash
+ffmpeg -y -loop 1 -t 4 -i screenshot.png -vf "scale=ceil(iw/2)*2:ceil(ih/2)*2,format=yuv420p" -r 30 screenshot-plate.mp4
+```
+
+Then use the plate:
+
+```vidscript
+input screenshot = "assets/video-plates/screenshot-plate.mp4"
+[0s .. 4s] = video screenshot, width: 1080, height: 1920, x: 0, y: 0, animate: motion.fadeIn(0.35s)
+```
+
 Use measured aspect ratio and safe-area math. Do not guess sizes or blindly resize every asset to the same box. Center visuals with explicit pixel placement when possible:
 
 ```text